SCEditor: Submit form with Shortcut Ctrl+Enter - How to get instance's parent?

290 Views Asked by At

I have multiple forms with textareas on my site. Each textarea gets the sceditor plugin assigned. Now I am trying to submit a form by providing a shortcut.

First I had a keyup method assigned to each editor instance:

$('textarea[name="test01"]').sceditor('instance').keyUp(function(e) {
    if (e.ctrlKey && e.keyCode == 13) {
        console.log(this); // case 1
    }
    // ...

And later on I also found the built-in method:

$('textarea[name="test01"]').sceditor('instance').addShortcut('ctrl+enter', submitform);
function submitform() {
    console.log(this); // case 2
}

My goal is to get the sibling before the sceditor DIV, which is the textarea. From there I can find the submit button. Or I could just go downwards the DOM tree and find the form the textarea / sceditor is nested in.

However, the console.log(this); gives for case 1: the HTML of the node, i. e. in the Webdeveloper Console I can see the HTML of the sceditor. For case 2 I receive the sceditor object.

Problem is I cannot access the parent. Also in the sceditor docs I see no way to do this.

Thanks for your help.

2

There are 2 best solutions below

2
On BEST ANSWER

When adding the shortcut handler you know which textarea the handler is being added to so you could do:

$('textarea[name="test01"]').sceditor('instance').addShortcut('ctrl+enter', function () {
    submitform($('textarea[name="test01"]').get(0).form);
});

function submitform(form) {
    console.log(form.id);
}

Working example: http://jsfiddle.net/5jc6f589/

0
On

2023 answer

This can be done via a simple plugin combined with some factory overriding.

The plugin
sceditor.plugins.shortcut = function ()
{
    let editor;

    this.init = function ()
    {
        editor = this;

        this.addShortcut('ctrl+enter', function () {
            editor.opts.original.form.submit();
        });
    };
};
The factory override
const createFn = sceditor.create;
sceditor.create = (textarea, options) => {
    options.original = textarea;

    createFn(textarea, options);
};