Defined Links

Add a link to the text by selecting it from a predefined list in the link popup.

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

        <!-- call -->
        <script>
        Redactor('#entry', {
            plugins: ['definedlinks'],
            definedlinks: {
                items: [
                    { "name": "Select...", "url": false },
                    { "name": "Google", "url": "http://google.com" },
                    { "name": "Home", "url": "/" },
                    { "name": "About", "url": "/about/" },
                    { "name": "Contact", "url": "/contact/" }
                ]
            }
        });
        </script>
    </body>
</html>

Usage

url

The plugin can accept a url parameter:


Redactor('#entry', {
    plugins: ['definedlinks'],
    definedlinks: {
        url: 'my-path-to-the-server'
    }
});

For example, you can generate a dynamic link list for a plugin on server-side and return it as a JSON object:


$items = [
    [ "name" => "Select from dymanic...", "url" => false ],
    [ "name" => "Google", "url" => "http://google.com" ],
    [ "name" => "Home", "url"  => "/" ],
    [ "name" => "About", "url" => "/about/" ],
    [ "name" => "Contact", "url"  => "/contact/" ]
];

echo json_encode($items);

function

The plugin can accept a function for the items parameter:


Redactor('#entry', {
    plugins: ['definedlinks'],
    definedlinks: {
        items: function() {
            const obj = [
                { "name": "Select from function...", "url": '' },
                { "name": "Google", "url": "http://google.com" },
                { "name": "Home", "url": "/" },
                { "name": "About", "url": "/about/" },
                { "name": "Contact", "url": "/contact/" }
            ];
            return obj;
        }
    }
});

So in a custom function you can dynamically generate a list of links or fetch them from the server using javascript.