Replacing content_css in TinyMCE

Question

Is there a way to replace the content_css in TinyMCE?

I have a single textarea on a page that is being used to edit HTML content that is dynamically loaded from a list of links using content returned from a server call as follows:

tinymce.get('contenteditor').setContent(json.content);

I also need to change the CSS in the TinyMCE editor for the different pages. I'm doing the following just before the setContent:

tinymce.activeEditor.dom.loadCSS("tinyMCECSS?cssid=" + json.cssId);

Unfortunately, this is just adding the provided CSS to what is already loaded. eg. if the first page CSS has

h1 {color: red;}

and the second page has:

h1 {color: blue;}

If I load the first page, the h1's are red. If I then switch to the second page, they turn blue (as expected). However, if I then go back to the first page, they remain blue.

If the pages are loaded the other way round, then the reverse happens and I'm stuck with red.

It appears that it's just appended the CSS with the loadCSS() function.

Is there a way to remove the all of the first CSS before I replace it with the second file?

I've tried clearing the content_css value, but it doesn't work and I don't think that's the right one :-)

tinymce.activeEditor.content_css = []

I've tried a complete reinitialisation (with tinymce.init()) at the time of updating the editor, but I'm still getting the combined CSS as described above.

Thanks for your time :-)

Answer 1

Well, after a lot of experimentation and looking for alternatives, I've found something that works. It's a bit more radical that I was hoping and involves completely replacing the TinyMCE editor rather than just replacing and refreshing the CSS it's using.

The answer is basically described in: How do i remove tinyMCE and then re-add it?

But, like so many answers, it leaves an annoying part unanswered, that was how to find the magical "editor_id" value.

In my case, from the original code I included, the editor ID is simply 'contenteditor' (the ID of the textarea I'm using.

So, in summary, I'm using the following code when an update is required:

tinymce.EditorManager.execCommand('mceRemoveEditor', true, 'contenteditor');
tinymce.EditorManager.execCommand('mceAddEditor', true, 'contenteditor');

tinymce.init({
        mode: "specific_textareas",
        selector: "#contenteditor",
        theme: "modern",
.
.
.