Ckeditor - 在“选择”字段中加载动态字段值

Question

我正在尝试为ckeditor中的下拉字段加载动态输入值：

如下所示，当按下按钮时，下拉列表中没有加载任何值：

我希望在下拉菜单中加载以下数值（应由 onLoad 函数中的正则表达式匹配）：

{{ $slot }}
{{$example }}
{{ $Product2}}
{{$category1 }}

由于代码片段无法在stack-snippets上运行，我在codepen上放置了一个完全可工作的问题复制。请参见以下链接：https://codepen.io/anon/pen/NBXObP

我的插件代码如下所示：

var selectedList = []

CKEDITOR.replace("editor", {
  extraPlugins: "insertData"
});

CKEDITOR.plugins.add( 'insertData', {

    icons: '',
    init: function( editor ) {

        editor.addCommand( 'insertData', new CKEDITOR.dialogCommand( 'insertDataDialog' ) );
        editor.ui.addButton( 'InsertData', {
            label: 'Insert InsertData',
            command: 'insertData',
            toolbar: 'insert'
        });

        if ( editor.contextMenu ) {
            editor.addMenuGroup( 'insertDataGroup' );
            editor.addMenuItem( 'insertDataItem', {
                label: 'Edit InsertData',
                icon: this.path + 'icons/insertData.png',
                command: 'insertData',
                group: 'insertDataGroup'
            });

            editor.contextMenu.addListener( function( element ) {
                if ( element.getAscendant( 'insertData', true ) ) {
                    return { insertDataItem: CKEDITOR.TRISTATE_OFF };
                }
            });
        }

        CKEDITOR.dialog.add( 'insertDataDialog', function (editor) {
    return {

        // Basic properties of the dialog window: title, minimum size.
        title: 'InsertData Properties',
        minWidth: 400,
        minHeight: 200,

        // Dialog window content definition.
        contents: [{
                // Definition of the Basic Settings dialog tab (page).
                id: 'tab-basic',
                label: 'Basic Settings',

                // The tab content.
                elements: [{
                        // Text input field for the insertData text.
                        type: 'select',
                        id: 'insertData',
                        label: 'Element',
                        items: selectedList,
                        'default': '',

                        onLoad: function (widget) {
                            var text = CKEDITOR.instances.editor.getData();
                            var selectedList = text.match(/{{\s*\$\w+\s*}}/g)
                            console.log("text: " + text)
                            console.log("selectedList: " + selectedList)
                        },

                        onChange: function (api) {
                            alert('Current value: ' + this.getValue());
                        }
                    },
                    {
                        type: 'text',
                        id: 'title',
                        label: 'InsertDatas',
                        validate: CKEDITOR.dialog.validate.notEmpty("InsertDatas field cannot be empty."),

                        setup: function (element) {
                            this.setValue(element.getAttribute("title"));
                        },

                        commit: function (element) {
                            element.setAttribute("title", this.getValue());
                        }
                    }

                ]
            },
        ],

        onShow: function () {

            var selection = editor.getSelection();
            var element = selection.getStartElement();

            if (element)
                element = element.getAscendant('insertData', true);

            if (!element || element.getName() != 'insertData') {
                element = editor.document.createElement('insertData');

                this.insertMode = true;
            } else
                this.insertMode = false;

            this.element = element;
                this.setupContent(this.element);
        },

        onOk: function () {
            var insertData = this.element;

            this.commitContent(insertData);
            if (this.insertMode)
                editor.insertElement(insertData);
        }
    };
});
    }
});

为什么下拉菜单中的字段没有加载？

感谢您的回复！

- Carol.Kar

Answer 1

您在插件对话框选择中忘记在onLoad回调函数中调用.add()方法：

selectedList.forEach((item) => {
    this.add(item);
});

如果没有ES6：

var _self = this;
selectedList.forEach(function(item) {
    _self.add(item);
});

修改后的Codepen代码：https://codepen.io/anon/pen/pZaVXz?editors=1010

- Joseph Marikle

---

谢谢您的快速回复！然而，如果我在编辑器内容字段中添加另一个元素，例如 {{ $test }}，它不会显示在下拉列表中。 - Carol.Kar

@Anna.Klee 这是因为 onLoad 只在对话框生成时执行一次。你应该使用 onShow，它会在每次打开对话框时运行。这将引入一个新问题。每次打开对话框时，列表都会不断增长。因为你无论如何都想重新评估它，所以在 onShow 方法中添加项目之前，应该使用 _self.clear();。我已经更新了 CodePen 来反映这一点。 - Joseph Marikle

onShow在CKEDITOR.dialog.definition.select文档中有说明。 - Joseph Marikle

谢谢您的快速回复！关于下拉菜单还有一件事。每个出现的选项都应该是唯一的，因此如果在内容编辑器中出现了2个{{ $slot }}，则下拉菜单中只应显示1个。 - Carol.Kar

@Anna.Klee，有多种方法可以去重你的数据，但通常需要进行一般性的清理。你应该删除不改变解析值的额外空格，标准化大小写等。无论哪种方式，这些都可以在你的onShow方法中完成。 - Joseph Marikle