Javascript 如何使用Vanilla JS构建自己的所见即所得编辑器（RTE）

我不想使用Jquery。我想用香草JS解决这个问题<请帮帮我

描述：如何在JavaScript中单击按钮时使所选文本变为粗体/斜体/下划线

这是我的HTML

文本编辑器
文本编辑器

您不能设置文本区域内容的样式，而是使用Div

对于选择和粗体，您可以试试这个

$('#bold').click(function() {
    var selected_text = window.getSelection ? 
        "" + window.getSelection() : document.selection.createRange().text;
     console.log(selected_text);
    $("div:contains('"+selected_text+"')").html(function(_, html) {
      return html.split(selected_text).join("<b>cow</b>");
   });

});

$（'#粗体'）。单击（函数（）{
var selected\u text=window.getSelection？
“”+window.getSelection（）：document.selection.createRange（）.text；
console.log（所选文本）；
$（“div:contains（“+”所选“）”）.html（函数（“+”，html）{
返回html.split（所选文本）.join（“cow”）；
});
});

---

注意：我还没有测试过这个

我认为这是一个可能的解决方案

• 我编写了一个函数来不复制代码
• 您可以修改它以适应您的问题，我也可以将该函数应用于css样式的斜体、粗体和下划线。对齐按钮不起作用，您必须实现逻辑，但它与此功能非常相似
• 再次单击按钮时，可以尝试应用其他功能删除样式

如前所述，textarea不允许修改部分文本的样式，因此我使用

span

来避免问题。我尝试了

div

，但我得到了一些不同的行为

功能添加按钮（btnId、cssProperty、cssPropertieValy）{
let buttonTarget=document.getElementById（btnId）；
buttonTarget.addEventListener（“单击”，函数（）{
让selection=window.getSelection（）.getRangeAt（0）；
让selectedText=selection.extractContents（）；
设span=document.createElement（“span”）；
试一试{
span.style[cssProperty]=cssPropertieValy；
}捕获（e）{
控制台。跟踪（e）；
}    
span.appendChild（selectedText）；
selection.insertNode（span）；
});
}
添加按钮（“粗体”、“字体权重”、“粗体”）；
添加编辑按钮（“斜体”、“字体样式”、“斜体”）；
添加按钮（“下划线”、“文本装饰”、“下划线”）

文本编辑器
.输入容器{
边框：1px纯黑；
宽度：223px；
高度：103px；
溢出：滚动；
}
文本编辑器
我的建议：


const formatText=（标记）=>{
var start=textarea.selectionStart，
结束=text区域。选择结束，
len=textarea.value.length，
text=textarea.value.substring（开始、结束）；
如果（text）textarea.value=textarea.value.substring（0，开始）+`${text}`+textarea.value.substring（结束，len）；
}
表单{
显示器：flex；
弯曲方向：立柱；
}
文本区{
宽度：100%；
高度：100px；
边缘底部：20px；
}
钮扣{
边缘底部：20px；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。埃尼安·维尼那提斯·贾斯托·安特（Aenean venenatis justo ante）在洛博提斯·内克（lobortis nec）酒后食用调味品。莫比·阿利奎姆·图皮斯。阿利夸姆元素乌纳直径。Morbi ullamcorper Door ipsum，quis porttitor tortor bibendum nec。不必担心，因为这是一个很好的例子。这是一个很好的例子。在hac habitasse Plateum，一句名言。莫比·波苏尔·普尔维纳尔·泰勒斯，在一家餐厅品尝猫咪调味品。梅塞纳斯·欧莫莱斯蒂·洛雷姆。明渠是一条明渠，它的直径和宽度都是相同的。这是一个很好的例子。权势显赫的权杖。这是一个很好的例子。
斜体
大胆的
下划线的
您不能直接将样式添加到纯旧的
文本区域。有关更多信息，请查看Hey Abubakar，很高兴看到您的第一个贡献。为了得到更多的答案，最好不要只是寻求帮助。始终提供迄今为止找到的解决方案。或者你对解决方案的想法。仅仅寻求帮助就好像你没有亲自尝试过一样。如果你不确定/不够熟练（现在），请始终使用类似的框架/库问问自己。@BjörnvonTRITUM我尝试了很多次来解决这个问题，但不幸的是，我没有成功。我不想使用其他库/框架（quillijs/CKEditor5）来解决这个问题，因为我想用javascript解决这个问题。：）如果a找到了解决这个问题的方法，我将在这里发布。：）他们还说他们不想使用jQueryBrother，我想要ValinaJs中的解决方案。好的，我会编辑它。（我的城市实行宵禁）明天我们也会这么做。非常感谢你@Fábio Ribeiro de Carvalho。没问题@AbubakarShafique。删除粗体文本等将是一个有趣的活动。如果您需要支持，请询问。祝您有个美好的一天。