javascript - CKEditor 插件 : Setting a default value based on a selection

Question

我创建了一个自定义的 CKEditor 插件，它接受一个文本值并将其插入到一些 HTML 中。一切正常，但我不知道如何使用默认值填充该字段。如果它是一个新元素，我希望默认值为空。但我希望默认值是编辑时所选项目的值。否则，我无法在不进入源代码模式或完全删除所有内容并重新开始的情况下编辑 HTML 内部的值。

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

Answer 1

有几种方法，

最简单的方法是将 setup 添加到每个对话框元素中，如 CK Editor Plugin Tutorial 中所示。像这样:

{
  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();
  }
}

或者，您也可以使用这个将在呈现对话框之前触发的事件处理程序:

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

在这里您可以查看调用事件的元素并获取或设置填充对话框可能需要的任何值。

您还应该在 plugin.js 文件中添加如下所示的点击监听器，以显示所选元素的对话框，如下所示:

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