Menu

Clips

Create a list of frequently used snippets of code, text, icons, emoji, you name it.

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/clips.css" />

        <!-- style your clips -->
        <style>
        .label-red {
            display: inline-block;
            background-color: #ec2d80;
            color: #fff;
            line-height: 1;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: normal;
        }
        </style>
    </head>
    <body>
        <!-- element -->
        <textarea id="content">...</textarea>

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

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

        <!-- call -->
        <script>
        $R('#content', {
            plugins: ['clips'],
            clips: [
                ['Lorem ipsum...', 'Lorem...'],
                ['Red label', '<b class="label-red">Label</b>']
            ]
        });
        </script>
    </body>
</html>