Disabling tinyMCE ctrl+s shortcut to enable this shortcut for ajax content save

Question

I am using tinyMCE in a page. I capture Ctrl+s to save the content using ajax, when the focus is out of tinyMCE, everything works fine, but when the focus is in the tinyMCE it doesn't work. I need a piece of code to insert in this block of code (and not in the settings or plugins) to make content save working even if the focus is inside tinyMCE.

<script type="text/javascript">
$(document).ready(function() {
    dssModify = new Sol.Dss.Modify();
    dssModify.config = 
        {
        urlActionContentSave: "<?php echo \Sol\Dss\Dss::me () -> urlActionContentSaveGet () ; ?>",
        buttonContentSaveId: "<?php echo \Sol\Dss\Dss::me () -> modifyButtonContentSaveIdGet () ; ?>",
        buttonContentSavingTitle: "<?php echo \Sol\Dss\Dss::me () -> modifyButtonContentSavingTitleGet () ; ?>",
        buttonContentSaveTitle: "<?php echo \Sol\Dss\Dss::me () -> modifyButtonContentSaveTitleGet () ; ?>",
        textareaContentId: "<?php echo \Sol\Dss\Dss::me () -> modifyTextareaContentIdGet () ; ?>",
        formId: "<?php echo \Sol\Dss\Dss::me () -> modifyFormIdGet () ; ?>",
        idRoutes: "<?php echo $route[ 'id' ] ; ?>"
    };
    whenClicked = function()
    {
        $("#"+dssModify.config.textareaContentId).val(tinyMCE.activeEditor.getContent());
        dssModify.contentSave();
    }
    $("#<?php echo Sol\Dss\Dss::me () -> modifyButtonContentSaveIdGet () ; ?>").click( whenClicked );//Click Function
    $(window).keypress(function(event) {
        if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) 
            return true;
        whenClicked();
        event.preventDefault();
        return false;
    });

}//Ready function
);
</script>

Answer 1

This is a tricky one. You will have to create a function like this in the main document.

function receiveShortCutEvent(eventObject){
    //console.log('receiveShortCutEvent', eventObject);
    $(document).trigger(eventObject);
    $(document).trigger({type: 'keydown', ctrlKey: eventObject.ctrlKey, altKey: eventObject.altKey, which: eventObject.keyCode, originalEvent:eventObject });
    return false; 
}

On the tinymce side you will need to call receiveShortCutEvent if ctrl+h gets typed. You may use the setup configuration paramter for this.

        ed.onKeyDown.add(function onkeydown(ed, evt) {
            // Shortcut:  ctrl+h 
            if (evt.keyCode == 72 && !evt.altKey && !evt.shiftKey && evt.ctrlKey && !evt.metaKey) {
                setTimeout(function(){
                    var e = { type : 'keydown'};
                    e.charCode = e.keyCode = e.which = 72;
                    e.shiftKey = e.altKey = e.metaKey = false;
                    e.ctrlKey = true;
                    window.parent && window.parent.receiveShortCutEvent && window.parent.receiveShortCutEvent(e);
                }, 1);
            }
});

I hope you get the idea.

Answer 2

Use init_instance_callback and define your custom shortcut.

Example:

tinymce.init({
    selector: "textarea",


    init_instance_callback: function (editor) {
        editor.addShortcut("ctrl+s", "Custom Ctrl+S", "custom_ctrl_s");
        editor.addCommand("custom_ctrl_s", function() {
            alert("234");
            /*
            your custom codes
            */
        });
    }


});