I know I'm certainly not the only one to say this either, as these TinyMCE forum postings attest to...
I am currently developing an application which updates the TinyMCE editor content using Ajax. I also want to be able to re-load the associated stylesheet(s) when the content is changed. This is because the stylesheets can also be edited independently from the content and also because different content can come from a different HTML file with different stylesheets associated with it.
When TinyMCE is first initialised it dynamically adds any user-defined stylesheets to the head of the HTML page and then, (I think) populates the Styles Select Listbox by reading all the styles. Since this is only done once when TinyMCE is first constructed, I need a way to request TinyMCE to re-read the styles. I attempted an ugly work-around by reloading the entire page, but this ran into browser caching problems and in any case is not a good solution.
After reading the API documentation I naturally assumed that calling "tinyMCE.activeEditor.dom.
would do the job for me. What I discovered, (and what others before me have also discovered), is that "loadCSS()" works when you're re-creating the entire editor instance, but NOT when you wish to simply update an existing editor instance.
After spending several days with FireBug and PhpEdit I am no closer to resolving this issue, hence this posting. If anyone knows how to do this then I would greatly appreciate some assistance please.
NOTE: I did write a function to clear the associated styles which I call prior to "loadCSS()" and it appears to work quite well, so I have included this below:
// Note: "isDef(arg)" is a function that checks if the argument is defined and not null
function clearStyles(editorStyles) // "editorStyles" is an array of stylesheet relative paths
if (!isDef(editorStyles)) return false;
var Editor = tinyMCE.activeEditor;
var head = Editor.dom.select('head');
for (var i=0; i<head.childNodes.length; i++)
var childNode = head.childNodes[i];
if (isDef(childNode.rel) && childNode.rel.toLowerCase() == 'stylesheet' && isDef(childNode.href))
var href = childNode.href.toLowerCase();
for (var j=0; j<editorStyles.length; j++)
var style = editorStyles[j];
if (href.indexOf(style) >= 0)
delete Editor.dom.files[style]; // I also have to clear the entry out of the dom file list or else it won't be added when I call loadCSS next time this page is loaded
Editor.controlManager.get('styleselect').items.length = 0; // The style list will be re-populated (if empty) when the menu is shown in the function "_importClasses()" in the file "editor_template_src.js"
Editor.dom.classes.length = 0; // Remove all elements before de-assigning, (just in case)
delete Editor.dom.classes; // De-assign the internal dom "classes" object to force it to re-parse the loaded page's DOM for style classes in the function "_importClasses()" in the file "editor_template_src.js".