Showing posts with label tiny mce tab key. Show all posts
Showing posts with label tiny mce tab key. Show all posts

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