JS / JQuery Execcommand Problem

Question

Ich habe Probleme (vollständig) mit Execcommand, also helfen Sie sehr geschätzt - ich habe keinen Zweifel, ich belle den falschen Baum, aber ..... wie auch immer

Ich habe ein solches Div

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

Das ist "bearbeitbar" dh dh document.designMode = 'on'; - Es geht diesen "Zustand" auf den Fokus. Bei Unschärfe ändert sich es zu document.designMode = 'off';

Ich habe einen "Testknopf"

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

Wenn "geklickt" den "hervorgehobenen Text" fett macht - daher execcommand

Bisher habe ich so etwas:

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

Der Alarm (fettem Klick) gibt mir den hervorgehobenen/ausgewählten Text, aber ich kann nicht herausfinden, wie man ihn "dreht". Ich denke, ich muss auf das Innerhtml zugreifen oder so?

Helfen Sie sehr geschätzt - danke im Voraus. Oh, und ich möchte weder einen i-Frame noch einen Textbereich verwenden

Answer 1

Ich empfehle dringend die Verwendung Rangy Für den Umgang mit Textauswahl.

Ein Cross-Browser-JavaScript-Bereich und Auswahlbibliothek. Es bietet eine einfache API auf Standards, die in allen wichtigen Browsern gemeinsame DOM-Reichweite und Auswahlaufgaben ausführen und die völlig unterschiedlichen Implementierungen dieser Funktionalität zwischen Internet Explorer und DOM-konformen Browsern abtrahiert.

Du kannst den ... benutzen CSS -Klasse Applier -Modul den Text fett (Live -Demo).