J'ai une zone de texte qui implémente BBcode pour fournir un moyen convivial de formater leur texte. Le problème est, je voudrais envelopper ce BBcode autour de tout texte en surbrillance lorsque l'utilisateur appuie sur un bouton. Y a-t-il un moyen de le faire avec JavaScript?Comment intégrer le texte actuellement sélectionné avec BBcode en utilisant JavaScript?
0
A
Répondre
0
Pour commencer, s'il vous plaît comprendre que je ne suis pas un professionnel JavaScript. J'ai rencontré ce problème en construisant mon propre site Web, et à travers littéralement des centaines de recherches google, les seules choses que j'ai trouvées qui étaient liées à cela étaient très compliquées, et écrites d'une manière que je n'ai pas comprise. Je voudrais aider d'autres personnes qui pourraient aussi avoir du mal à comprendre cela.
Mon code est illustré ci-dessous:
//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;
}
}
0
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);
}