CKeditor（4.10.1）-根据占位符选择动态显示对话框属性

Question

我正在使用CkEditor 4.10.1。在此，我想使用动态内容元素加载占位符对话框。

当前它正在打开每个占位符上具有相同元素的相同对话框，我想在对话框中呈现动态元素。

我该怎么做。

说明：

当我单击 Agency City 占位符时，它会打开该占位符的一个对话框并显示属性。

当我单击“代理商名称”占位符时，它还会打开具有相同属性的相同对话框。

我要根据占位符选择显示不同的属性。

CKEDITOR.addCss('span > .cke_placeholder { background-color: #ffeec2; }');

CKEDITOR.plugins.add('autotag', { requires:autocomplete,textmatch,toolbar,wysiwygarea,basicstyles,link,undo,placeholder,widget,dialog',
height: 340,
init: function (editor) {
    editor.on('instanceReady', function (evt) {
        var config = {};       
        function textTestCallback(range) {
            if (!range.collapsed) {
                return null;
            }
            return CKEDITOR.plugins.textMatch.match(range, matchCallback);
        }          

        function matchCallback(text, offset) {
            var pattern = /\[{2}([A-z]|\])*$/,
                match = text.slice(0, offset)
                .match(pattern);
            if (!match) {
                return null;
            }
            return {
                start: match.index,
                end: offset
            };
        }
        config.textTestCallback = textTestCallback;
        //The itemsArray variable is the example "database".

        var itemsArray = [
        {
            id: 1,
            name: 'Address',
            description: 'Customer Support address.'
        },
        {
            id: 2,
            name: 'AssigneeName',
            description: 'Ticket assignee name.'
        },
        {
            id: 3,
            name: 'DeadlineTime',
            description: 'Time for the technician to handle this issue.'
        },
        {
            id: 4,
            name: 'DepartmentName',
            description: 'Department name responsible for handling this ticket.'
        },
        {
            id: 5,
            name: 'CaseID',
            description: 'Unique case number used to distinguish tickets.'
        },
        {
            id: 6,
            name: 'CaseName',
            description: 'Name of the ticket provided by the user.'
        },
        {
            id: 7,
            name: 'ContactEmail',
            description: 'Customer Support contact e-mail address.'
        },
        {
            id: 8,
            name: 'CustomerName',
            description: 'Recipient of your response.'
        },
        {
            id: 9,
            name: 'HotlineNumber',
            description: 'Customer Support Hotline number.'
        },
        {
            id: 10,
            name: 'TechnicianName',
            description: 'Technician who will handle this ticket.'
        }
        ];

        function dataCallback(matchInfo, callback) {
            var data = itemsArray.filter(function (item) {
                var itemName = '[[' + item.name.toLowerCase() + ']]';
                return itemName.indexOf(matchInfo.query.toLowerCase()) == 0;
            });
            callback(data);
        }

        config.dataCallback = dataCallback;

        // Define the templates of the autocomplete suggestions dropdown and output text.
        config.itemTemplate = '<li data-id="{id}">' +
                        '<div><strong class="item-title">{name}</strong></div>' +
                        '<div><i>{description}</i></div>' +
                        '</li>';
        config.outputTemplate = '[[{name}]]<span>&nbsp;</span>';

        // Attach autocomplete to the editor.
        new CKEDITOR.plugins.autocomplete(editor, config);
    });

    // Register dialog.
    CKEDITOR.dialog.add('placeholder', function (editor) {
        debugger;
        alert('dialog Placeholder' + editor._.dataStore.id);
        var lang = editor.lang.placeholder,
            generalLabel = editor.lang.common.generalTab,
            validNameRegex = /^[^\[\]<>]+$/;
        var itms = new Array();
        itms[0] = new Array();
        itms[0][0] = "Meeting Time";
        itms[0][1] = "meetingTime";
        itms[1] = new Array();
        itms[1][0] = "Meeting Location";
        itms[1][1] = "meetingLoc";
        return {
            title: "Properties",
            minWidth: 300,
            minHeight: 400,
            onShow: function () {
                //alert("Show");
                //Removed
            },
            onOk: function () {
                //Removed
                //alert("Ok");
            },
            onCancel: function () {
                //Removed
                //alert("Cancel");
            },
            contents: [
                {
                    id: 'info',
                    //label: generalLabel,
                    //title: generalLabel,
                    label: "Properties",
                    title: "Properties",
                    elements: [
                        {
                            id: 'id',
                            type: 'select',
                            style: 'width: 100%;',
                            //label: lang.name,
                            label: "Id",
                            items: itms,
                            'default': 'meetingLocation',
                            required: true,
                            validate: CKEDITOR.dialog.validate.regex(validNameRegex, lang.invalidName),
                            setup: function (widget) {
                                //this.setValue(widget.data.name);
                                this.setValue('meetingTime');
                            },
                            commit: function (widget) {
                                widget.setData('id', this.getValue());
                            }
                        },
                        {
                            id: 'name',
                            type: 'text',
                            style: 'width: 100%;',
                            //label: lang.name,
                            label: "Name",
                            'default': '',
                            required: true,
                            validate: CKEDITOR.dialog.validate.regex(validNameRegex, lang.invalidName),
                            setup: function (widget) {
                                this.setValue(widget.data.name);
                            },
                            commit: function (widget) {
                                console.log(widget.data);
                                widget.setData('name', this.getValue());
                            }
                        }
                    ]
                }
            ]
        };
    });

    CKEDITOR.on('dialogDefinition', function (ev) {            
        // Take the dialog name and its definition from the event data.
        var dialogName = ev.data.name;
        var dialogDefinition = ev.data.definition;
    });
}});

预先感谢。非常感谢您的帮助。