problème JS / JQuery execCommand

Question

Je ne parviens pas à (complet) avec execCommand afin de vous aider beaucoup apprécié - Je ne doute pas que je suis aboiements le mauvais arbre, mais de toute façon .....

J'ai un div comme ceci

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

C'est « modifiable » à savoir document.designMode = 'on'; - il s'est cet « état » sur le focus. Le flou il change à document.designMode = 'off';

J'ai un "bouton de test"

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

Que lorsque « cliqué » rend le « texte en surbrillance » gras - donc execCommand

Jusqu'à présent, j'ai quelque chose comme ceci:

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'alerte (clic gras) ne me donne la surbrillance / texte sélectionné, mais je ne peux pas travailler sur la façon de « tourner » gras. Je suppose que je dois accéder au innerHTML ou quelque chose?

Aide très appréciée - merci à l'avance. OH et je ne veux pas utiliser soit un i-cadre ou une zone de texte

Answer 1

Je recommande fortement d'utiliser Rangy pour traiter la sélection de texte.

Une gamme cross-browser JavaScript et bibliothèque de sélection. Il fournit une API simple basée sur des normes pour l'exécution des tâches communes Voir DOM et de sélection dans tous les principaux navigateurs, les implémentations abstraire de très différentes de cette fonctionnalité entre Internet Explorer et les navigateurs conformes aux normes DOM.

Vous pouvez utiliser la classe CSS Module Applicateur pour le texte en gras (< a href = "http://rangy.googlecode.com/svn/trunk/demos/cssclassapplier.html" rel = "noreferrer"> démonstration en direct ).