Ajout de balises à la sélection

Question

J'utilise ce Javascript pour effectuer les modifications suivantes dans mon texte sélectionné:

function formatText(el,tag){ 
var selectedText = document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz 
if (selectedText == "") 
{return false} 
var newText='"#28'+tag+'"'+selectedText+'"#28'+tag+'"'; 
if(document.selection){ //IE 
document.selection.createRange().text=newText; 
} 
else{ //Moz 
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length); 
} 
} 

Cependant, je veux que les nouvelles balises à seulement être visible dans un autre textarea pas celui où je fais réellement le choix. Dans ce cas, j'ai 2 zones de texte, l'une est appelée "message_text" l'autre est appelée "message" ... Je saisis et sélectionne le texte dans "message_text" mais toutes les modifications apportées à la sélection ne doivent refléter que dans le "message" zone de texte.

À l'heure actuelle j'ai essayé:

<button type="button" value="D" onclick="formatText(message,'D')" class="blue">D</button> 

Mais cela ne fonctionne que si j'ai choisi anytnin dans la zone de texte « message ».

Merci

Answer 1

Vous devez étendre le code javascript:

function formatText(el_from, el_to, tag) { 
    var selectedText = document.selection ? document.selection.createRange().text : el_from.value.substring(el_from.selectionStart, el_from.selectionEnd);// IE:Moz 

    if (selectedText == "") { 
     return false; 
    } 

    var start_index = el_to.value.indexOf(selectedText); 
    var sel_t_len = selectedText.length; 
    var copy_selText = el_to.substring(start_index, sel_t_len); 

    var newText='"#28'+tag+'"'+copy_selText+'"#28'+tag+'"'; 

    el_to.value = el_to.value.substring(0, start_index) + newText + el_to.value.substring(sel_t_len, el_to.value.length); 
} 

Ensuite, vous pouvez l'appeler comme ceci:

<button type="button" value="D" onclick="formatText(document.getElementById('message_text'), document.getElementById('message'),'D')" class="blue">D</button> 

PS: Je ne suis pas sûr document.getElementById - havre de paix N'a pas utilisé pendant des années depuis l'utilisation de jQuery ... Vous devriez convertir en jQuery, aussi ... Vous ne devez pas résoudre JS pour IE ou FF ou Chrome, etc - jQuery gère cela par lui-même ...

EDIT: OK, je l'ai fait un peu de personnalisation et il devrait s'adapter à vos besoins ...