Ist es möglich, zu deaktivieren oder zu kontrollieren "Befehle" in contentEditable Elemente?

Als ich verstehen es, ein element mit contentEditable="true" ist eine Art WYSIWYG-HTML-editor. Es generiert entsprechende HTML-tags entsprechenden Befehl erteilt.

Zum Beispiel, wenn man text auswählt und drückt dann Strg+Bwird der ausgewählte text wird zwischen <b></b> tags.

Brauche ich keine style-tags im resultierenden text. Wie kommt man zu unterdrücken, zu vereinnahmen oder Steuern das Verhalten dieser Befehle?

Andere Dinge, die ich tun könnte:

  • Herausfiltern, die tags nach der Tat; aber dann wird der Nutzer denken, Sie haben Dinge, die Fett, wenn Sie wirklich noch nicht
  • Re-style-tags, so dass Sie nicht anzeigen, und filtern Sie dann aus; aber es gibt eine chance, ich könnte vergessen, oder dass irgendwie das stylesheet deaktiviert ist
  • Nicht verwenden contentEditable bei allen, aber textarea statt. Aber unter anderem contentEditable macht es wirklich einfach, markieren Sie den Absatz, der bearbeitet wird. Das ist viel schwieriger zu tun, mit einem textarea.

InformationsquelleAutor der Frage Bambax | 2011-08-26

  1. 9

    Wohl die beste landing page Ressource für contentEditable ist hier:

    http://blog.whatwg.org/the-road-to-html-5-contenteditable

    Im Grunde, was auf die es hinausläuft, ist dies: Sie können nicht konfigurieren Sie den key-codes selbst sind Sie immer vorhanden, und Sie sind unterschiedlich, je nach Lokalisierung der Browser.

    Können Sie jedoch abfangen der Tastatur Befehle, die mit JavaScript -, ein Beispiel kann hier angesehen werden:

    http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

    Ich habe das Spiel mit contentEditable in letzter Zeit mit gemischten Erfolg. Einige Dinge, die einfach dazu neigen, besser zu arbeiten als andere, und haben gemischte Ergebnisse über browser. Wenn alles, was Sie wirklich wollen, ist ein editor für contentEditable block-Elemente, versuchen, einen Blick auf aloha editor.

    InformationsquelleAutor der Antwort stslavik

  2. 15

    Ich weiß, es ist zu spät, aber wenn es helfen kann, einige ein sollte Es Wert einen Versuch geben.

    Hier ist, wie ich behandelt es in javascript zu inaktivieren, die Strg+Befehl(Strg+B,Strg+Taste), die ich benutzt habe:

    HTML:

    <div id="xyz" onKeyDown="return disable(this,event);" contentEditable="true">
This is my Rich Text Editor
</div>

    JavaScript:

    function disable(x,e){
    if(e.ctrlKey){ //.ctrlKey tells that ctrl key was pressed.
    return false;
    }
return true;
}

    DEMO

    Aber das wird auch Auswirkungen auf die standardmäßige Weise zu tun, kopieren+einfügen mit Strg+C und Strg+V. Wenn Sie warten möchten, alle Standard-Funktionen außer für spezielle Fälle, wie z.B.: Strg+B(Fett), Strg+(Kursiv) und Strg+u(Unterstrichen), dann ist es besser, zu verwenden switch case statements auf keyCode Werte wie:

    function disable(x,e){
   var ret=true;
    if(e.ctrlKey){
        switch(e.keyCode){
            case 66: //ctrl+B or ctrl+b
            case 98: ret=false;
                     break;
            case 73: //ctrl+I or ctrl+i
            case 105: ret=false;
                      break;
            case 85: //ctrl+U or ctrl+u
            case 117: ret=false;
                      break;
        }
    }
    return ret;
} //This will work fine for ctrl+c and ctrl+v.

    DEMO

    Nun, dies funktioniert für die Standard-Funktionalität zu tun, copy+paste aber einschränken werden, andere, wie Fett, Kursiv und Unterstrichen.

    BEARBEITEN

    Als Betty_St Vorgeschlagenum diese Arbeit Zu machen auf dem Mac müssen Sie Sie zu ersetzen:

    if(e.ctrlKey){

    mit

    if(e.ctrlKey || e.metaKey){ //Coz You'll be using CMD key on mac

    Dann Könnte Das unter Mac OS arbeiten.

    Hinweis: ich habe nicht mit befasst Mac zuvor, So dass ich weiß nicht, ob das ist der richtige Weg, es zu tun oder nicht.

    Hoffe es hilft :). Cheers.

    InformationsquelleAutor der Antwort Vedant Terkar

Schreibe einen Kommentar