如何使用户选择范围（js）

我想创建一个文本编辑器。它应该像所有文本编辑器一样工作（包括我现在使用的这个），所以用户可以选择文本，按下按钮或其他任何东西，然后执行一些功能。我希望我的编辑器按以下方式工作： 1.用户选择 2.触发功能selected（），使所选文本周围有一个范围。 3.当用户点击诸如“B”或“I”之类的按钮时，它们会调用改变span元素的.style的函数。现在我想出了如何从用户选择中获取字符串，无非就是如此。如何使用户选择范围（js）

<body> 
     <textarea onselect="selected()">Some text here, more text here.</textarea> 
    </body> 
    <script> 
     function selected() { 
var preselection = window.getSelection(); 
    selection = preselection.toString(); 
    console.log(selection); 
} 
    </script>

来源

2017-07-06 SHC MostWanted

什么跨度是你想创建？一个跨度来预览你输入的内容？ – Araymer

跨度是否在文本框内？ – Amy

你有没有想过分享一个简单的图像来说明你期望的结果？所以我们可以帮助你！ –

文字区域不能包含跨度，所以你需要使用这样的事情，如果你决定使用跨度：

<p contenteditable="true" ...

你可能不想解雇你的功能，每次一用户进行选择。相反，只要运行功能，如果用户按下一个按钮（如粗体按钮），然后拿起选定的文本，如果有的话，使用类似：

document.getSelection().toString()

现在加入<跨度>对象的HTML元素非常容易，但这里最大的挑战是你不知道你的选择是否会跨越其他跨度对象（如用户已经添加了一些格式）。请注意，stackoverflow在编辑区域插入像**这样的字符，然后通过添加标签，如<强>。这在文本区也是可行的，所以你不需要contenteditable =“true”。

可以分析您选择的内容，然后收集所有涉及的元素，并根据需要重写它们。您必须获取所选的所有父对象，然后在每个父对象内的文本周围添加<范围>元素。

为了简化这个，你可能会作出这样的标签只有一个级别被允许在你的可编辑区域中的规则，然后一直为重新写这样的结果只会有跨度的一层：

<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

来源

2017-07-06 20:10:53 TheCodePig

谢谢，答案是非常详细和关于点。对于像我这样的初学者来说，这似乎太过分了，所以我可能会在一两个月内回到这个挑战中，这时我多了解一点。 –

如何使用户选择范围（js）

回答

相关问题