我想制作一个文本编辑器。它应该按照所有文本编辑器的工作方式工作（包括我现在正在使用的这个），因此用户可以选择文本，按下按钮或其他任何内容，然后执行某些功能。 我希望我的编辑器以下列方式工作： 1.用户选择 2.触发函数selected（），在所选文本周围形成范围。 3.当用户单击诸如“B”或“I”的按钮时，它们调用改变span元素的.style的函数。 现在我想出了如何从用户选择中获取字符串，仅此而已。
Payments答案 0 :(得分：1)
textareas不能包含跨度，因此如果您决定使用跨度，则需要使用类似的内容：
<p contenteditable="true" ...
您可能不希望每次用户进行选择时都会触发您的功能。相反，如果用户按下按钮（如粗体按钮），则运行该功能，然后使用以下内容选择所选文本（如果有）：
document.getSelection().toString()
现在添加＆lt; span＆gt; HTML元素的对象非常简单，但是这里的一大挑战是你不知道你的选择是否会跨越其他span对象（比如用户是否已经添加了一些格式）。请注意，stackoverflow在编辑区域中插入**等字符，然后执行一次传递以添加像＆lt; strong＆gt;这样的标记。这也可以在文本区域中进行，因此您不需要contenteditable =“true”。
可以分析您选择的内容，然后收集所涉及的所有元素，并根据需要重写它们。您必须获取选择中涉及的所有父对象，然后添加＆lt; span＆gt;每个父对象内的文本周围的元素。
为了简化这一点，您可以制定一个规则，即在您的可编辑区域中只允许使用一个级别的标记，然后始终为此重写，以便结果只有一个级别的范围：
<span class="bold">This whole sentence is italic and </span><span class="italic_bold">this half is also bold.</span> with no nesting of these span tags.
调查这些属性可能有助于处理嵌套：https://developer.mozilla.org/en-US/docs/Web/API/Selection
这些字符串命令也可能有所帮助： https://www.w3schools.com/jsref/jsref_obj_string.asp