Wir haben TinyMCE von 3.x auf 4.2.5 aktualisiert und können die Standardaktion ENTER nicht verhindern.
Unser Ziel ist es, das Formular zu senden, wenn CTRL + enter gedrückt wird. Wichtig ist, dass das Senden erfolgt, bevor die neue Zeile zu TinyMCE hinzugefügt wird. Mit dem Zweig 3.x konnten wir das Ereignis oben in der Warteschlange hinzufügen:
// Important: inject new eventHandler via addToTop to prevent other events
tinymce.get('tinymce_instance').onKeyDown.addToTop(function(editor, event) {
if (event.ctrlKey && event.keyCode == 13) {
$("form").submit();
return false;
}
});
Leider können wir nicht herausfinden, wie wir es wieder an die Spitze der Ereignisse setzen können.
event.preventDefault() und event.stopPropagation() haben nicht den erwarteten Effekt, da die Eingabe bereits vorhanden ist. Das Seltsame ist, dass es bei anderen Schlüsseln funktioniert, die alphanumerischen Schlüssel können verhindert werden. http://jsfiddle.net/zgdcg0cj/
Das Ereignis kann mithilfe des folgenden Snippets hinzugefügt werden:
tinymce.get('tinymce_instance').on('keydown', function(event) {
if (event.ctrlKey && event.keyCode == 13) {
$("form").submit();
return false;
}
});
Problem: Die neue Zeile wird dem TinyMCE-Inhalt früher hinzugefügt, als unser Ereignishandler aufgerufen wird, sodass eine unerwünschte Eingabe gespeichert wird. Wie kann ich das Ereignis oben im Zweig 4.x hinzufügen oder verhindern, dass die neue Zeile auftritt?
3 Antworten
event.preventDefault() funktioniert, wenn Sie das Keydown-Ereignis über setup in der Funktion init anhängen.
tinymce.init({
selector:'textarea',
setup: function (ed) {
ed.on('keydown',function(e) {
if(e.ctrlKey && e.keyCode == 13){
alert("CTRL + ENTER PRESSED");
e.preventDefault();
}
});
}
});
Dies blockiert den Wagenrücklauf. JsFiddle
Bearbeiten:
Oben ist eine Möglichkeit, dies zu tun. Ich habe eine andere Möglichkeit gefunden, um das Ergebnis zu erzielen, für das init überhaupt nicht erforderlich ist. Stattdessen erstellen wir eine neue Editor-Instanz und binden sie an unser Textfeld, sofern es ein id enthält.
HTML
<form>
<!--Select by ID this time -->
<textarea id='editor_instance_1'>A different way</textarea>
</form>
JS
var ed = new tinymce.Editor('editor_instance_1', {
settings: "blah blah"
}, tinymce.EditorManager);
//attach keydown event to the editor
ed.on('keydown', function(e){
if(e.ctrlKey && e.keyCode == 13){
alert("CTRL + ENTER");
e.preventDefault();
}
});
//render the editor on screen
ed.render();
Vielleicht bin ich zu spät, aber diese Antwort ist für diejenigen, die das Init-Setup für Tinymce nicht ändern können (oder wollen). Ich habe folgende Methode gefunden:
var frame = document.getElementById('id_of_editor_iframe');
var iframeDocument = fr.contentWindow.document;
iframeDocument.addEventListener('keydown', function(e) {
if (
[38, 40, 13].indexOf(e.keyCode) > -1 //Enter and up/down arrows or whatever you want
) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
// your code here
return false;
}
}, true);
Es hat mir geholfen, neue Zeilen im Editor zu verhindern
var init {
...,
setup: function (ed) {
ed.on('keydown', function (e) {
if (e.ctrlKey && 13 === e.keyCode) {
e.preventDefault();
$("form").submit();
}
});
};
tinymce.init(init);
Funktioniert für tinyMCE 4.x.