CKEditor5和Angular2 - 在内部编辑器中获取插入符号的准确位置以获取数据

Question

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

在较高的层面上，我试图在用户点击气球编辑器时触发一个方法，它会将光标前的所有文本存储在变量中，然后将光标后的所有文本存储在另一个变量中。

即如果用户在“世界”之后键入Hello world this is a test并在div中单击，它将在一个变量中存储“Hello world”，在另一个变量中存储“this is a test”。

有关如何实现这一点的任何想法？我假设我需要创建两个Position实例，然后以某种方式将其输入Range，但我不知道如何将Position提供给正确的路径。

如果有人只有CKEditor 5的常规旧单个实例的工作方法，我将不胜感激。谢谢！

Answer 1

完整的解决方案如下所示：

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来获取一个范围内的所有项目，并将你在那里找到的文本代理字符串化。

请注意，您获取TextProxys而不是正常的Text节点，因为树步行者可能需要返回文本节点的一部分（如果范围在该文本节点的中间结束）。

---

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

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