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).

Tags:

Tinymce