Plugins | Icons - Redactor

Click on the star icon in the toolbar, then choose an icon from the popup to insert it.

<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/icons/icons.js"></script>

        <!-- call -->
        <script>
        Redactor('#entry', {
            plugins: ['icons']
        });
        </script>
    </body>
</html>

Usage

The set of icons that will be shown in the popup of the plugin is specified as an array in the setting of the plugin itself. This set can be changed by specifying your own array like this:


Redactor('#entry', {
    plugins: ['icons'],
    icons: {
        items: [
            '<svg..>',
            '<svg..>',
            '<svg..>'
        ]
    }
});

Icons can be specified as SVG and HTML, for example, here's how to specify the FontAwesome icons:


Redactor('#entry', {
    plugins: ['icons'],
    icons: {
        items: [
            '<i class="fas fa-address-book"></i>',
            '<i class="fas fa-address-card"></i>',
            '<i class="fas fa-archway"></i>'
        ]
    }
});

Of course, you can mix SVG and HTML icons in one set:


Redactor('#entry', {
    plugins: ['icons'],
    icons: {
        items: [
            '<svg..>',
            '<svg..>',
            '<i class="fas fa-address-card"></i>',
            '<i class="fas fa-archway"></i>'
        ]
    }
});

By default, the plugin adds its button to the toolbar and context bar. To remove it from the context bar, disable the context setting:


Redactor('#entry', {
    plugins: ['icons'],
    icons: {
        context: false
    }
});