Insert an image into a tinymce editor

Question

I have a tinymce text box on my html page. Under this text box I have a table with my file system in which I can navigate to locate my images. I would like to be able to click on an image in this table and have it inserted in the timymce text box. How might I go about doing this?

Solution 1

I've used the command

tinyMCE.execCommand('mceInsertContent', false, '<img alt="Smiley face" height="42" width="42" src="' + sr + '"/>');

to insert the image in tinyMCE after extracting the URL from the image's src.

Note that you need to pass the CSS style of the image to tinyMCE in the command.

EDIT: for Tiny MCE 4.x, the insert image code can be simplified to: tinymce.activeEditor.insertContent('<img alt="Smiley face" height="42" width="42" src="' + sr + '"/>');

Here's the demo.

Solution 2

The fiddle from user2314737 is broken. So I combine with Fei Hap Lee's solution to have working one.

        tinymce.activeEditor.insertContent('<img alt="Smiley face" height="42" width="42" src="' + sr + '"/>');

fiddle

Comments

[Fei Hap Lee]

For Tiny MCE 4.x, the insert image code can be simplified to: tinymce.activeEditor.insertContent('<img alt="Smiley face" height="42" width="42" src="' + sr + '"/>');

[user2314737]

I updated my old fiddle, the issue was that the library had been moved to a new URL. Now the fiddle supports the new version of TinyMCE library.