Search code examples
javascriptjquerydialogckeditor

Set dialog field value as selected text


I want to code CKEditor plugin. I have added button on panel and when I press it dialog is shown. In this dialog I can set text and after OK pressed this text inserted to the editor.

But I want add functionality. When I select text in editor and press this button I want see selected text in that dialog field. And after editing and press Ok selected text must be replaced with new one.

Thanks!


Solution

  • This is not 100% working, the first part is working, the final replacement isn't..

    CKEDITOR.plugins.add( 'example',
    {
        init: function( editor )
        {
            editor.addCommand( 'exampleDialog', new CKEDITOR.dialogCommand( 'exampleDialog' ) );
    
            editor.ui.addButton( 'example',
            {
                label: 'Insert a Link',
                command: 'exampleDialog'//,
                //icon: this.path + 'images/icon.png'
            } );
    
            CKEDITOR.dialog.add( 'exampleDialog', function( editor )
            {
                return {
                    title : 'example Properties',
                    minWidth : 400,
                    minHeight : 200,
                    contents :
                    [
                        {
                            id : 'general',
                            label : 'Settings',
                            elements :
                            [
                                {
                                    type : 'text',
                                    id : 'mystring',
                                    label : 'text',                             
                                    commit : function( data )
                                    {
                                        data.text = this.getValue();
                                    }
                                }
                            ]
                        }
                    ],
    
                    onShow : function() {
                        //this._ranges = editor.getSelection().getRanges()
                        var mySelection = editor.getSelection().getSelectedText();
                        this.setValueOf("general","mystring",mySelection);
    
                    },
    
                    onOk : function()
                    {
                        var data = {};
                        this.commitContent( data );
                        var txt = data.text;
    
    
                        editor.insertText(txt);  //this is not correct, since selection is being cleared...
                    }
                };
            });
        }
    });