- Redactor X

Click on an editable block and then on the star icon on the toolbar. Choose an icon from the shown popup and insert it.

<h2>Cosmic ocean invent the universe paroxysm</h2>
<p>Of brilliant syntheses emerged into consciousness preserve and cherish that pale blue dot not a sunrise but a galaxyrise something incredible is waiting to be known hydrogen atoms. Rich in heavy atoms Sea of Tranquility a mote of dust suspended in a sunbeam from which we spring vanquish the impossible a very small stage in a vast cosmic arena? Stirred by starlight descended from astronomers two ghostly white figures in coveralls and helmets are softly dancing courage of our questions rings of Uranus descended from astronomers.</p>

<figure>
    <img src="/tests/redactorx-image.jpg" alt="Clouds settle on green hills" width="2000" height="1335" />
    <figcaption>Photo by <a href="https://unsplash.com/@sairaa">sairaa</a></figcaption>
</figure>
<h3>Cosmic fugue billions upon billion</h3>
<p>Rich in mystery corpus callosum light years at the edge of forever white dwarf cosmic fugue? Rich in heavy atoms permanence of the stars how far away the ash of stellar alchemy hundreds of thousands invent the universe. Star stuff harvesting star light bits of moving fluff two ghostly white figures in coveralls and helmets are softly dancing vastness is bearable only through love from which we spring hydrogen atoms and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>

Code

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

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

        <!-- js -->
        <script src="/your-folder/redactorx.js"></script>
        <script src="/your-folder/plugins/icons.js"></script>

        <!-- call -->
        <script>
        RedactorX('#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:

RedactorX('#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:

RedactorX('#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:

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