CKEditor 选择为单个元素答案

【问题标题】：CKEditor select as a single elementCKEditor 选择为单个元素
【发布时间】：2017-03-06 17:56:26
【问题描述】：

我希望将 CKEditor 可编辑 div 中的元素视为输入，以便进行鼠标选择。该元素是span，但我想让它使用户无法选择其部分内容以及它之外的内容。例如，如果它具有以下 DOM：

Foo <span>gobbledigook</span> bar

用户应该能够在跨度内选择，在“Foo”或“bar”内，或从“Foo”开始并扩展到“bar”，但不能从“Foo”选择到跨度内容。出于这些目的，<span> 应被视为 <input />（请参阅 this jsbin 了解其工作原理）。

span其实是使用CKEditor的widget插件，看起来满足另一个方向（即可以在span内选择，但是从span内拖到span外并不会将选择扩展到span外跨度）。只是外部 -> 内部不起作用。

【问题讨论】：

标签： html ckeditor selection

【解决方案1】：

我有一个解决方法：

editor.widgets.on("checkSelection", function(event) {
        var range = editor.getSelection().getRanges()[0];

        var start = range.startContainer;
        var end = range.endContainer;

        // widgetRepository.getByElement() chokes if the argument is a text node
        if (start.type === CKEditor.NODE_TEXT) {
            start = start.getParent();
        }

        if (end.type === CKEditor.NODE_TEXT) {
            end = end.getParent();
        }

        var endWidget = editor.widgets.getByElement(end);

        if (
            // We only worry about selecting from outside of a widget to the inside of one
            endWidget
            // Selection ends inside a widget and the start is not in a widget *or* is within a different widget
            && editor.widgets.getByElement(start) !== endWidget
        ) {
            range.setEndBefore(endWidget.wrapper);
            range.select();
        }
    });

基本上，如果我检测到一个选择在它没有开始的小部件内结束，我会将结尾移到小部件包装器之前。

【讨论】：