文本区域中的文本选择和替换无法正常工作

Question

我正在尝试使用JavaScript制作用于格式化(如粗体、斜体等(textarea标记的选定文本(md和/或html(的按钮。

有时它起作用，有时它不起作用而不出错。

代码链接https://jsfiddle.net/3gn75zLb

JS代码

function formatText(style) {
var textarea_editor = document.getElementById('md-code');
//get Selection
var index_start = textarea_editor.selectionStart;
var index_end = textarea_editor.selectionEnd;
var text = textarea_editor.value;
var selectedText = text.substring(index_start, index_end);
var formatedText = selectedText;

//format
switch(style.toLowerCase()) {
case 'b':
var formatedText = "**"+selectedText+"**";
break;
case 'i':
var formatedText = "*"+selectedText+"*";
break;
case 'u':
var formatedText = "<u>"+selectedText+"</u>";
break;
case 'sup':
var formatedText = "<sup>"+selectedText+"</sup>";
break;
case 'sub':
var formatedText = "<sub>"+selectedText+"</sub>";
break;
case 'img':
var formatedText = "![]("+selectedText+")";
break;
default:
var formatedText = selectedText;
break;
}
textarea_editor.innerHTML = text.substring(0, index_start)+formatedText+text.substring(index_end, text.length);
}

存在与调用formatText()功能的按钮相关的点击事件

像

formatText('b'(，用**将所选文本括起来，使其在标记中变为粗体。

问题

• 代码有问题吗
• 使用jQuery或其他任何东西，有没有更好/更简单的方法可以做到这一点

Answer 1

问题是，您正在设置textarea的innerHTML，您需要设置文本区域的value属性。

带有文本区域的innerHTML只能用于设置文本区域的初始内容，但一旦您在textarea中键入内容，innerHTML将不会执行任何操作，然后您需要使用value属性。

此外，当前如果没有选择文本，即使代码添加了样式，如果selectedText为空，您也可以简单地从函数返回。

请参阅以下代码：

function formatText(style) {
var textarea_editor = document.getElementById('md-code');

//get Selection
var index_start = textarea_editor.selectionStart;
var index_end = textarea_editor.selectionEnd;
var text = textarea_editor.value;
var selectedText = text.substring(index_start, index_end);
var formatedText = selectedText;

if (!selectedText) return;

//format
switch (style.toLowerCase()) {
case 'b':
var formatedText = "**" + selectedText + "**";
break;
case 'i':
var formatedText = "*" + selectedText + "*";
break;
case 'u':
var formatedText = "<u>" + selectedText + "</u>";
break;
case 'sup':
var formatedText = "<sup>" + selectedText + "</sup>";
break;
case 'sub':
var formatedText = "<sub>" + selectedText + "</sub>";
break;
case 'img':
var formatedText = "![](" + selectedText + ")";
break;
default:
var formatedText = selectedText;
break;
}
textarea_editor.value = text.substring(0, index_start) + formatedText + text.substring(index_end, text.length);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div class="jumbotron bg-white px-2 py-0 m-0">
<div class="my-2">
<button type="button" class="btn btn-outline-secondary" onclick="formatText('b')"><b>B</b></button>
<button type="button" class="btn btn-outline-secondary" onclick="formatText('i')"><i>I</i></button>
<button type="button" class="btn btn-outline-secondary" onclick="formatText('u')"><u>U</u></button>
<button type="button" class="btn btn-outline-secondary" onclick="formatText('sup')">T<sup>abc</sup></button>
<button type="button" class="btn btn-outline-secondary" onclick="formatText('sub')">T<sub>abc</sub></button>
<button type="button" class="btn btn-outline-secondary" onclick="formatText('img')">Img</button>
</div>
<textarea id="md-code" class="form-control" rows="20" name="note_content" placeholder="Markdown and/or HTML text"></textarea>
</div>