Setting Value of HTML element in Dialog

Hi All,

I'm creating a new plugin at the moment which is activated by a button in the toolbar.

Pressing the button will display a dialog, this dialog will contain a html element. Here is a stripped down version of the code.

CKEDITOR.dialog.add( 'myDialogName', function( editor ) {
      var MyLang= editor.lang.MyLang,
         commonLang = editor.lang.common
      return {
         title : MyLang.title,
         minWidth : 904,
         minHeight : 415,
         onShow : function() {
            //Removed
         },
         onOk : function() {
            //Removed
         },
         onCancel : function() {
            //Removed
         },
         contents : [
            {
               id : 'info',
               label : commonLang.generalTab,
               accessKey : 'I',
               elements :
               [
                  {
                     id: 'gamesFrame',
                     type: 'html',
                     html: '<p>Please wait while we load the admin area.....</p>',
                  }
               ]
            }
         ]
      };
   });

I'd like to be able to update the HTML at set intervals based on actions that the user performs. I can access the html by using the following code.

var F=CKEDITOR.dialog.getCurrent();
F.getContentElement('info','gamesFrame').html;

And I can even update the value by doing

var F=CKEDITOR.dialog.getCurrent();
F.getContentElement('info','gamesFrame').html = '<p>Blah Blah Blah</p>';

However that just seems to updates the ckeditors locally held reference to what it knows that element contains, it does not affect what is displayed on the screen.

I tried the .setValue function which I use for textboxes i.e.

F.getContentElement('info','gamesFrame').setValue( '<p>Blah Blah Blah</p>');

But again this does not modify what is displayed on the screen.

As the html id attribute for all of the elements is dynamically generated at load, does anyone know how I can reliably access the html element and update it's contents?

Thanks for reading.

Sun, 07/20/2014 - 01:24

michaelpward

Joined: 20/07/2014

Posts: 1

Solution Found

...over 2 years after this question was posted. I had to hunt for 1.5 hours to find the solution. In the spirit of giving back here's the scoop:

The documentation for CKEDITOR.dialog.definition.html showed me the way (surprise, rtfm).

It boils down to this: Set an explicit id in the actual html of your dialog element like so (look for id="bar")...

contents: [
                {
                id: "contentVariationSettings",
                elements: [
                    {
                        type: 'html',
                        id: 'foo',
                        html: '<div id="bar">Initial Content of my div</div>',
                    }
                ]
            }]

...then use whatever listener you care to (I'm using onShow, feel free to roll your own). Get a handle on the document so you can then get the element by its Id. Finally, use the .setHtml() method like so...

onShow : function() {
    var document = this.getElement().getDocument();
    var element = document.getById('bar');
    if (element) {
        element.setHtml('<div id="bar">Modified Content of my div</div>');
    }
}

Mon, 07/21/2014 - 09:40

Anna

Joined: 14/12/2010

Posts: 1369

Thanks for your input,

Thanks for your input, Michael, and just for future reference: your API link leads to CKEditor 3 API documentation. For CKEditor 4, the current line, the correct link for dialog definition is http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition.

In general, CKEditor 4 documentation site is located at http://docs.ckeditor.com/ and it contains both current API documentation and the Developer's Guide. Although the APIs for CKEditor 3 and 4 are very similar and backward compatibility is preserved in most cases, there are lots of new things introduced in CKEditor 4 (like Advanced Content Filter, widgets, new plugins etc) that you will not find in the CKEditor 3 docs.

Documentation Manager, CKSource

See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!