CKEditor5＆Angular2 - 获取符的确切位置上点击编辑器里面抢数据(CKEditor

在Angular2 +，我试图让我点击的插入符的确切位置CKEditor5 Balloon Editor实例。我会在页面上几个实例，通过每个动态表示@ViewChildren和QueryList （每个实例是一个独立的编辑器）。

在一个高的水平，我想，当用户点击一个气球编辑器中触发的方法，它将存储所有文字光标在一个变量之前，然后存储在另一个变量中的光标后的所有文本。

也就是说，如果用户键入Hello world this is a test并点击“世界”后，DIV中，它将存储的“Hello world”中的一个变量，“这是一个测试”，在另一个变量。

如何做到这一点任何想法？我想我需要创建的两个实例Position ，然后莫名其妙地哺养入Range ，但我对如何喂养不知道Position的正确路径。

如果任何人有CKEditor的5只是一个普通的老单实例的工作方式，我将不胜感激。谢谢！

完整的解决方案将是这样的：

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来得到一个范围内的所有物品和字符串化，你觉得有文本代理。

请注意，你TextProxy正常的，而不是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 ) );
}