Question

我正在为tinyMCE制作一个单词预测插件，需要提取一些文本，然后从预测单词列表中插入文本。插入应该没问题，因为我知道光标在哪里并且可以使用mceInsertContent命令。但是要获得预测的文本......

我需要提取一个文本的子集，该文本的一部分以光标位置前面的字母结尾，并从文本的开头开始。如果需要，我可以自己去除HTML标签，但我更愿意让tinyMCE尽可能地做。

我想这样做：

使用mceInsertContent
创建从文本开头到书签的范围。
获取范围的内容。
删除书签。

现在，既然我不熟悉那对我来说已经证明有点挑战的tinyMCE，那么怎么会这样做呢？

代码需要跨浏览器工作。

Answer 1

您可以尝试使用此代码片段（ed是tinymce编辑器对象）

一个。使用mceInsertContent

在当前光标位置插入书签

ed.execCommand('mceInsertContent', false,'<span class="marker">\ufeff</span>');

B中。创建从文本开头到书签的范围。

var rng = ed.selection.getRng(1);
var rng2 = rng.cloneRange();

// set start of range to begin of forst paragraph
rng2.setStartBefore($(ed.getBody()).find('p:first').get(0));

rng2.setEndBefore($(ed.getBody()).find('span.marker').get(0));
ed.selection.setRng(rng2);

℃。获取范围的内容。

// get content of selection (range)
var content = ed.selection.getContent({format: 'text'});

d。删除书签。

$(ed.getBody()).find('span.marker').remove();

更新：如果您担心选择更改，可以重置初始范围

ed.selection.setRng(rng);

Answer 2

这是我对此的解决方案（按Ctrl时，该字会显示在控制台中）：

function isLetter(chr){
    if(chr.match(/[A-Za-z\u00C0-\u00D6\u00D8-\u00f6\u00f8-\u00ff]/i)){
        return true;
    }
    else{
        return false;
    }
}



var editor = tinymce.activeEditor;
var $edBody = $(editor.getBody());
editor.on('KeyUp', function(e){
    if(e.code == "ControlLeft"){
        var sel = editor.selection.getSel();
        var caretPos = sel.anchorOffset;
        var txtData = sel.anchorNode.data;
        var i = caretPos;
        var word = "";

        while(i > 0){
            if(isLetter(txtData.charAt(i))){
                word += txtData.charAt(i);
                i -= 1;
            }
            else{
                break;
            }
        }

        word = word.split("").reverse().join("");

        i = caretPos + 1;
        while(i < txtData.length){
            if(isLetter(txtData.charAt(i))){
                word += txtData.charAt(i);
                i += 1;
            }
            else{
                break;
            }
        }
        console.log(word);
    }
});

也许有一种更清洁或更优雅的方法可以解决此问题，如果可以，请发表评论，让我们将此解决方案变得更好。

tinyMCE - 获取内容到光标位置

2 个答案: