I'm making a Wordpress plugin for adding image maps in the posts. Currently I have implemented the image maps as a custom post types. However I'm having some trouble with adding them in posts.

I have made a new tab in the media insert/upload window called Image map. When you click an image map in the tab, this function is fired:

function insertImageMap() {
    tinyMCE.execInstanceCommand('mceInsertContent', false, 'content',
    'some text or html code'
    );
    window.parent.tb_remove();
}

However nothing is added to the tinyMCE editor. The function is fired, but the instance of tinyMCE editor is undefined even if I use tinyMCE.getInstanceById('content'). Is there a way to access the editor of a post editor page?

I have included tinyMCE script in my plugin and it doesn't show as undefined.

I found an older question asking the same, but the answer wasn't very helpful: Custom Wordpress Plugin - How do I insert content from popup on post editor?

I'm making a Wordpress plugin for adding image maps in the posts. Currently I have implemented the image maps as a custom post types. However I'm having some trouble with adding them in posts.

I have made a new tab in the media insert/upload window called Image map. When you click an image map in the tab, this function is fired:

function insertImageMap() {
    tinyMCE.execInstanceCommand('mceInsertContent', false, 'content',
    'some text or html code'
    );
    window.parent.tb_remove();
}

However nothing is added to the tinyMCE editor. The function is fired, but the instance of tinyMCE editor is undefined even if I use tinyMCE.getInstanceById('content'). Is there a way to access the editor of a post editor page?

I have included tinyMCE script in my plugin and it doesn't show as undefined.

I found an older question asking the same, but the answer wasn't very helpful: Custom Wordpress Plugin - How do I insert content from popup on post editor?

• javascript
• wordpress
• tinymce

• I think that it's because the pop-up is actually an iframe. So in order to access the tinyMCE instance, you need to get it through either window.opener or window.parent(I'm not 100% sure if it's any of those or something else). So you can do var instance = window.opener.tinyMCE || window.parent.tinyMCE; instance.execInstanceCommand('mceInsertContent', false, 'content', 'some text or html code');. In addition you can look through the source code(most-likely the JS) and see how WordPress sends the content to the editor. – Nikola Ivanov Nikolov Commented Dec 3, 2012 at 9:56
• Actually have you tried window.send_to_editor()? – Nikola Ivanov Nikolov Commented Dec 3, 2012 at 10:05
• Well, the script isn't actually run in iframe. I can access the instance of tinyMCE itself, but not the post editor with tinyMCE.getInstanceById(). – Spike Commented Dec 3, 2012 at 10:07
• But you said that you added a new tab to the Media upload pop-up, and this is loaded in an iframe. Unless you're doing something really strange, it should be in an iframe. Please try window.send_to_editor('content to go to editor here') and tell me if it works. – Nikola Ivanov Nikolov Commented Dec 3, 2012 at 10:09
• 1 Ah yes, I misunderstood something. I had previously tested send_to_editor, but it had been undefined. Window.parent.send_to_editor did the trick though. Feels great when you miss obvious solutions like this. Thanks! – Spike Commented Dec 3, 2012 at 10:12

1 Answer 1

Solution found in ments:

function insertImageMap() {
    window.parent.send_to_editor('any text');
    window.parent.tb_remove();
}