diff --git a/plugins/codemirror/lang/en.js b/plugins/codemirror/lang/en.js index ebc8e3a326..029e51a524 100644 --- a/plugins/codemirror/lang/en.js +++ b/plugins/codemirror/lang/en.js @@ -1,4 +1,6 @@ CKEDITOR.plugins.setLang('codemirror', 'en', { + disableTabKeyUsing: 'Disable tab key using:', + enableTabKeyUsing: 'Enable tab key using:', preview: 'Preview', source: 'Source', }); diff --git a/plugins/codemirror/plugin.js b/plugins/codemirror/plugin.js index 0f10cf9100..7268dd26b1 100644 --- a/plugins/codemirror/plugin.js +++ b/plugins/codemirror/plugin.js @@ -4,6 +4,47 @@ var stylesLoaded = false; CKEDITOR.plugins.add('codemirror', { + _addTabKeyMessage: function (cm, editor, tabsKeyIsEnabled) { + var div = document.createElement('div'); + + var message = tabsKeyIsEnabled + ? editor.lang.codemirror.disableTabKeyUsing + : editor.lang.codemirror.enableTabKeyUsing; + + var html = + '
'; + + div.innerHTML = html; + + cm.getWrapperElement().appendChild(div); + }, + + _removeTabKeyMessage: function (cm) { + var div = cm.getWrapperElement().querySelector('.keyboard-message'); + + if (div) { + div.parentElement.removeChild(div); + } + }, + _createCodeMirrorEditor: function (editor) { var instance = this; @@ -25,6 +66,32 @@ lineNumbers: true, lineWrapping: true, mode: 'text/html', + extraKeys: { + 'Ctrl-M': function (cm) { + var tabKeyIsEnabled = cm.state.keyMaps.every( + function (key) { + return key.name !== 'tabKey'; + } + ); + + instance._removeTabKeyMessage(cm); + instance._addTabKeyMessage( + cm, + editor, + !tabKeyIsEnabled + ); + + if (tabKeyIsEnabled) { + cm.addKeyMap({ + 'Shift-Tab': false, + Tab: false, + name: 'tabKey', + }); + } else { + cm.removeKeyMap('tabKey'); + } + }, + }, } ); @@ -76,6 +143,30 @@ editor.fire('ariaWidget', this); + codeMirrorInstance.codeMirrorEditor.on('focus', function (cm) { + var tabKeyIsEnabled = cm.state.keyMaps.every(function ( + key + ) { + return key.name !== 'tabKey'; + }); + + if (tabKeyIsEnabled) { + cm.addKeyMap({ + 'Shift-Tab': false, + Tab: false, + name: 'tabKey', + }); + } + + instance._addTabKeyMessage(cm, editor, false); + }); + + codeMirrorInstance.codeMirrorEditor.on('blur', function () { + instance._removeTabKeyMessage( + codeMirrorInstance.codeMirrorEditor + ); + }); + callback(); }); },