Question

我需要插入一个小部件两次但是使用不同的附加类，类似的东西：

[div 'open' with class "tabs"]
<br />
[div 'close' with class "tabs tabs-end"]

这不起作用：

template:
    '<div class="tabs">Open</div> <br /> <div class="tabs tabs-end">Close</div>',

它只是添加了第一个div，完全忽略了第二个div（以及br）。那是为什么？

完整代码：

CKEDITOR.plugins.add( 'tabs', {
    requires: 'widget',
    icons: 'tabs',

    init: function( editor ) {
        editor.widgets.add( 'tabs', {
            allowedContent: 'div(!tabs,tabs-end)',
            requiredContent: 'div(tabs,tabs-end)',
            template: '<div class="tabs">Open</div> <br /> <div class="tabs tabs-end">Close</div>',
            button: 'Create Tabs',
            upcast: function( element, data ) {
                return element.name == 'div' && (element.hasClass( 'tabs' ) || element.hasClass( 'tabs-end' ));
            }
        }
    );

        editor.ui.addButton( 'tabs', {
      label : 'Tabs erstellen',
      command : 'tabs'
    });
    }
} );

我也试过使用＆＃34;插入＆＃34;事件然后只用editor.execCommand()再次添加小部件，但事件根本不会触发，只有在我通过ui按钮插入小部件时才会触发，否则这将是一个无限循环我想

Answer 1

当您使用文档片段时，CKEditor窗口小部件必须是单个元素 - 元素集合（请参阅widget#element）。

修复很简单：将您的元素包装在<div>所以

<div class="tabs">Open</div> <br /> <div class="tabs tabs-end">Close</div>

变为

<div class="tabs">
    <div class="tabs-start">Open</div> <br /> <div class="tabs-end">Close</div>
</div>

并相应地更新您的upcast / downcast。

如何在CKEditor中同时插入一个小部件两次？

1 个答案: