Tiny MCE: How to allow people to indent
Thariama's solution didn't quite work for me. I agree with Jon Hulka's fix. This seems to work fine on Firefox (mac+pc), Chrome (mac+pc) and Internet Exploder. It's not perfect, but I find it very usable and acceptable. Thanks Jon
So, to wrap op Jon's solution:
tinyMCE.init({
...
setup : function(ed) {
ed.onKeyDown.add(function(ed, evt) {
if (evt.keyCode == 9){
ed.execCommand('mceInsertContent', false, '  ');
evt.preventDefault();
}
});
}
});
It can be done via nonbreaking plugin available in tinymce
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "nonbreaking",
mewnubar: "insert",
toolbar: "nonbreaking",
nonbreaking_force_tab: true
});
details can be found on https://www.tinymce.com/docs/plugins/nonbreaking/
For newer versions of Tiny MCE editor the following solution worked for me:
setup: function(ed) {
ed.on('keydown', function(event) {
if (event.keyCode == 9) { // tab pressed
if (event.shiftKey) {
ed.execCommand('Outdent');
}
else {
ed.execCommand('Indent');
}
event.preventDefault();
return false;
}
});
}
You can catch this event and stopPropagation/return false
in case the user presses tab.
// Adds an observer to the onKeyUp event using tinyMCE.init
tinyMCE.init({
...
setup : function(ed) {
ed.onKeyDown.add(function(ed, evt) {
console.debug('Key up event: ' + evt.keyCode);
if (evt.keyCode == 9){ // tab pressed
ed.execCommand('mceInsertRawHTML', false, '\x09'); // inserts tab
evt.preventDefault();
evt.stopPropagation();
return false;
}
});
}
});
In case the user inserts a tab at the beginning or end of a paragraph it will get deleted by the browser (a workaround for this is to insert a special character of a predefined length that is not a tab).