Add TinyMCE Editor dynamically with different configuration

By Akbar
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);
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.