查看文档,你可以将启动数据传递给小部件:
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标签抛出"Uncaught TypeError: Cannot read property 'align' of undefined"异常,所以数据似乎也没有传递到原始模板:
template: '<div>Align: {align}</div>'
如果没有动态传递数据的方法,拥有一个可以接受上下文的CKEDITOR.template.output
函数的意义是什么?
到目前为止,我发现的唯一可怕的黑客解决方案是拦截beforeCommandExec
中的命令并阻止它,然后修改template
并再次手动执行命令。
基于传递的数据生成动态模板的任何想法?谢谢。
我是这样做的。
小部件定义:
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,
}
}});