Handle

Creates the feature of opening a list, for example, of users if you write something like @mentions in the text.

Download

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

Code

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

        <!-- css -->
        <link rel="stylesheet" href="/your-article-dist-path/article-editor.css" />
    </head>
    <body>
        <!-- element -->
        <textarea id="entry">...</textarea>

        <!-- js -->
        <script src="/your-article-dist-path/article-editor.js"></script>
        <script src="/your-article-dist-path/plugins/handle.js"></script>

        <!-- call -->
        <script>
        ArticleEditor('#entry', {
            plugins: ['handle'],
            css: '/your-article-dist-path/',
            handle: {
                url: '/your-folder/handle-script/'
            }
        });
        </script>
    </body>
</html>

Usage

The handle script receives a POST variable handle 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 handle script should return an empty response.

Handle plugin has additional optional settings:

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