是否有可能在CK-EDITOR的插件对话框中动态添加HTML元素？

Question

我在ck-editor中创建一个小部件,当用户单击工具栏按钮时,会打开一个对话框.在一个对话框中有一个文本字段和一个搜索按钮,对话框中的休息区域用于显示搜索结果.

是否可能用户在文本字段中输入一些文本,点击搜索按钮并使用某些API我在文本字段和搜索按钮下方的插件对话框中显示约50个搜索结果(可滚动)？

现在我正在使用这段代码(只是一个假人来检查我是否可以动态添加元素) -

CKEDITOR.dialog.add('simplebox', function(editor){
return {
    title: 'Reference',
    minWidth: 600,
    minHeight: 400,

    onShow: function() {
        alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
    },

     contents: [
        {
            id: 'new_reference',
            label:'New Reference',
            elements: [

                {
                     id: 'type',
                     type: 'select',
                     label: 'Type',
                    items: [
                        [ editor.lang.common.notSet, '' ],
                        [ 'Book' ],
                        [ 'Journal' ],
                        [ 'URL' ],
                        [ 'PHD Thesis']
                    ]
                },
                {
                    type: 'text',
                    id: 'reference',
                    label: 'Reference',

                    validate: CKEDITOR.dialog.validate.notEmpty( "Search field cannot be empty." )

                },
                {
                    type: 'button',
                    align:'horizontal',
                    id: 'referencebutton',
                    label:'Search',
                    title: 'My title',
                    onClick: function() {

                        var linkContent = { type : 'html', id : 'test', html : '<div>just a test</div>' };
                        // this = CKEDITOR.ui.dialog.button
                        var dialog = CKEDITOR.dialog.getCurrent();
                        //alert(dialog.getContentElement('new_reference','reference').getValue());
                        var definition = dialog.definition;
                        //alert(definition.title);
                        definition.getContents("new_reference").add(linkContent);

                        // CKEDITOR.dialog.addUIElement('list',function(){
                        //  definition.getContents("new_reference").add(linkContent);
                        // });
                        alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
                    }
                }
            ]
        },
        {
            id: 'old_reference',
            label:'Old Reference',
            elements: [
                {
                    id:'author',
                    type:'text',
                    label:'Author'
                }
            ]
        }


    ]
};

});

在onShow方法里面我打印了no.对话框内容中的UI元素.它显示3个对象.单击一个按钮后,它会显示4个对象,因为已经通过代码添加了一个对象,但它确实显示在UI中？

这有什么线索吗？谢谢

Answer 1

你的方法还可以通过电话联系

definition.getContents("new_reference").add(linkContent);

你正在修改CKEDITOR.dialog.definition,只在第一次打开对话框时使用 - 来构建它.然后,一旦构建,如果您关闭对话框并再次打开它,编辑器将使用相同的DOM来显示它.我的意思是,这CKEDITOR.dialog.definition是一个蓝图,使用一次,对对话没有进一步的影响.

要与实时对话框进行交互,请使用以下内容

• CKEDITOR.ui.dialog.uiElement-method-getDialog,
• CKEDITOR.dialog-method-getContentElement(退货CKEDITOR.ui.dialog.uiElement),
• CKEDITOR.dialog-method-getValueOf,
• CKEDITOR.dialog-method-setValueOf

喜欢

onClick: function() {
    var dialog = this.getDialog();

    // get the element
    console.log( dialog.getContentElement( 'tabName', 'fieldId' ) ); 
    // get the value
    dialog.getValueOf( 'tabName', 'fieldId' ) ); 
    // set the value
    dialog.setValueOf( 'tabName', 'fieldId', 'value' ) ); 
}