How can widget insert text at certain position?

user_250422 0
Viewed 83

I want my widget to place the text/html at certain position. Could someone help me to understand how can a widget place text

  • at very bottom
  • at top
  • in between paragraph 1 and 2 etc?

working jsfiddle widget sample where I followed CKEditor 4 Widget Tutorial

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' );
            }
        } );
    }
} );
ckeditor4.x ckeditor
1 Answers

In order to place a text/html at top, you can create a widget with an empty template. And, to locate a text/html at the beginning of a content, you need to add the following code in the init function of a widget.

editor.on('afterCommandExec', function (event) {
    var template = '<div class="simplebox1">' +
        '<h2 class="simplebox1-title">Title</h2>' +
        '<div class="simplebox1-content"><p>Content...</p></div>' +
        '</div>' 
    editor.setData(template + editor.getData())
})

For "at the very bottom", the logic is same.

To place a text/html in between paragraph 1 and 2, you need to divide the content of ckeditor into two parts by your criteria.

editor.setData(content_part1 + template + content_part2)

The whole code of two widgets (at top & at the very bottom):

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

    icons: 'simplebox',

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

            button: 'Create a simple box at top',

            template:
                '',

            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');
            }
        });

        editor.on('afterCommandExec', function (event) {
            var template = '<div class="simplebox1">' +
                '<h2 class="simplebox1-title">Title</h2>' +
                '<div class="simplebox1-content"><p>Content...</p></div>' +
                '</div>' 
            editor.setData(template + editor.getData())
        })
    }
});

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

    icons: 'simplebox1',

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

            button: 'Create a simple box at very bottom',

            template:
                '',

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

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

            requiredContent: 'div(simplebox1)',

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

        editor.on('afterCommandExec', function (event) {
            var template = '<div class="simplebox1">' +
                '<h2 class="simplebox1-title">Title</h2>' +
                '<div class="simplebox1-content"><p>Content...</p></div>' +
                '</div>' 
            editor.setData(editor.getData() + template)
        })
    }
});
user_129650510
Related