将数据传递给CKEditor中的小部件

Passing data to widget in CKEditor

本文关键字：小部 CKEditor 数据      更新时间：2023-09-26

我做了一个非常简单的自定义小部件，但是我想通过自定义按钮而不是工具栏按钮将其添加到编辑器中，所以我使用editor.execCommand("mywidget")。小部件已正确添加，但是如何通过此execCommand调用将数据传递给小部件?在文档中，它说execCommand的第二个参数用于将数据传递给命令处理程序，但是我似乎找不到我在调用execCommand("mywidget", {paramshere})后如何在小部件代码中访问它。

谢谢!

CKEditor 4.5.0 Beta版的文档已经更新，通过命令指定小部件数据的能力是该版本的新功能。

所以，由于CKEditor 4.5.0 Beta这是(将是)可能的:

editor.execCommand( 'simplebox', {
    startupData: {
        align: 'left'
    }
} );

但是在此版本之前，您需要直接使用Widget API。查看该命令在4.5.0测试版中的工作方式。有相当多的代码，但其中大部分是关于打开对话框和处理widget元素，甚至在它被插入编辑器之前(它必须保存在某个地方)。

如果您只想插入一个小部件，那么只需遵循文档:

var element = editor.document.createElement( 'div' );
editor.insertElement( element );
var widget = editor.widgets.initOn( element, 'simplebox', { align: 'left' } );

可以看到，widgetsRepository.initOn()接受数据对象

定义命令时，或者需要修改现有命令时，只需向exec函数添加第二个参数，如下所示:

   function myCommandName(data){
     this.data = data
   } 
   myCommandName.prototype = {
     exec: function(editor, data) {
       if(data){
         doSomethingWithData(data);
       }
     }
   }
   editor.addCommand( 'myCommandName', new myCommandName(optionalDefaultData) )

为了在执行时将数据传递给命令，在命令名之后提供数据作为第二个属性。

editor.execCommand('myCommandName', { data: 'my data' });
相关文章：