Question

我想让CKEditor可编辑div中的元素被视为输入以便鼠标选择。该元素是span，但我想这样做，以便用户无法选择其内容的一部分以及其外部的内容。例如，如果它有以下DOM：

Foo <span>gobbledigook</span> bar

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

跨度实际上是使用CKEditor的widget插件，它似乎满足另一个方向（也就是说，您可以在跨度内选择，但是从跨度内拖动到跨度之外不会扩展选择在跨度之外）。这只是外面的 - ＆gt;里面没有用。

Answer 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();
        }
    });

基本上，如果我检测到一个选项在一个未启动的窗口小部件中结束，我会在窗口小部件包装器之前向右移动。

CKEditor选择为单个元素

1 个答案: