这个问题很简单，但我很难找到任何简单的解决方案。我正在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...
你可以看到"香蕉"这个词，例如，我想选择它。我知道它的位置，比方说它的start_pos=30，end_pos=35。它不一定是一个词，它可以是一个短语(几个词(，但我知道它的位置，所以没有区别。
我需要一种在Visual Editor(或Rich Editor(中选择它的方法，就像我在文本区域所做的那样(如果文本模式处于活动状态(：
// 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中，并使用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"});
}
}
它对我有效，我希望它能帮助其他人。
下面是一组基于@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>