TinyMCE 是一款流行的富文本编辑器，它可以帮助开发者快速地创建和编辑 HTML 内容。但是，有时候我们需要在 TinyMCE 编辑器的光标所在位置插入一些文本或者 HTML 元素。本篇文章将会介绍如何在 TinyMCE 编辑器中插入文本到光标所在位置。
获取 TinyMCE 编辑器实例
在开始之前，我们需要获取 TinyMCE 编辑器的实例对象。这可以通过以下代码来获取：
const editor = tinymce.get('editorId');其中 editorId 是你在 HTML 中定义的 TinyMCE 编辑器的 ID。
插入文本到光标所在位置
要想向 TinyMCE 编辑器中插入文本，我们首先需要获取当前光标所在位置的节点。这可以通过以下代码来实现：
const node = editor.selection.getNode();
然后，我们可以使用 DOM API 向该节点中添加文本内容。例如，以下代码将在光标所在位置插入一个字符串：
node.insertAdjacentText('afterend', 'Hello world!');如果你需要插入一些 HTML 元素，可以使用 insertAdjacentHTML 方法。例如，以下代码将在光标所在位置插入一个链接：
node.insertAdjacentHTML('afterend', '<a href="https://example.com">Example</a>');最后，别忘了在插入完文本后更新 TinyMCE 编辑器的内容：
editor.setContent(editor.getContent());
完整代码示例
以下是一个完整的代码示例，它演示如何向 TinyMCE 编辑器中插入文本到光标所在位置：
-- -------------------- ---- -------
--------- -----
------
------
------- ----------------------------------------------------------------------------
--------
--------------------------------------------- -- -- -
--------------
--------- -----------
---
----- ------ - -------------------------
----------------------------------------------------------------------- -- -- -
----- ---- - ---------------------------
----------------------------------- ------ ---------
---------------------------------------
---
---
---------
-------
------
--------- --------------------------
------- ------------------------------ -------------
-------
-------在上述示例中，我们创建了一个 TinyMCE 编辑器，并定义了一个按钮。点击该按钮后，将会向编辑器中插入一个字符串。
总结
本篇文章介绍了如何向 TinyMCE 编辑器中插入文本到光标所在位置。通过获取光标所在位置的节点并使用 DOM API 操作，我们可以轻松地实现这一功能。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29861