Question

我目前正在创建一个智能对象＆＃39;小部件。在小部件对话框中，用户可以选择一个简单放置的智能对象，生成一些应添加到编辑器中的html。这里有一个棘手的部分：html有时是div元素，有时只是跨越元素。在div变体的情况下，小部件应该包含在div＆＃39;模板中。在跨度变体的情况下，窗口小部件应该包含在跨度中，并且html应该被添加为内联＆＃39;。

在小部件API中，我看到了以下定义模板的方法：

editor.widgets.add('smartobject', {
                dialog: 'smartobject',
                pathName: lang.pathName,
                template: '<div class="cke_smartobject"></div>', // <------

                upcast: function(element) {
                    return element.hasClass('smartObject');
                },

                init: function() {
                    this.setData('editorHtml', this.element.getOuterHtml());
                },

                data: function() {
                    var editorHtml = this.data.editorHtml;

                    var newElement = new CKEDITOR.dom.element.createFromHtml(editorHtml);

                    newElement.copyAttributes(this.element);

                    this.element.setText(newElement.getText());
                }
            });

但在我的情况下，模板更具动态性：有时是div，有时跨度会做正确的事情。

如何解决这个问题，而不需要创建两个完全相同的小部件，只有包装元素不同？

我已经尝试替换“数据”中的整个元素。方法，如：

newElement.replace(this.element);
this.element = newElement;

但似乎不支持：调用editor.getData（）后会导致未定义的错误。

我正在使用ckeditor v4.5.9

感谢您的帮助！

Answer 1

我似乎已经开始工作了（有一个解决方法）。代码：

CKEDITOR.dialog.add('smartobject', this.path + 'dialogs/smartobject.js');

        editor.widgets.add('smartobject', {
            pathName: lang.pathName,

            // This template is needed, to activate the widget logic, but does nothing.
            // The entire widgets html is defined and created in the dialog.
            template: '<div class="cke_smartobject"></div>',

            init: function() {
                var widget = this;
                widget.on('doubleclick', function(evt) {
                    editor.execCommand('smartobject');
                }, null, null, 5);
            },

            upcast: function(element) {
                return element.hasClass('smartObject');
            }
        });

        // Add a custom command, instead of using the default widget command,
        // otherwise multiple smartobject variants (div / span / img) are not supported. 
        editor.addCommand('smartobject', new CKEDITOR.dialogCommand('smartobject'));

        editor.ui.addButton && editor.ui.addButton('CreateSmartobject', {
            label: lang.toolbar,
            command: 'smartobject',
            toolbar: 'insert,5',
            icon: 'smartobject'
        });

在对话框中，插入代码如下：

return {
    title: lang.title,
    minWidth: 300,
    minHeight: 80,

    onOk: function() {
        var element = CKEDITOR.dom.element.createFromHtml(smartobjectEditorHtml);

        editor.insertElement(element);

        // Trigge the setData method, so the widget html is transformed,
        // to an actual widget!
        editor.setData(editor.getData());
    },
...etc.

<强>更新我使'onOk'方法更好一点：现在在插入后选择了smartobject元素。

onOk: function() {
        var element = CKEDITOR.dom.element.createFromHtml(smartobjectEditorHtml);
        var elementId = "ckeditor-element-" + element.getUniqueId();

        element.setAttribute("id", elementId);

        editor.insertElement(element);

        // Trigger the setData method, so the widget html is transformed,
        // to an actual widget!
        editor.setData(editor.getData());

        // Get the element 'fresh' by it's ID, because the setData method,
        // makes the element change into a widget, and thats the element which should be selected,
        // after adding.
        var refreshedElement = CKEDITOR.document.getById(elementId);
        var widgetWrapperElement = CKEDITOR.document.getById(elementId).getParent();

        // Better safe then sorry: if the fresh element doesn't have a parent, simply select the element itself.
        var elementToSelect = widgetWrapperElement != null ? widgetWrapperElement : refreshedElement;

        // Normally the 'insertElement' makes sure the inserted element is selected,
        // but because we call the setData method (to ensure the element is transformed to a widget)
        // the selection is cleared and the cursor points to the start of the editor.
        editor.getSelection().selectElement(elementToSelect);
    },

简而言之，我部分地使用了我想要的部件的小部件API： - 使小部件的html不可编辑 - 让它可移动

但是我创建了一个自定义对话框命令，它只是绕过默认的小部件插入，所以我可以完全决定我自己的小部件的html结构。

一切似乎都是这样的。

任何建议，为了让它更好，我们感激不尽：）！

Answer 2

正如this ckeditor论坛帖子中所建议的那样，最好的方法是将模板设置为包含所有可能的内容元素。然后，在db.Entry<Company>(companySearch).Collection(s => s.EmployeeList).Query().Where(p => p.ID >= 1 && p.ID <= 5).Load();函数中，根据您的特定逻辑删除不必要的部分。

CKEditor：多个小部件模板

2 个答案: