CKEditor5和Angular2-在编辑器内单击以获取插入符的确切位置以获取数据 [英] CKEditor5 & Angular2 - Getting exact position of caret on click inside editor to grab data

问题描述

在Angular2 +中，当我在 CKEditor5气球编辑器实例中单击时，我试图获取插入符号的确切位置。我将在页面上有几个实例，每个实例通过 @ViewChildren 和 QueryList 动态表示（每个实例是一个单独的编辑器）。

In Angular2+, I'm trying to get the exact position of the caret when I click inside a CKEditor5 Balloon Editor instance. I will have several instances on the page, each dynamically represented through a @ViewChildren and a QueryList (each instance is a separate editor).

总的来说，我试图在用户在Balloon Editor中单击时触发一个方法，它将所有光标之前的文本存储在变量中，然后将光标之后的所有文本存储在另一个变量中。

On a high level, I'm trying to trigger a method when a user clicks inside a Balloon Editor, and it will store all the text before the cursor in a variable, and then store all the text after a cursor in another variable.

即如果用户键入 Hello world，这是一个测试，并在 world之后在div中单击，它将在一个变量中存储 Hello world，而这是一个测试在另一个变量中。

i.e. if a user types Hello world this is a test and clicks inside the div after the "world", it will store "Hello world" in one variable and "this is a test" in another variable.

关于如何实现此目标的任何想法？我假设我需要创建两个 Position 的实例，然后以某种方式将其馈入 Range ，但是我不知道有关如何提供 Position 正确路径的信息。

Any idea on how to accomplish this? I assume I need to create two instances of Position and then somehow feed that into a Range, but I have no idea on how to feed the Position the correct path.

如果有人只有正常的旧单曲有效， CKEditor 5的实例，我将不胜感激。谢谢！

If anyone has a working method for just a regular old single instance of CKEditor 5, I would appreciate it. Thank you!

推荐答案

完整的解决方案如下：

const pos = editor.document.selection.getFirstPosition();

// If you want to get the text up to the root's boundary:
// const posStart = Position.createAt( pos.root );
// const posEnd = Position.createAt( pos.root, 'end' );

// If you want to get the text up to the current element's boundary:
const posStart = Position.createAt( pos.parent );
const posEnd = Position.createAt( pos.parent, 'end' );

const rangeBefore = new Range( posStart, pos );
const rangeAfter = new Range( pos, posEnd );

let textBefore = '';
let textAfter = '';

// Range is iterable and uses TreeWalker to return all items in the range.
// value is of type TreeWalkerValue.
for ( const value of rangeBefore ) {
    if ( value.item.is( 'textProxy' ) ) {
        textBefore += value.item.data;
    }
}
for ( const value of rangeAfter ) {
    if ( value.item.is( 'textProxy' ) ) {
        textAfter += value.item.data;
    }
}

console.log( textBefore );
console.log( textAfter );

您在此处使用 TreeWalker 可以获取范围内的所有项目，并对在此找到的文本代理进行字符串化。

You use here the TreeWalker to get all items in a range and stringify text proxies which you find there.

请注意，您获得 TextProxy s而不是普通的 Text 节点，因为树浏览器可能需要返回文本节点的一部分（如果范围以

Please note that you get TextProxys instead of normal Text nodes because the tree walker may need to return a part of a text node (if the range ends in the middle of that text node).

编辑：将内容字符串化为数据格式（因此-包括HTML标记，而不仅仅是文本），您需要使用一些不同的方法：

To stringify the content to the data format, (so – including HTML markup, not just text), you need to use a bit different methods:

function doStuff( editor ) {
    const pos = editor.document.selection.getFirstPosition();

    const posStart = Position.createAt( pos.root );
    const posEnd = Position.createAt( pos.root, 'end' );

    const rangeBefore = new Range( posStart, pos );
    const rangeAfter = new Range( pos, posEnd );

    const fragBefore = editor.data.getSelectedContent( new Selection( [ rangeBefore ] ) );
    const fragAfter = editor.data.getSelectedContent( new Selection( [ rangeAfter ] ) );

    console.log( editor.data.stringify( fragBefore ) );
    console.log( editor.data.stringify( fragAfter ) );
}

这篇关于CKEditor5和Angular2-在编辑器内单击以获取插入符的确切位置以获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！