Question

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

按下按钮后，您会在下面看到，下拉菜单中未加载任何值：

我想在下拉菜单中加载以下值（应该与onLoad函数中的行匹配）：

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

由于该代码段无法在堆栈代码段上运行，因此我将问题的完全可复制性放在了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);
        }
    };
});
    }
});

为什么下拉列表中的字段不加载？

感谢您的答复！

Answer 1

您忘记在插件对话框的onLoad回调中调用.add()，

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

或如果ES6不可用：

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

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

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

1 个答案: