Question

查看docs，您可以将启动数据传递给窗口小部件：

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

然而，这些数据毫无意义，因为似乎没有办法影响模板输出 - 它已经在小部件的初始化之前生成，而且数据在此时甚至不可用：

editor.widgets.add('uselesswidget', {

    init: function() {
        // `this.data` is empty..
        // `this.dataReady` is false..

        // Modifying `this.template` here does nothing..
        // this.template = new CKEDITOR.template('<div>new content</div>');

        // Just after init setData is called..
        this.on('data', function(e) {
            // `e.data` has the data but it's too late to affect the tpl..
        });
    },

    template: '<div>there seems to be no good way of creating the widget based on the data..</div>'

});

同时添加一个CKEditor标记会引发一个＆＃34; Uncaught TypeError：无法读取属性＆＃39; align＆＃39;未定义＆＃34;异常，所以似乎数据也没有传递给原始模板：

template: '<div>Align: {align}</div>'

如果没有动态传递数据的方法，拥有可以接受上下文的CKEDITOR.template.output函数有什么意义呢？

我到目前为止发现的唯一可怕的hacky解决方案是拦截beforeCommandExec中的命令并阻止它，然后修改template并再次手动执行命令..

根据传递的数据生成动态模板的想法？感谢。

Answer 1

这就是我的做法。

小部件定义：

template:
   '<div class="myEditable"></div>',

init: function () {
        // Wait until widget fires data event
        this.on('data', function(e) {

            if (this.data.content) {
                // Clear previous values and set initial content
                this.element.setHtml('')
                var newElement = CKEDITOR.dom.element.createFromHtml( this.data.content );
                this.element.append(newElement,true);
                this.element.setAttribute('id', this.data.id);
            }

            // Create nestedEditable
            this.initEditable('myEditable', {
                selector: '.myEditable',
                allowedContent: this.data.allowedContent
            })

        });
    }

动态窗口小部件创建：

        editor.execCommand('myEditable', {startupData: {
            id: "1",
            content: "some <em>text</em>",
            allowedContent: {
              'em ul li': true,
            }
        }});

CKEditor小部件在呈现后接收数据

1 个答案: