Plugins | Mention

Just start to type '@jo' somewhere in the text.

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

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

Usage

The mention script receives a POST variable mention and must return JSON data such as:


{
    "alex": {
        "item": "Alex", // any text or HTML that will be displayed as a list item in the inline dropdown
        "replacement": "<a href="/users/alex/">@alex</a>" // any HTML that will replace the trigger text
    },
    "john": {
        "item": "John",
        "replacement": "<a href="/users/john/">@john</a>"
    }
}

If there are no results, the mention script should return an empty response.

Mention plugin has additional optional settings:


mention: {
    url: '/your-folder/mention-script/',
    start: 2, // start point (1 - by default)
    trigger: '#' // start trigger (@ - by default)
}