problema JS / JQuery execCommand

Question

Ho problemi (completo) con execCommand in modo da aiuto molto apprezzato - non ho alcun dubbio che sto abbaiare contro l'albero sbagliato, ma in ogni caso .....

Ho un div come questo

<div class="editable" id="editor" contenteditable="true"> 
    <2>Some text in here</h2> blah blah blah ...
</div>

Questo è "modificabile" cioè document.designMode = 'on'; - è ottenere è questo "stato" a fuoco. Su sfocatura si trasforma in document.designMode = 'off';

Ho un "pulsante di test"

<input type="button" id="bold" value="Bold"> 

Che quando "cliccato" rende il "testo evidenziato" bold - da qui execCommand

Finora ho qualcosa di simile:

function getSelected() {
if(window.getSelection) { return window.getSelection(); }
else if(document.getSelection) { return document.getSelection(); }
else {
var selection = document.selection && document.selection.createRange();
if(selection.text) { return selection.text; }
return false;
}
return false;
}


$('#bold').click(function(){
var selection = getSelected();
alert(selection);
});

L'allerta (in grassetto click) non mi danno il testo evidenziato / selezionato ma non riesco a capire come "trasformarlo" in grassetto. Credo che ho bisogno di accedere al innerHTML o qualcosa del genere?

Guida molto apprezzato - grazie in anticipo. OH e io non voglio utilizzare un I-frame o una textarea

Answer 1

Vi consiglio vivamente di utilizzare Rangy per trattare con la selezione del testo.

Un cross-browser JavaScript gamma e la biblioteca di selezione. Esso fornisce una semplice API basata su standard per l'esecuzione di attività comuni DOM Range e di selezione in tutti i principali browser, astraendo i selvaggiamente diverse implementazioni di questa funzionalità tra Internet Explorer e browser DOM-compatibili.

È possibile utilizzare la CSS modulo di classe Applier per il testo in grassetto (< a href = "http://rangy.googlecode.com/svn/trunk/demos/cssclassapplier.html" rel = "noreferrer"> dal vivo demo ).