jsまたはjqueryを使用してツールバーボタンをクリックした後にhtmlタグをラップします

Question

私はこのウェブサイトとwordpressの機能に似た何かをしたいと思います。ユーザーが画面上のテキストを強調表示した後、ツールバーのボタンをクリックすると、テキストの周りにhtmlタグがラップされます。 jqueryではおそらく.wrapクラスを使用しますが、ユーザーが何かを強調表示した場合はどうすれば検出できますか？ユーザーが太字ボタンをクリック、それはその後、htmlとして<b>タグに埋め込まれたテキストを追加し、<b>Hello World</b>

Answer 1

これは主に、（1）素子input/textareaのselectionStartとselectionEndプロパティにアクセスし、（2）同じテキストにその範囲にわたってvalueプロパティのサブストリングを置換する必要はなく、所望の開始タグと終了タグで包ん。また、置き換えられたテキストを再選択することが理にかなっていると思います。select()とsetSelectionRange()への2回の呼び出しが必要です。また、選択がない場合（startがendと等しいことを意味する）、何もしないことをお勧めします。

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 2

がテキストをラップしているhtml要素のテキストを取得すると言うだろう、その後Hello Worldを書き込み、例えば

、 。

チュートリアルについては、jQuery DOM Manipulationを参照してください。

Answer 3

私が選択したテキストを取得するためにthis質問を使用。そしてthis質問に 選択したテキストの要素を取得します。私はそれらを単一の機能で組み合わせました。

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 
}