Add TinyMCE Editor dynamically with different configuration

By Akbar • February 13th, 2008
TinyMCE Editor allows you to have multiple layout configurations (different type of buttons and toolbars) per theme. These custom layout configurations are automatically applied to the text boxes by the depending on the ‘editor_selector’ class of each text boxes. 
All works beautifully until you try to add a text control with the correct CSS class dynamically using JavaScript (normal in AJAX calls). When applying the TinyMCE Editor cynically on TEXT boxes,  it seems to always apply the last defined setting/configuration. This might be not what you have expected. After a quick digging into the TinyMCE call chain, I was able to add a new method in the TinyMCE source which does the required job. Here is the method:

 

mceAddControlDynamic : function(control_id, selector_class) {       
    var bControlAdded = false;               
    // Check all the stored settings for the match       
    for (c=0; c<tinyMCE.configs.length; c++) {                 
         var configSettings = tinyMCE.configs[c];   
         if (configSettings.editor_selector && configSettings.editor_selector == selector_class)  {                   
               tinyMCE.settings = configSettings;                   
               tinyMCE.addMCEControl(tinyMCE._getElementById(control_id), control_id);
               break;               
          }           
     }   
} 
The method gets the Text Box ID and the editor_class of the settings you want to apply. It will then check all the available configurations and will load the correct one. Seems to do the job for me.

This entry was posted on Wednesday, February 13th, 2008 at 1:06 pm and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.