如何在 tinyMCE 中设置插入符号位置？答案

【问题标题】：How set caret position in tinyMCE?如何在 tinyMCE 中设置插入符号位置？
【发布时间】：2020-08-17 12:27:01
【问题描述】：

我在 Vue 组件中创建了基于 TinyMCE 的自定义编辑器。在@input 插入符号位置设置为 0（向左位置）后

所以我得到插入符号的位置

window.tinyMCE.activeEditor.selection.getRng().startOffset

但我不能设置它

window.tinyMCE.activeEditor.selection.setRng(4)
window.tinyMCE.activeEditor.setContent('<p>test test</p>')

也不行

var ed = window.tinyMCE.activeEditor.selection
ed.setCursorLocation(ed.getContent(), 3)

请帮忙

【问题讨论】：

标签： vue.js tinymce vue-component tinymce-4

【解决方案1】：

在我的编辑器中我使用了这个：

let rng = tinymce.DOM.createRng(); // the range object
var newNode = editor.dom.select('#_mce_temp_rob')[0];
rng.setStart(newNode.firstChild, 0); // 0 is the offset, it will be at the beginning of the line.
rng.setEnd(newNode.firstChild, 0);
editor.selection.setRng(rng);

现在我猜你的情况会有所不同，因为我以前做过这件事，记不太清了，但希望这对你有所帮助。更多内容：https://exceptionshub.com/whats-the-best-way-to-set-cursorcaret-position.html

【讨论】：

【解决方案2】：

TinyMCE selection.setRng() 不接受数字，它接受 Range 对象。

关于这个 Range 对象如何工作的一些很好的文档，可以在 javascript.info 上找到

这是一个关于如何将光标设置到 TinyMCE 编辑器开头的示例：

//make it easier for yourself, we only get so many keystrokes in our lives
const editor = window.tinyMCE.activeEditor;
const selection = editor.selection;

//get the HTML element container
const container = editor.contentAreaContainer;

//get the first element of that container
const firstElementChild = container.firstElementChild;

//create a Range object
const range = new Range();

//set the start and end (start = end, as we want the selection to be collapsed; more info in the documentation above)
range.setStart(firstElementChild, 0);
range.setEnd(firstElementChild, 0);

//Set the editor's selection to our created range
selection.setRng(range, true); //true means it's selected forward; false for backwards selection

【讨论】：