inhaltsverarbeitbare und nicht-schaltbare Elemente

Question

Ich kann leicht execcommand auf eine contenteditable Auswahl tun, wenn eine Schaltfläche verwenden. Jedoch mit jedem anderen Element schlägt fehl.

http://jsbin.com/atike/edit

Warum ist das so und wie kann ich das mit einem div-Element bewerkstelligen?

Gracias.

Answer 1

Sie können die Auswahl speichern, indem Sie die mousedown Ereignis für das Element, das anstelle einer Schaltfläche verwendet wird, und stellen Sie es wieder her, nachdem Sie das bearbeitbare Element in der click Veranstaltung.

Ich habe den Beispielcode geändert: http://jsbin.com/atike/40/edit . Hier ist der Code:

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            var ranges = [];
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
            return ranges;
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(savedSel) {
    if (savedSel) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            for (var i = 0, len = savedSel.length; i < len; ++i) {
                sel.addRange(savedSel[i]);
            }
        } else if (document.selection && savedSel.select) {
            savedSel.select();
        }
    }
}

$(function() {
  var savedSel;

  $('.bold').mousedown(function () {
    savedSel = saveSelection();
  });

  $('.bold').click(function () {
    $('#hello').focus();
    if (savedSel) {
      restoreSelection(savedSel);
    }
    document.execCommand("bold", false, null);    
  });
});

Answer 2

Die meisten, wenn nicht alle, WYSIWYG-Editoren verwenden eine iframe Element, um die Auswahl nicht zu verlieren. Ein anderer Ansatz, den ich allerdings noch nicht ausprobiert habe, wäre, jede Auswahl, die auf dieser Seite getroffen wird, nach dem mouseup Ereignisauslöser.

Werfen Sie einen Blick auf diese Seite über Midas , dem in Gecko eingebauten Rich-Text-Editor.

Answer 3

Wenn Sie auf einen Textknoten klicken, möchte der Browser diesen Text auswählen. Schaltflächen sind nicht Teil des Textflusses und lösen daher keine neue Auswahl aus.

Sie müssen lediglich verhindern, dass der Browser eine erneute Auswahl vornimmt. Wenn der click Ereignis, das Sie gerade beobachten, läuft, ist die Auswahl bereits erfolgt und es ist zu spät zu handeln. Die Aktion beginnt am mousedown für alle Browser außer MSIE, der ein spezielles Auswahlverfahren hat.

Das funktioniert bei mir in allen Browsern:

jQuery('.bold')
  .attr('unselectable','on') // prevents selection in MSIE
  .bind('mousedown',function (e) {
    document.execCommand("bold", false, null);
    e.preventDefault(); // prevents selection in all but MSIE
  });

Es gibt einige Komplikationen bei der Verwendung von MSIEs Auswahlereignissen (z.B. muss auch das Ziehen blockiert werden), daher ist es einfacher, die Auswählbarkeit des Elements, das Sie als Schaltfläche verwenden, mit dem speziellen Attribut unselectable (benötigt den Wert "on").

Sie können natürlich immer noch die execCommand Umgang mit click Ereignisse und führen Sie einfach den Code zur Verhinderung der Auswahl bei allen Elementen aus, die als "Schaltflächen" vorgesehen sind:

jQuery('.buttonlike')
  .attr('unselectable','on') // prevents selection in MSIE
  .bind('mousedown',function (e) {
    e.preventDefault(); // prevents selection in all but MSIE
  });

jQuery('#edit-bold').click(function(){
  document.execCommand("bold", false, null);
});

Answer 4

NicEdit verwendet eine Kombination von Methoden.

• Bei den meisten Symbolleistenelementen ist das Attribut "nicht auswählbar" gesetzt - dies gilt für den Internet Explorer.

• Bei denselben Elementen registriert es sich für das "Mousedown"-Ereignis und setzt die Standardaktion außer Kraft - dies verhindert sowohl die Textlösung als auch den Fokus. Dies gilt nur für andere Browser als IE.

• Einige Elemente der Symbolleiste müssen in der Lage sein, den Textfokus zu erhalten und eine Auswahl zu treffen, wie z. B. das Feld zum Einfügen eines Links oder Bildes. In diesen Fällen wird die Auswahl gespeichert, bevor der Editor den Fokus verliert, und dann wiederhergestellt, nachdem der Benutzer die Bearbeitung abgeschlossen hat und die Änderungen vorgenommen werden müssen.

  Wie man das implementiert, steht im Code von NicEdit. Suchen Sie nach den Funktionsnamen:

  • getSel
  • getRng
  • selRng
  • saveRng
  • restoreRng

  ...

  Dies verwendet getSelection() oder document.selection des Browsers, um die Auswahl zu erhalten, getRangeAt(), um sie in einen Bereich umzuwandeln, und addRange() oder select(), um diesen Bereich wieder als Auswahl zu verwenden.