Wie verpacke ich meinen aktuell ausgewählten Text mit BBcode mit JavaScript?

Question

Ich habe einen Textbereich, der BBcode implementiert, um eine benutzerfreundliche Möglichkeit zu bieten, ihren Text zu formatieren. Das Problem ist, ich möchte diesen BBcode um jeden hervorgehobenen Text wickeln, wenn der Benutzer eine Taste drückt. Gibt es eine Möglichkeit, dies mit JavaScript zu tun?

Answer 1

Um zu beginnen, bitte verstehen Sie, dass ich kein JavaScript Professional bin. Ich stieß auf dieses Problem beim Erstellen meiner eigenen Website, und durch buchstäblich Hunderte von Google-Suchen, die einzigen Dinge, die ich gefunden habe, die damit verwandt waren, waren sehr kompliziert und auf eine Weise geschrieben, die ich nicht verstand. Ich würde gerne anderen Menschen helfen, die es vielleicht auch schwer haben, dies zu begreifen.

Mein Code ist unten dargestellt:

    //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); 
    }