13

I'm trying to find out how to allow people to indent in Tiny MCE editor. Right now, whenever someone presses tab they just move into the next field. Is there any piece of code that will allow them to actually hit tab and have it create a tab for a new paragraph.

2
  • This article talks about this problem: pixelastic.com/blog/…
    – Tim
    Nov 24, 2012 at 16:48
  • 1
    @Tim I'm very confused. Every time I do a web search on this problem, I just find links with people with the opposite problem. When I hit tab, it jumps to the next field. It seems that whenever anyone else hits tab, it doesn't jump to the next field (your article as well).
    – sinθ
    Nov 24, 2012 at 16:54

8 Answers 8

30

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;
        }
    });
}
1
  • This is not the same as a tab character.
    – Novitchi S
    Oct 24, 2018 at 9:08
10

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

6
  • Is there any way to stop the curser from jumping to the next field. Right now, it inserts the tab, but moved to the next field as well.
    – sinθ
    Nov 26, 2012 at 16:41
  • that was my failure (it is necessary to stop the bubbling of the event), i corrected it in my code above
    – Thariama
    Nov 27, 2012 at 8:46
  • 5
    This worked for me - mostly. I changed 'mceInsertRawHTML' to 'mceInsertContent' and '\x09' to '  '. Also, evt.preventDefault(); without evt.stopPropagation(); return false; is sufficient to suppress the default behaviour and still allows other scripts to handle this event.
    – Jon Hulka
    Oct 5, 2013 at 3:32
  • It is also possible to indent using the indent, outdent button (but depending on ones use case this is not what is desired).
    – Thariama
    Nov 18, 2013 at 13:01
  • 1
    this is code for tinymce 3.x instaed of ed.onKeyDown.add you will have to use ed.on('keydown' for tinymce 4.x
    – Thariama
    Nov 20, 2013 at 13:06
5

The answers given here didn't quite match my requirements as I needs to indent text in the middle of a line. I was listing the names of office branches and wanted their phone numbers aligned together. With each office name being a different length I tried a combination of @Mac's answer and spaces but I couldn't get it accurate enough so I added a small space option using the shift key and space bar which allowed me to get everything lined up perfectly. The only downside is that the default entities for tinymce don't include   so I have had to add the default entity list to my settings and add "8202,hairsp" at the end.

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.on('keydown', function(event) {
        if (event.keyCode == 9) { // tab pressed
            ed.execCommand('mceInsertContent', false, '  '); // inserts tab
            event.preventDefault();
            return false;
        }
        if (event.keyCode == 32) { // space bar
            if (event.shiftKey) {
                ed.execCommand('mceInsertContent', false, ' '); // inserts small space
                event.preventDefault();
                return false;
            }
        }
      });
   }
});
1
  • 1
    Am struggling with this issue as well @richard.holmes . Your solution is the best so far. The best one would be for tabs to follow an invisible grid to have increments of x pixels. This so from 0 it would go to 25px for example and even if in the middle of a line it would go the next grid line with an increment of 25px based on the initial start position. For this I have not found any examples.
    – rhand
    Jul 29, 2020 at 0:42
4

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();
          }
      });
   }
});
0
4

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/

1

you can easily added tab space using following code

    ed.on('keydown',function(evt){
            if (evt.keyCode==9) {
                ed.execCommand('mceInsertContent', false, '<span class="mce-nbsp">&emsp;&emsp;&emsp;&emsp;</span>');
                tinymce.dom.Event.cancel(evt);
                return;
            }
    });
0

For tinyMCE v5 the react version, this is what worked for me:

<Editor
  init={{
    setup: (ed) => {
      ed.on('keydown', (event) => {
        if (event.key === 'Tab') {
          if (event.shiftKey) {
            ed.execCommand('Outdent');
          } else {
            ed.execCommand('Indent');
          }
          event.preventDefault();
          return false;
        }
        return true;
      });
    },
  }}
/>
0

For code snippet editing, if you want to avoid using execCommand and keep the cursor active after pressing the tab key :

    add_filter('tiny_mce_before_init', function($init){
        
        $init['setup'] = "function(ed) {

            ed.onKeyDown.add(function(ed, e) {
                
                //tab key
                
                if( e.keyCode == 9 ){
                                            
                    e.preventDefault();
                    e.stopPropagation();
                    
                    if (e.shiftKey) {
                        
                        // TODO Outdent or use delete
                    }
                    else {
                        
                        // Indent
                        
                        ed.selection.setContent('\x09',{format:'raw'});
                    }
                }
            });
        }";
        
        return $init;
    }); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.