Menu

Handle

Allow users to get the @mentions feature with an inline dropdown.

Download

Code

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

        <!-- redactor css -->
        <link rel="stylesheet" href="/your-folder/redactor.css" />

        <!-- plugin css -->
        <link rel="stylesheet" href="/your-folder/plugins/handle.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="content">...</textarea>

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

        <!-- plugin js -->
        <script src="/your-folder/plugins/handle.js"></script>

        <!-- call -->
        <script>
        $R('#content', {
            plugins: ['handle'],
            handle: '/your-folder/handle-script/',

            // optional
            handleTrigger: '#', // change the start trigger (@ - by default)
            handleStart: '2' // change the start point (0 - by default)
        });
        </script>
    </body>
</html>

Usage

The handle-script gets the POST variable handle and must return JSON data like:

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