Search code examples
ckeditor

Ckeditor 3 - Insert element on click when toolbar button is selected


I would like to insert certain text or html (default and repeating) on click on the Ckeditor textarea window.

I created a custom plugin and it works for adding some text when toolbar button is clicked or it adds text when clicking on the textarea window through below snippet.

        CKEDITOR.plugins.add( 'duppointer',
        {
            init: function( editor )
            {

                editor.addCommand( 'insertDup',
                {
                    modes : { wysiwyg:1, source:1 },
                    exec : function( editor )
                    {    
                        editor.insertText( '#' );
                    }
                });

                editor.on( 'contentDom', function(){
                    this.document.on( 'click', function() {
                        editor.insertText( '#' );
                    });
                });

                editor.ui.addButton( 'duppointer',
                {
                    label: 'Insert Duplicate Text',
                    command: 'insertDup',
                } );
            }
        } );

But, I want to insert text on click only when the toolbar button is active otherwise pointer click must act normal.

Is it possible to achieve this?


Solution

  • Since no one responded, I started digging down through the API and came to know about the state of button. And finally, I get what I was searching for, does not if it's the right way but it works for me,

    CKEDITOR.plugins.add( 'duppointer',
    {
        init: function( editor )
        {
    
            var ccommand = editor.addCommand( 'duppointer',
            {
                modes : { wysiwyg:1, source:1 },
                exec : function( editor )
                {    
                    ccommand.toggleState();
                },
                editorfocus: true,
            });
    
            editor.on( 'contentDom', function(){
                this.document.on( 'click', function() {
                    if(ccommand.state == CKEDITOR.TRISTATE_ON){
                        editor.insertText( '#' );
                    }
                });
              });
    
            editor.ui.addButton( 'duppointer',
            {
                label: 'Insert Duplicate',
                command: 'duppointer',
                icon: this.path + 'images/dup.jpg'
            } );
        }
    } );