inserting images into multiple tinyMCE editors in wordpress

Question

I am using a plugin for wordpress called "CMS" its a plugin that makes wordpress more CMS like. http://plugins.trendwerk.nl In particular it adds multiple text "blocks" to a template, each can be edited in the post.php script using multiple tinymce editors.

The problem I am having is that you can only place images into the main or default editor, according to the author of CMS the only fix is to place an image into the main content editor and dragging it to the editor in question. supposedly its impossible to put the image into one of the block editors.

This does not always work, for some reason it uses a relative link when dragging and dropping from one editor to another, this breaks the site.

What I would like to do is to add the ability to insert images into individual tinyMCE edit boxes. When an image is inserted it is inserted into the activeEditor. but the active editor always appears to be the main editor.

When the page is created any textarea with the class theEditor is converted to a tinyMCE editor, one would assume clicking on an editor would then set that editor to the active editor, it does not appear to. or alternativally clicking on the "add an image" icon deactivates it (loses focus).

Does anyone know how I can set the activeEditor? perhaps when the user click on the "add an image" icon I can update the active editor.

DC

Answer 1

All editor instances (objects) can be found using

tinymce.editors; // array containing all editor objects

You can set the activeEditor for example to the first editor, but you may choose any other editor object

tinymce.activeEditor = tinymce.editors[0];

I suggest you use Firebug and console.log(tinymce.editors); to have a closer look at this.

When the page is created any textarea with the class theEditor is converted to a tinyMCE editor, one would assume clicking on an editor would then set that editor to the active editor, it does not appear to. or alternativally clicking on the "add an image" icon deactivates it (loses focus).

Clicking on an editor usually makes that editor the active one. I think your are right that the "add image" button somehow changes the activeEditor. What kind of button is this - is it a tinymce UI button or something from wordpress?

Answer 2

Wordpress does change the editor, sadly its in an onclick event in the toolbar that holds the icons. the event bubbles up from the a tag and calls the following javascript:

if (typeof tinyMCE != "undefined" && tinyMCE.activeEditor) {
      tinyMCE.get("content").focus();
      tinyMCE.activeEditor.windowManager.bookmark = tinyMCE.activeEditor.selection.getBookmark("simple")
}

As you can see the editor"content" is hardcoded into it. it then bubbles up even further to another script which opens the media iframe I needed to keep this event so I couldnt just capture and cancel the event.

To solve the problem I changed the above to if (typeof tinyMCE != "undefined" && tinyMCE.activeEditor) this means if the editor is not already set then change it to the hardcoded value.

Then in my own icons onclick method I change the editor to the one of my choice.

Sadly this means I had to change the wordpress core files but there was no easy way to do it in the plugin. It can be done of course but requires replication of the wordpress events. not sure if that's a good or bad thing.

I will pass what I have done along to the writer of the plugin and he can make the changes into his plugin if he so chooses.

DC