CODEWITHSUNDEEP
ckeditor
San Thapa
San Thapa

Reputation: 321

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?

Upvotes: 4

Views: 541

Answers (1)

San Thapa
San Thapa

Reputation: 321

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

Upvotes: 2

Related Questions