Plugins | Snippets

Click the 'Add' (+) button on the toolbar to open addbar and then click on 'Snippets'.

<h1>Exploring the mysteries of space</h1>
<p>Space, the final frontier, stretches infinitely beyond the confines of Earth, a vast expanse of darkness speckled with stars, planets, and <b>galaxies</b>. It is a place of profound mystery and beauty, where the laws of physics manifest in ways that challenge our understanding. The cosmos is <a href="https://example/com">a cosmic dance</a> of celestial bodies moving in the silent echo of the universe, from the fiery birth of stars in nebulae to the enigmatic pull of black holes.</p>
<figure>
  <img src="/assets/redactor4/photo.jpg" alt="Blue and purple galaxy">
  <figcaption>Jeremy Thomas <a href="https://unsplash.com/photos/blue-and-purple-galaxy-digital-wallpaper-E0AHdsENmDg">unsplash.com</a></figcaption>
</figure>
<h2>Humanity's Journey Beyond Earth</h2>
<p>Exploring space has pushed humanity to its limits, revealing not just the universe's grandeur, but also the fragility of our own planet. Satellites orbiting Earth provide crucial data for communication, weather forecasting, and global positioning, while telescopes peer deep into the cosmos, uncovering the universe's age and composition. Each discovery in space leads us to new questions about our place in the universe, driving our insatiable curiosity to explore the unknown.</p>

Code

<!DOCTYPE html>
<html>
    <head>
        <title>Redactor</title>
        <meta charset="utf-8">

        <!-- css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-folder/redactor.js"></script>
        <script src="/your-folder/plugins/snippets/snippets.js"></script>

        <!-- call -->
        <script>
        Redactor('#entry', {
            plugins: ['snippets'],
            snippets: '/your-folder/snippets.json'
        });
        </script>
    </body>
</html>

Usage

Snippets are prepared code sections consisting of any html elements. The snippets setting allows you to get snippets from JSON file.


Redactor('#entry', {
    snippets: '/my-snippets/snippets.json'
});

Example of JSON:


{
    "mysnippet": {
        "name": "My Snippet",
        "html": "<h1>...</h1><p>...</p>"
    },
    "mysnippet2": {
        "name": "My Other Snippet",
        "html": "<h2>...</h2><div><p>...</p></div>"
    }
}

Or you can set the JSON object directly to the setting like this:


Redactor('#entry', {
    snippets: {
        "mysnippet": {
            "name": "My Snippet",
            "html": "..."
        },
        "mysnippet2": {
            "name": "My Other Snippet",
            "html": "..."
        }
    }
});

Redactor builds a preview of the snippet automatically as an html preview. But for more accurate display, you can specify a screenshot of the snippet with image size 160x80px:


{
    "mysnippet": {
        "name": "My Snippet",
        "image": "my-snippets/my-snippet.png",
        "html": "..."
    }
}

CSS

Redactor overrides content styles unless you have nostyle: true setting enabled. So a snippet can show incorrectly even if CSS snippet styles are present on your page where the editor is running. That's why it's better to add styles defining the snippet to the page, for example like this:


<style>
/* snippet styles on your page */
.mysnippet p {
    ...
}

/* snippet styles for Redactor */
.rx-content .mysnippet p {
    ...
}
</style>

See more about overriding styles.