wordpress 如果我知道文本在html内容中的位置,如何在tinymce编辑器中选择文本?

dgiusagp  于 2023-03-01  发布在  WordPress
关注(0)|答案(2)|浏览(209)

这个问题很简单,但我一直在努力寻找任何简单的解决方案来解决它。我正在使用WordPress中的TinyMCE。
假设我有一个单词在html内容中的位置,我可以从编辑器中获得,如下所示:

tinymce.activeeditor.getContent();

因此,我需要选择此单词并移动到“选择”(滚动到它)。例如,如果内容包含以下内容:

...Bla bla bla some <strong>text</strong> and more text and banana and <img src=.../> more text bla blaa...

你可以看到单词“banana”,例如,我想选择它。我知道它的位置,假设它的start_pos = 30,end_pos = 35。它不一定是一个单词,它可以是一个短语(几个单词),但我知道它的位置,所以没有区别。
我需要一种方法在可视化编辑器(或富编辑器)中选择它,就像我对文本区域所做的那样(如果文本模式是活动的),如下所示:

// cl_editor_lastfocus is textarea
    cl_editor_lastfocus.setSelectionRange(start, end);

    let charsPerRow = cl_editor_lastfocus.cols;
    let selectionRow = (start - (start % charsPerRow)) / charsPerRow;
    let lineHeight = cl_editor_lastfocus.clientHeight / cl_editor_lastfocus.rows;

    // scroll !!
    cl_editor_lastfocus.scrollTop = lineHeight * selectionRow;
    cl_editor_lastfocus.focus();

有可能吗?据我所知,这里的大多数答案都建议选择包含此文本的文本节点,然后设置选择范围。但我不知道我必须选择哪个文本节点,因为我想要的单词可能在文档中的任何地方。另外,我可以用span将单词括起来,然后选择此span节点,但我不希望以后保留此span。当选择将被改变或不再需要时。

x8goxv8g

x8goxv8g1#

我想,在可视化模式下进行选择的最简单方法是将字符串 Package 到span中,然后使用editor.dom.select选择该span。

// We get editor's content, where 'editor' is a tinymce editor instance
    var content = editor.getContent();

    function selectText(start, end) {
    // We have start and end position of the text which we want to select
    // Then we wrap our word or frase between positions into span with unique id
    let content_with_span = content.substring(0, start) + '<span id="'+start+'_'+end+'">' + content.substring(start,end) + '</span>' + content.substring(end, content.length);
    // I keep the original 'content' variable outside, because in my case user can switch between various frases and when we switch to the next selection, we don't want to keep previos span in text

    // Return content with span into editor
    editor.setContent(content);

    // Create selection
    let selection = tinyMCE.activeEditor.dom.select('span[id="'+ start + '_' +  end + '"]')[0];

    // If selection exists, select node and move to it
       if (selection) {
          tinyMCE.activeEditor.selection.select(selection);
          selection.scrollIntoView({behavior: "instant", block: "center", inline: "nearest"});
       }
    }

对我很有效,我希望它能帮助到其他人。

bfnvny8b

bfnvny8b2#

下面是我基于上面的@tonyAndr解决方案使用的一组选择脚本。我用它来构建一个定制的拼写检查器。

<script>

    var content = '';

    function selectionSet(start, end) {
    
        // span vars with unique id based on the section of text
        var spanId = 'id="' + start + '_' + end + '"'
        var spanClose = '</span>'
        
        // grab a copy of the current content 
        content = tinyMCE.activeEditor.getContent();

        // wrap the section of text into the span 
        let content_with_span = content.substring(0, start) + '<span ' + spanId + '>' + content.substring(start,end) + spanClose + content.substring(end, content.length);

        // return the new content into editor
        tinyMCE.activeEditor.setContent(content_with_span);

        // select the span
        let selection = tinyMCE.activeEditor.dom.select('span[' + spanId + ']')[0];

        // if selection exists, select node and move to it
           if (selection) {
              tinyMCE.activeEditor.selection.select(selection);
              selection.scrollIntoView({behavior: "instant", block: "center", inline: "nearest"});
           };
    };
           
    function selectionClear() {
    
        // restore the previous selection (in my use case the user is not able to do other edits)
        //in the case of spellchecking - user has ignored the selected error
        if (content.length > 0) {
            tinyMCE.activeEditor.setContent(content);
            content = '';
            };

    };
    
    function selectionReplace(start, end, replace_with) {
    
        //in the case of spellchecking - allow for the selection to be replaced with a new word
        if (content.length > 0) {
            let content_with_replace = content.substring(0, start) + replace_with + content.substring(end, content.length) ;
            tinyMCE.activeEditor.setContent(content_with_replace);
            content = '';
            };

    };
</script>

相关问题