JavaScriptを使用して現在選択されているテキストをBBcodeでラップするにはどうすればよいですか？

Question

私は、テキストを書式設定するのに使いやすい方法を提供するためにBBcodeを実装するテキスト領域を持っています。問題は、ユーザーがボタンを押したときに強調表示されたテキストの周囲にこのBBcodeをラップしたいと思うことです。 JavaScriptでこれを行う方法はありますか？

Answer 1

私はJavaScriptの専門家ではないことをご理解ください。私は自分のウェブサイトを構築している間にこの問題に遭遇し、文字通り何百ものGoogle検索を通じて、これに関連する唯一のものは非常に複雑で、私が理解できなかった方法で書かれました。私はこれを苦労しているかもしれない他の人々を助けたいと思います。

私のコードを以下に示します。

    //First of all, lets make sure the HTML is completely loaded. 
    document.addEventListener("DOMContentLoaded", function(){ 

     //Here, we will go ahead and grab our textarea, and our button. 
     txtArea = document.getElementById('your text area name here'); 

     //We will name this button 'bold', for simplicity. 
     bold = document.getElementById('your button name here'); 

     //The next 3 lines of code will tell the browser to keep an eye on any 
     //changes that the user makes on the page. 
     txtArea.addEventListener("focus", function(){hasFocus();}); 
     txtArea.addEventListener("blur", function(){lostFocus();}); 

     //Notice the two parameters of this function. The first parameter is 
     //the textarea object, and the second parameter is the letter that 
     //you want to use for the BBcode. 
     bold.addEventListener("mousedown", function(){wrap(txtArea, 'b');}); 
    }); 

    //We need to make sure that the text area is in focus, so we need a 
    //variable to keep track of that. 
    var textAreaFocus = false; 

    //The functions "hasFocus" and "lostFocus" seem redundant, but I have 
    //not found any better alternatives for keeping track of this. 
    function hasFocus() { 
     textAreaFocus = true; 
    } 
    function lostFocus() { 
     textAreaFocus = false; 
    } 

    //Here is our wrap function. It's going to wrap the BBcode around our text. 
    function wrap(id, tag) { 
     //This if statement will make sure the right text area is in focus. 
     if(textAreaFocus) { 
     //Now, here we will grab all of the selected text and put it in selObj. 
     selObj = window.getSelection(); 
     //Here we are going to create our BBcode around the text, you will notice 
     //this makes your custom tag wrap around the selection. 
     modifiedText = '[' + tag + ']' + selObj + '[/' + tag + ']'; 
     //rawText will simply reference the entire textarea content. 
     rawText = id.value; 
     //This is where we split up the text area, so that we can reconstruct it 
     //with your BBcode in the middle! 
     firstPart = rawText.slice(0, id.selectionStart); 
     lastPart = rawText.slice(id.selectionEnd, rawText.length); 
     product = firstPart + modifiedText + lastPart; 

     //And lastly, we put the finished product back into the text area! 
     id.value = product; 
     } 
    } 

Answer 2

var command = "cmd_insertText"; 
var controller =   document.commandDispatcher.getControllerForCommand(command); 
    if (controller && controller.isCommandEnabled(command)) { 
     var params = Components.classes["@mozilla.org/embedcomp/command- params;1"]. 
     createInstance(Components.interfaces.nsICommandParams); 
     var win = document.commandDispatcher.focusedWindow; 
     var textbox = win.document.activeElement; 
     var selection = textbox.value. 
     substring(textbox.selectionStart, textbox.selectionEnd); 

//////////////////// Change this BB code tag here for tag you want for this  button ///////////////////  

      var text = "[b]" + selection + "[/b]"; 

//////////////////////////////////////////////////////////////////////////////// //////////////////////  
     params.setStringValue("state_data", text); 
     controller.QueryInterface(Components.interfaces.nsICommandController). 
     doCommandWithParams(command, params); 
    }