Frage In contenteditable wie fügen Sie einen Absatz nach blockquote ein Drücken Sie die Eingabetaste?


Ich habe folgendes Problem. Sobald ich ein hinzufügen blockquote im contenteditableDurch Drücken der Eingabetaste bewegt es sich zu einer neuen Zeile und fügt eine weitere hinzu blockquote Element. Es geht ewig weiter, und ich kann der Formatierung nicht entkommen. Die gewünschte Funktionalität wäre die der ungeordneten Liste. Wenn Sie die Eingabetaste drücken, wird ein neues leeres hinzugefügt <li> Element, aber wenn Sie erneut die Eingabetaste drücken, entgeht es der Formatierung, entfernt die zuvor erstellten <li> und fügt a <p>.

Schau dir die Demo an: http://jsfiddle.net/wa9pM/

Ein Hack, den ich gefunden habe, war ein leeres zu erstellen <p> unter dem blockquote, bevor Sie ein erstellen blockquote. Aber gibt es eine Möglichkeit, dieses Formatierungsverhalten mit JavaScript zu brechen? Keine Ahnung, wie ich das überprüfen würde: Wenn der Cursor steht, ist es das Ende der Zeile und wenn es eine Blockquote ist und auf die Eingabetaste drücken, füge kein neues hinzu blockquote.

Ich verwende diesen Code, um ein blockquote in JS:

document.execCommand('formatBlock', false, 'blockquote');

11
2018-02-02 23:41


Ursprung


Antworten:


Beim Erstellen eines Rich-Text-Editors für eine iOS-Anwendung hatte ich das gleiche Problem. Jedes Mal wenn ich ein eingefügt habe <blockquote> Tag in meinem Textfeld und gedrückt EingebenEs war unmöglich, das Blockzitat loszuwerden.

Nach einiger Recherche habe ich eine funktionierende Lösung gefunden.

Interne HTML-Tags finden:

function whichTag(tagName){

    var sel, containerNode;
    var tagFound = false;

    tagName = tagName.toUpperCase();

    if (window.getSelection) {

        sel = window.getSelection();

        if (sel.rangeCount > 0) {
            containerNode = sel.getRangeAt(0).commonAncestorContainer;
        }

     }else if( (sel = document.selection) && sel.type != "Control" ) {

         containerNode = sel.createRange().parentElement();

     }

     while (containerNode) {

         if (containerNode.nodeType == 1 && containerNode.tagName == tagName) {

             tagFound = true;
             containerNode = null;

         }else{

             containerNode = containerNode.parentNode;

         }

     }

     return tagFound;
 }

Auf Vorkommen des Block-Quote-Tags prüfen:

function checkBlockquote(){

    var input = document.getElementById('text_field_id');

    input.onkeydown = function() {

        var key = event.keyCode || event.charCode;

        if( key == 13){

            if (whichTag("blockquote")){

                document.execCommand('InsertParagraph');
                document.execCommand('Outdent');

            }

        }

    };

}

Auslösen der Key-Down-Ereignisse:

<body onLoad="checkBlockquote();">
<!-- stuff... -->
</body>

Ich glaube, dass der obige Code leicht an Ihre Bedürfnisse angepasst werden kann. Wenn Sie weitere Hilfe benötigen, zögern Sie nicht zu fragen.


6
2018-04-20 02:12



So etwas hat die Arbeit für mich gemacht (zumindest auf Chrome und Safari).

Demo bei http://jsfiddle.net/XLPrw/

$("[contenteditable]").on("keypress", function(e) {
    var range = window.getSelection().getRangeAt();
    var element = range.commonAncestorContainer;
    if(element.nodeName == "BLOCKQUOTE") {
        element.parentElement.removeChild(element);   
    }
});

Habe keinen ausführlichen Test gemacht, aber es sieht so aus range.commonAncestorElement Gibt den aktuellen Textnode zurück, falls die Blockquote Text enthält, oder das blockquote-Element selbst, falls es keinen Textknoten enthält (in Chrome, a <br> hinzugefügt und Caret ist nach ihm positioniert). Sie können in diesem Fall die neu erstellte Blockquote entfernen. Wie auch immer, nach dem Löschen des Elementes sieht das Caret aus, als ob es irgendwo auf dem contenteditable positioniert wird, obwohl das Tippen bestätigt, dass es direkt nach dem ursprünglichen blackquote ist. Hoffe, dies weist Sie auf eine schlüssigere Lösung hin.


1
2018-04-28 13:21



Super späte Antwort, aber das war eine viel einfachere Lösung für mich. Hoffentlich hilft es jedem, der sucht. Die Browserkompatibilität kann variieren.

YOUR_EDITABLE_ELEMENT.addEventListener('keyup', e => {
  if (e.which || e.keyCode === 13) {
    if (document.queryCommandValue('formatBlock') === 'blockquote') {
      exec('formatBlock', '<P>')
    }
  }
})

0
2018-03-11 21:38