将图像插入tinymce编辑器

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?

Answer 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 .

Answer 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