CODEWITHSUNDEEP
javascriptjqueryckeditor
mhalici
mhalici

Reputation: 55

CKEditor Plugin: Setting a default value based on a selection

I created a custom CKEditor Plugin that takes a text value and inserts it into some HTML. Everything works fine, but I don't know how to populate the field with a default value. I would like the default value to be blank if it is a new element. But i would like the default value to be the value of the selected item while editing it. Otherwise I am unable to edit the value inside of the HTML without going into Source mode, or completely deleting everything and starting over again.

CKEDITOR.dialog.add( 'videoLinkDialog', function( editor )
{
  return {
    title : 'Video Properties',
    minWidth : 400,
    minHeight : 200,
    contents :
    [
      {
        id : 'general',
        label : 'Settings',
        elements :
        [
          {
            type : 'html',
            html : 'This dialog window lets you embed Vimeo videos on your website.'
          },
          {
            type : 'text',
            id : 'url',
            label : 'Video ID',
            validate : CKEDITOR.dialog.validate.notEmpty( 'This field cannot be empty.' ),
            required : true,
            commit : function( data )
            {
              data.text = this.getValue();
            }
          },
        ]
      }
    ],
    onOk : function()
    {
      val = this.getContentElement('general', 'url').getInputElement().getValue();
      var text = '<a class="colorbox-inline" href="http://player.vimeo.com/video/' + val + '?width=915&amp;height=515&amp;iframe=true&amp;autoplay=1"><img class="vid-thumbnail" src="http://placehold.it/350x150" data-vimeo-id="' + val + '" /></a>';
      this.getParentEditor().insertHtml(text)
    },
  };
} );

Upvotes: 2

Views: 1596

Answers (1)

Mel K.
Mel K.

Reputation: 317

There are several ways,

The simplest way being to add setup to each of your dialog elements as demonstrated in the CK Editor Plugin Tutorial like so:

{
  type : 'text',
  id : 'url',
  label: 'Video ID',
  validate : CKEDITOR.dialog.validate.notEmpty( 'This field cannot be empty.' ),
  required : true,
  setup : function ( data ) {
    this.setValue(data.getAttribute('url'));
  }
  commit : function( data ) {
    data.text = this.getValue();
  }
}

Alternatively, you could also use this event handler that will fire before the dialog is rendered:

onShow: function () { 
  // your code here
  // eg. this.setValue(*ELEMENT_ID*, *ELEMENT_VALUE*);
}

here you can view the element that called the event and get or set any values you may need to populate your dialog.

You should also add a click listener like the following to your plugin.js file to show the dialog from a selected element like so:

 editor.on('doubleclick', function (e) {
     var el = e.data.element;
     if (el == *YOUR_CUSTOM_ELEMENT*)
        e.data.dialog = *DIALOG_NAME*;
  });

Upvotes: 1

Related Questions