在前端开发中，有时需要让用户在一个可编辑的区域（如富文本编辑器或评论框）中插入文本。本文将介绍如何在contenteditable的div中插入文本。
contenteditable属性
在HTML中，可以使用contenteditable属性将一个元素变为可编辑状态。例如，下面的代码将一个div变成可编辑的：
<div contenteditable="true"></div>
当用户点击该div时，就会弹出键盘，允许用户输入文本。
插入文本
要在contenteditable的div中插入文本，可以使用document.execCommand()方法。该方法可以执行一些基本的命令，例如插入文本、粗体、斜体等。
下面是一个示例代码，演示如何在点击按钮时，在div中插入文本：
-- -------------------- ---- -------
---- ---------- ---------------------------- ------------
------- ----------------------------- -------------
--------
-------- ------------ -
--- --- - ---------------------------------
--- ---- - ----- ---- -- --------
-- -------------------- -
-- --- --
------------
--- --- - ---------------------------------
-------- - -----
- ---- -- ------------------- -- ------------------ --- -- -
-- --- ------ --------
--- -------- - -------------------
--- ------ - -----------------
--------- - ---------------------- --------- - ---- - --------------------------- ------------------
- ---- -
-- ---- ---- -- --------- ---- -- --- ---
------------- -- -----
-
-
---------在这个示例中，我们首先定义了一个可编辑的div，并添加了一个按钮。当用户点击该按钮时，它将调用insertText()函数。
该函数首先获取到可编辑的div元素，并定义要插入的文本。然后，它检查浏览器是否支持document.selection属性，如果支持，则使用该属性来插入文本；否则，它会检查是否存在selectionStart和selectionEnd属性，如果存在，则使用这些属性来插入文本，否则它会将文本附加到可编辑区域的末尾。
总结
本文介绍了如何在contenteditable的div中插入文本。我们使用了document.execCommand()方法来执行这个任务，并演示了一个示例代码，可以帮助你更好地理解如何实现这个功能。希望这篇文章能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26783