javascript - 使用 js 或 jquery 单击工具栏按钮后包裹 html 标签

Question

我想做一些类似于这个网站和 WordPress 所做的事情。当用户突出显示屏幕上的文本，然后单击工具栏上的按钮时，它将在文本周围包裹一个 html 标签。在 jquery 中，我可能会使用 .wrap 类，但是我如何检测用户是否突出显示了某些内容。

例如，当用户写入Hello World时然后单击粗体按钮，它会显示 <b>Hello World</b>

Answer 1

这主要需要 (1) 访问 input 的 selectionStart 和 selectionEnd 属性/textarea元素和 (2) 用相同的文本替换该范围内的 value 属性的子字符串，但包含在所需的开始和结束标记中。另外，我认为重新选择替换的文本是有意义的，这需要多次调用 select() 和 setSelectionRange()。另外，如果没有选择(意味着开始等于结束)，那么什么也不做可能是个好主意。

window.selWrapBold = function(id) { selWrap(id,'<b>','</b>'); };
window.selWrapItalic = function(id) { selWrap(id,'<i>','</i>'); };
window.selWrap = function(id,startTag,endTag) {
    let elem = document.getElementById(id);
    let start = elem.selectionStart;
    let end = elem.selectionEnd;
    let sel = elem.value.substring(start,end);
    if (sel==='') return;
    let replace = startTag+sel+endTag;
    elem.value =  elem.value.substring(0,start)+replace+elem.value.substring(end);
    elem.select();
    elem.setSelectionRange(start,start+replace.length);
} // end selWrap()

<input type="button" value="bold" onclick="selWrapBold('ta1');"/>
<input type="button" value="italic" onclick="selWrapItalic('ta1');"/>
<br/>
<textarea id="ta1"></textarea>