Tiny MCE: Wie man Menschen einzurücken

Question

Ich versuche herauszufinden, wie Sie Menschen in Tiny MCE-Editor einrücken können. Gerade jetzt, wenn jemand tab drückt, bewegen sie sich einfach in das nächste Feld. Gibt es einen Codeabschnitt, der es ihnen ermöglicht, tab tatsächlich zu treffen und eine Registerkarte für einen neuen Absatz erstellen zu lassen?

Answer 1

Sie können dieses Ereignis und stopPropagation/return false für den Fall, dass der Benutzer die Registerkarte drücken.

// Adds an observer to the onKeyUp event using tinyMCE.init 
tinyMCE.init({ 
    ... 
    setup : function(ed) { 
     ed.onKeyDown.add(function(ed, evt) { 
      console.debug('Key up event: ' + evt.keyCode); 
      if (evt.keyCode == 9){ // tab pressed 
      ed.execCommand('mceInsertRawHTML', false, '\x09'); // inserts tab 
      evt.preventDefault(); 
      evt.stopPropagation(); 
      return false; 
      } 
     }); 
    } 
}); 

Falls der Benutzer eine Registerkarte am Anfang oder Ende eines Absatzes einfügt wird es vom Browser gelöscht werden (eine Abhilfe für dies ist ein Sonderzeichen mit einer vordefinierten Länge einzufügen, die kein Reiter ist) .

Answer 2

Die Lösung von Thariama hat nicht ganz funktioniert. Ich stimme Jon Hulkas Lösung zu. Dies scheint auf Firefox (Mac + PC), Chrome (Mac + PC) und Internet Exploder gut zu funktionieren. Es ist nicht perfekt, aber ich finde es sehr brauchbar und akzeptabel. Dank Jon

So op Jon Lösung zu wickeln:

tinyMCE.init({ 
    ... 
    setup : function(ed) { 
     ed.onKeyDown.add(function(ed, evt) { 
      if (evt.keyCode == 9){ 
      ed.execCommand('mceInsertContent', false, '  '); 
      evt.preventDefault(); 
      } 
     }); 
    } 
}); 

Answer 3

Für neuere Versionen von Tiny MCE Editor die folgende Lösung für mich gearbeitet:

setup: function(ed) { 
    ed.on('keydown', function(event) { 
     if (event.keyCode == 9) { // tab pressed 
      if (event.shiftKey) { 
      ed.execCommand('Outdent'); 
      } 
      else { 
      ed.execCommand('Indent'); 
      } 

      event.preventDefault(); 
      return false; 
     } 
    }); 
} 

Answer 4

Die Antworten hier tat gegeben nicht ganz entsprechen meinen Anforderungen, wie ich Text in der Mitte einer Zeile einrücken muss. Ich listete die Namen von Bürofilialen auf und wollte, dass ihre Telefonnummern zusammengehörten. Da jeder Büroname eine andere Länge hat, probierte ich eine Kombination aus @ Macs Antwort und Leerzeichen, aber ich konnte es nicht genau genug bekommen, also fügte ich eine kleine Leerzeichenoption mit Umschalttaste und Leertaste hinzu . Der einzige Nachteil ist, dass die Standard-Entities für tinymce nicht enthalten Also musste ich die Standard-Entity-Liste zu meinen Einstellungen hinzufügen und "8202, hairsp" am Ende hinzufügen.

tinyMCE.init({ 
    ... 
    setup : function(ed) { 
     ed.on('keydown', function(event) { 
     if (event.keyCode == 9) { // tab pressed 
      ed.execCommand('mceInsertContent', false, '  '); // inserts tab 
      event.preventDefault(); 
      return false; 
     } 
     if (event.keyCode == 32) { 
      if (event.shiftKey) { 
       ed.execCommand('mceInsertContent', false, ' '); // inserts small space 
       event.preventDefault(); 
       return false; 
      } 
     } 
     }); 
    } 
}); 

Answer 5

Es kann über nonbreaking Plugin in tinymce

tinymce.init({ 
    selector: "textarea", // change this value according to your HTML 
    plugins: "nonbreaking", 
    mewnubar: "insert", 
    toolbar: "nonbreaking", 
    nonbreaking_force_tab: true 
}); 

Details zu https://www.tinymce.com/docs/plugins/nonbreaking/

Answer 6

Sie einfach hinzugefügt Registerkarte Raum kann folgenden Code gefunden werden kann getan werden,

ed.on('keydown',function(evt){ 
      if (evt.keyCode==9) { 
       ed.execCommand('mceInsertContent', false, '<span class="mce-nbsp">&emsp;&emsp;&emsp;&emsp;</span>'); 
       tinymce.dom.Event.cancel(evt); 
       return; 
      } 
    });