Javascript 在选定内容周围插入加粗和斜体标记

我正在制作一个应用程序，使用标记来格式化文本。我需要添加键盘快捷键，以便那些不知道如何使用标记和更熟悉所见即所得编辑器的人能够使用它。如何操作？

此函数使用

selectionStart

和

selectionEnd

以及子字符串在所选文本前后插入文本

async function insertFormating(txtarea, text) {
    var selectStart = txtarea.selectionStart
    var selectEnd = txtarea.selectionEnd
    var scrollPos = txtarea.scrollTop;
    var caretPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0, caretPos);
    var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
    var middle = (txtarea.value).substring(caretPos, txtarea.selectionEnd);
    txtarea.value = front + text + middle + text + back;
    if (selectStart !== selectEnd) {
        txtarea.selectionStart = selectStart + text.length
        txtarea.selectionEnd = selectEnd + text.length
    } else {
        txtarea.selectionStart = selectStart + text.length
        txtarea.selectionEnd = txtarea.selectionStart
    }
    txtarea.focus();
    txtarea.scrollTop = scrollPos;
}

现在可以调用

insertFormating（inputBox，'**'）

插入粗体，或

插入格式化（inputBox，'.'）表示斜体

这只是@CcJokerPol给出的函数的扩展版本

其他功能：


这会添加
文本
，也会删除
它还允许添加默认文本
代码段显示如何使用
ctrl+b
，
ctrl+i
，
ctrl+u
调用函数
还可以添加多个标记，如
***+++带下划线的粗体文本+++***

示例：


指向
粗体的文本
=>指向
**粗体**

要删除的文本**
bold
***=>要删除的文本
bold
要删除的文本
**bold**
=>要删除的文本
bold

调用是相同的
insertFormating（inputBox，***，“bold”）


$（文档）.keydown（函数（e）{
如果（e.ctrlKey&$.inArray（e.keyCode[66,73,85,76]）>-1）{
var-keyCode=e.keyCode；
var-focused=document.activeElement；
var id=focused.id；
e、 预防默认值（）；
如果（键代码==66）{
插入格式化（聚焦，***，“，”粗体“）；
}否则如果（键代码==73）{
插入格式化（聚焦，“_uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu；
}否则如果（键代码==85）{
插入格式化（聚焦，“+”，“下划线”）；
}else if（keyCode==76）{
插入格式化（聚焦，“[”，“链接标题”，“](http://www.example.com)");
}
}
});
函数insertFormating（txtarea，text，defaultTxt=“”，text2=“”）{
var selectStart=txtarea.selectionStart
var selectEnd=txtarea.selectionEnd
var scrollPos=txtarea.scrollTop；
var caretPos=txtarea.selectionStart；
var mode=0；//使用所选文本添加标记
var front=（txtarea.value）.substring（0，caretPos）；
var back=（txtarea.value）.substring（selectEnd，txtarea.value.length）；
var middle=（txtarea.value）.substring（caretPos，selectEnd）；
如果（text2==“”）{
text2=文本；
}
var textLen=text.length；
var text2Len=text2.length；
如果（选择开始===选择结束）{
中间=默认文本；
mode=1；//使用默认文本添加标记
}否则{
if（front.substr（-textLen）==text&&back.substr（0，text2Len）==text2）{
front=front.substring（0，front.length-textLen）；
back=back.substring（text2Len，back.length）；
text=“”；
text2=“”；
mode=2；//删除带有选定文本的标记，例如*粗体**
}else if（middle.substr（0，textLen）==text&&middle.substr（-text2Len）==text2）{
middle=middle.substring（textLen，middle.length-text2Len）；
text=“”；
text2=“”；
mode=3；//删除带有选定文本的标记，例如*粗体**
}
}
txtarea.value=前面+文本+中间+文本2+后面；
如果（选择开始！==选择结束）{
如果（模式===0）{
txtarea.selectionStart=selectStart+textLen；
txtarea.selectionEnd=selectEnd+textLen；
}否则如果（模式===2）{
txtarea.selectionStart=selectStart-textLen；
txtarea.selectionEnd=selectEnd-textLen；
}否则如果（模式===3）{
txtarea.selectionStart=选择开始；
txtarea.selectionEnd=selectEnd-textLen-text2Len；
}
}否则{
txtarea.selectionStart=selectStart+textLen；
txtarea.selectionEnd=txtarea.selectionStart+middle.length；
}
txtarea.focus（）；
txtarea.scrollpop=scrollPos；
}

一只敏捷的棕色狐狸跳过了那只懒狗。
在这里测试。
很遗憾，您不能在
元素中输入特定的html元素。最接近的解决方法可能是使用
instead@Rawrplus它已经是一个文本区域：
编辑器