Prevent enter default keyboard event in TinyMCE

Question

We've been busy with upgrading TinyMCE from 3.x to 4.2.5 and can not prevent the default ENTER action from happening.

Our goal is to submit the form when CTRL + enter is pressed, and important is that the submit should happen before the newline is added to TinyMCE. The 3.x branch allowed us to add the event to the top of the queue:

// 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;
    }
});

Unfortunately we can not figure out how to add it to the top of the events again.

event.preventDefault() and event.stopPropagation() do not have the expected effect because the enter is already there. The weird thing is that it does work on other keys, the alphanumeric keys can be prevented. http://jsfiddle.net/zgdcg0cj/

The event can be added using the following snippet:

tinymce.get('tinymce_instance').on('keydown', function(event) {
    if (event.ctrlKey && event.keyCode == 13) {
        $("form").submit();
        return false;
    }
});

Problem: the newline is added to the TinyMCE content earlier as our event handler is called, so an unwanted enter is stored. How can I add the event to the top in the 4.x branch, or prevent the newline from happening?

Answer 1

event.preventDefault() works when you attach the keydown event via the setup on the init function.

tinymce.init({
  selector:'textarea',
  setup: function (ed) {
    ed.on('keydown',function(e) {
        if(e.ctrlKey && e.keyCode == 13){
            alert("CTRL + ENTER PRESSED");
            e.preventDefault();
        }
    });
  }
});

This does block the carriage return from happening. JsFiddle

Edit:

Above is one way of doing it, I have found another way of achieving the result which doesn't require the init at all. Instead we create a new Editor instance and bind to our textarea given it has an id.

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();

Answer 2

var init {
    ...,
    setup: function (ed) {
        ed.on('keydown', function (e) {
            if (e.ctrlKey && 13 === e.keyCode) {
                e.preventDefault();
                $("form").submit();
            }
        });
};

tinymce.init(init);

Works for tinyMCE 4.x