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是蓝图，只使用一次，对对话没有进一步的影响。

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

像

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' ) ); 
}

Answer 2

解决此问题的一种方法是使用 onShow 函数并在对话框选项卡中插入html对象。

onShow : function() {
    var element = document.createElement("div");
    element.setAttribute('id', "someId");
    document.getElementsByName("new_reference")[0].appendChild(element);
}

然后在 onClick 函数中，只需访问该元素并设置所需的内容，如下所示：

onClick : function() {
    document.getElementById("someId").innerHTML='<div id="example-'+count+'">Hello World</div>';
}

通过这样做，您应该能够获得要在对话框中显示的数据。希望它有所帮助。

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

2 个答案: