Wednesday, February 1, 2012

TinyMCE Text Area (Tab issue)

Hi All,

I was developing a website with tiny mce text areas, i faced an issue with tabs there. On pressing tab key, the cursor goes to next text area. So, to resolve this issue, i did it as under ::


In tiny mce init declaration, i added a callback function as under

tinyMCE.init({
  // General options
  init_instance_callback : fixTinyMCETabIssue,


Then i created a javascript function which adds a tab character on pressing shift+tab key

function fixTinyMCETabIssue(inst) {
    inst.onKeyDown.add(function(inst, e) {
        // Firefox uses the e.which event for keypress
        // While IE and others use e.keyCode, so we look for both
        if (e.keyCode) code = e.keyCode;
        else if (e.which) code = e.which;
        if(code == 9 && !e.altKey && !e.ctrlKey) {
            // toggle between Indent and Outdent command, depending on if SHIFT is pressed
            if (e.shiftKey) inst.execCommand('mceInsertContent', false, "#TAB#");
          
            return false;
        }
    });
}
One of my blog reader found an issue with image resizing in tinymce when he implemented this code, he found that this functionality can be achieved using:
nonbreaking_force_tab : true,

Thanks,

Ujjwal Soni

No comments: