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

CKEditor插件：根据选择设置默认值

1 个答案: