javascript - 是否有可能在 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 方法中，我正在打印编号。对话框内容中的 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' ) ); 
}