使用js或jquery單擊工具欄按鈕后換行html標記

Question

我想做類似於這個網站和wordpress的做法。 當用戶在屏幕上突出顯示文本時，然后單擊工具欄上的按鈕，它將在文本周圍包裹html標記。 在jquery中我可能會使用.wrap類，但是我如何檢測用戶是否突出顯示了某些內容。

例如，當用戶編寫Hello World時，單擊粗體按鈕，它將顯示<b>Hello World</b>

Answer 1

獲取包裝文本的html元素的文本，然后將嵌入在<b>標記中的文本添加為​​html。

有關教程，請參閱jQuery DOM Manipulation 。

Answer 2

這主要要求（1）訪問input / textarea元素的selectionStart和selectionEnd屬性，以及（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> 

Answer 3

我用這個問題來獲取所選文本。 這個問題是為了獲得帶有選定文本的元素。 我將它們組合在一個功能中。

function updateHighlightedText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString(); 
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    var node = $(window.getSelection().anchorNode.parentNode); //Get the selected node
    node.html(node.text().replace(text, "<b>"+text+"</b>")); //Update the node
}