Handle

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

    Demo

    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>"
        }
    }