Search code examples
tinymce

Tiny MCE: How to allow people to indent


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.


Solution

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