CKEditor widget - insert at positon

by radek

HTML

<script src="https://cdn.ckeditor.com/4.19.1/full-all/ckeditor.js"></script>

<textarea id="editor">
    <p>1 - Some text.</p>
    <p>2 - And there's the widget <span class="tagSpecialClass">birthYear</span></p>
    <p>3 - Some text <span class="tagSpecialClass">{{birthYear}}</span>.</p>
</textarea>

JavaScript

// Some CSS for the widget to make it more visible.
CKEDITOR.addCss( '.tagSpecialClass { background: green; padding: 3px; color: #fff } ' );

CKEDITOR.plugins.add( 'simplebox', {
    requires: 'widget',

    icons: 'simplebox',

    init: function( editor ) {
        editor.widgets.add( 'simplebox', {

            button: 'Create a simple box',

            template:
                '<div class="simplebox">' +
                    '<h2 class="simplebox-title">Title</h2>' +
                    '<div class="simplebox-content"><p>Content...</p></div>' +
                '</div>',

            editables: {
                title: {
                    selector: '.simplebox-title',
                    allowedContent: 'br strong em'
                },
                content: {
                    selector: '.simplebox-content',
                    allowedContent: 'p br ul ol li strong em'
                }
            },

            allowedContent:
                'div(!simplebox); div(!simplebox-content); h2(!simplebox-title)',

            requiredContent: 'div(simplebox)',

            upcast: function( element ) {
                return element.name == 'div' && element.hasClass( 'simplebox' );
            }
        } );
    }
} );


CKEDITOR.replace( 'editor', {
    // A clean-up in the toolbar to focus on essentials.
     toolbarGroups: [ 
    //    { name: 'document', groups: [ 'mode' ] },
    //    { name: 'basicstyles' },
        { name: 'insert' }
    ],
//    toolbar : [ { name: 'document', items: [ 'Source'] },
//    { name: 'insert'},
//    { name: 'editing', items: ['Undo', 'Redo' ]},
//    ],
    
    removeButtons: 'Image,Table,HorizontalRule,SpecialChar',
    removePlugins: 'exportpdf',
    extraPlugins: 'simplebox',

} );