Question

从CKEditor simplebox widget tutorial派生了我的项目所需的小部件，在spans中有三个div。这是我的plugin.js：

CKEDITOR.plugins.add( 'mybox', {
    requires: 'widget',
    icons: 'mybox',
    init: function(editor) {
        if ( editor.addContentsCss ) {
            editor.addContentsCss( this.path + 'styles/mybox.css' );
        }
        editor.widgets.add( 'mybox', {
            button: 'Add custom box',
            template: `<div class='mybox-container'>
    <span class='mybox-authors'>Name Surname, Name2 Surname2, Name3 Surname3</span>
    &ndash;
    <span class='mybox-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
    <span class='mybox-number'>this is the number of the document</span>
</div>`,
            upcast: function(element) {
                return element.name == 'div' && element.hasClass('mybox-container') ;
            },
            editables: {
                authors: {
                    selector: '.mybox-authors',
                    allowedContent: 'br strong em'
                },
                text: {
                    selector: '.mybox-text',
                    allowedContent: 'br strong em'
                },
                number: {
                    selector: '.mybox-number',
                    allowedContent: '*'
                }
            },
            allowedContent: 'div(!mybox-container); span(!mybox-authors); span(!mybox-text); span(!mybox-number)',
            requiredContent: 'div(mybox-container)'
        }) ;

    }
}) ;

为了完整起见，我还展示了我的styles/mybox.css：

.mybox-container {
    border: 1px solid gainsboro ;
}


.mybox-authors {
    text-transform: uppercase ;
}

.mybox-text {
}

.mybox-number {
    font-weight: bold ;
    float: right ;
}

结果如下：

使用mousedown-move进行选择会按预期工作：它甚至无法跨越每个跨度的边界，这正是我所期望的。另一方面，双击有一些怪癖：

在第一个和第二个跨度中，如果我双击并移动文本的中心词之一，则选择会逐词扩展，但在包含第一个或最后一个词之前会停止；
如果我单击第一个跨度的最后一个单词，则不会进行选择，并且光标将移动到单词的开头；
如果我单击第二个跨度的第一个单词，则会将其与第一个跨度的最后一个单词一起选择；
如果我在任何地方单击三次，将选择所有跨度的文本（好吧，也许这很正常，但是我希望只选择一个跨度的文本）。

我还指出，我可以在跨度中定期书写，但是如果粘贴一些文本，则会将其插入包含的div中，并且span会分成两部分。

最近几天，我与CKEditor一起开发了几个小时，我对这种潜力非常感兴趣。但我知道我是新手，而且可能缺少一些琐碎的东西……有什么建议吗？

双击CKEditor小部件的组件

0 个答案: