JS / JQuery ExecCommand Problema

Question

Tengo problemas (completos) con ExecCommand, así que ayudas mucho a apreciar, no tengo dudas de que estoy ladrando el árbol equivocado pero ... de todos modos

Tengo un div como este

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

Que es "editable" es decir document.designMode = 'on'; - Obtiene este "estado" sobre el enfoque. En desenfoque, cambia a document.designMode = 'off';

Tengo un "botón de prueba"

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

Que cuando "hecho clic" hace el "texto resaltado" en negrita, por lo tanto, execCommand

Hasta ahora tengo algo como esto:

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

La alerta (Bold Click) me da el texto resaltado/seleccionado, pero no puedo resolver cómo "girarlo" en negrita. ¿Supongo que necesito acceder al InnerHTML o algo así?

Ayuda muy apreciada, gracias de antemano. Ah, y no quiero usar un marco I o un textarea

Answer 1

Recomiendo encarecidamente usar Alto y delgado para tratar con la selección de texto.

Un rango de javascript de navegador y biblioteca de selección. Proporciona una API basada en estándares simples para realizar tareas comunes de rango DOM y selección en todos los principales navegadores, abstrae las implementaciones muy diferentes de esta funcionalidad entre Internet Explorer y los navegadores que cumplen con DOM.

Puedes usar el Módulo de aplicaciones de clase CSS para negar el texto (demo en vivo).