CODEWITHSUNDEEP
javascriptjqueryckeditor
akg
akg

Reputation: 670

Is there a possibility to add a HTML element dynamically inside a dialog of a plugin in CK-EDITOR?

I am creating a widget in ck-editor where when user clicks a toolbar button,a dialog is opened.In a dialog there is text field and one search button,rest area in a dialog is for search results to be shown.

Is it possible that user enters some text in a text field , hit search button and by using some API I display some 50 search results(scrollable) in a dialog of a plugin below the text field and search button?

Right now I am using this code (just a dummy to check if I can add elements dynamically)- 

CKEDITOR.dialog.add('simplebox', function(editor){
return {
    title: 'Reference',
    minWidth: 600,
    minHeight: 400,

    onShow: function() {
        alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
    },

     contents: [
        {
            id: 'new_reference',
            label:'New Reference',
            elements: [

                {
                     id: 'type',
                     type: 'select',
                     label: 'Type',
                    items: [
                        [ editor.lang.common.notSet, '' ],
                        [ 'Book' ],
                        [ 'Journal' ],
                        [ 'URL' ],
                        [ 'PHD Thesis']
                    ]
                },
                {
                    type: 'text',
                    id: 'reference',
                    label: 'Reference',

                    validate: CKEDITOR.dialog.validate.notEmpty( "Search field cannot be empty." )

                },
                {
                    type: 'button',
                    align:'horizontal',
                    id: 'referencebutton',
                    label:'Search',
                    title: 'My title',
                    onClick: function() {

                        var linkContent = { type : 'html', id : 'test', html : '<div>just a test</div>' };
                        // this = CKEDITOR.ui.dialog.button
                        var dialog = CKEDITOR.dialog.getCurrent();
                        //alert(dialog.getContentElement('new_reference','reference').getValue());
                        var definition = dialog.definition;
                        //alert(definition.title);
                        definition.getContents("new_reference").add(linkContent);

                        // CKEDITOR.dialog.addUIElement('list',function(){
                        //  definition.getContents("new_reference").add(linkContent);
                        // });
                        alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
                    }
                }
            ]
        },
        {
            id: 'old_reference',
            label:'Old Reference',
            elements: [
                {
                    id:'author',
                    type:'text',
                    label:'Author'
                }
            ]
        }


    ]
};

});

Inside onShow method I am printing the no. of UI elements inside a content of a dialog.It shows 3 objects. After click of a button,it shows 4 objects since one has been added via code but it does show in the UI?

Any clues on this? Thanks

Upvotes: 4

Views: 2804

Answers (2)

cdn34
cdn34

Reputation: 107

One way to get around this problem is to use the onShow function and insert an html object in the dialog tab.

onShow : function() {
    var element = document.createElement("div");
    element.setAttribute('id', "someId");
    document.getElementsByName("new_reference")[0].appendChild(element);
}

Then in the onClick function, just access the element and set the content you want, like this:

onClick : function() {
    document.getElementById("someId").innerHTML='<div id="example-'+count+'">Hello World</div>';
}

By doing this, you should be able to get data to show in your dialog. Hope it helps.

Upvotes: 1

oleq
oleq

Reputation: 15895

Your approach is OK but by calling

definition.getContents("new_reference").add(linkContent);

you're modifying CKEDITOR.dialog.definition, which is used only the first time the dialog is opened – to build it. Then, once built, if you close the dialog and open it again, the editor uses the same DOM to display it. What I mean is that CKEDITOR.dialog.definition is a blueprint, which is used once and has no further impact on the dialog.

To interact with live dialog, use the following

like

onClick: function() {
    var dialog = this.getDialog();

    // get the element
    console.log( dialog.getContentElement( 'tabName', 'fieldId' ) ); 
    // get the value
    dialog.getValueOf( 'tabName', 'fieldId' ) ); 
    // set the value
    dialog.setValueOf( 'tabName', 'fieldId', 'value' ) ); 
}

Upvotes: 3

Related Questions