Insert an image into a tinymce editor

javascript tinymce tinymce-4
Baz picture Baz · Feb 18, 2014 · Viewed 19.6k times · Source

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

user2314737 picture user2314737 · Feb 18, 2014

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.

Related questions

uncaught referenceerror: tinymce is not defined

My JS: $(document).ready(function() { tinymce.init({ selector: 'textarea', height: 500, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table contextmenu paste code' ], toolbar: 'undo redo | insert | styleselect | bold italic | alignleft …

Read More
TinyMCE : Toolbar icons not appearing

I was exploring tiny mce editor for one of my project and what I found out was the Icons in the tool bar are not appearing. It is showing some unicode which the browser is unable to display. Here is …

Read More
initialize tinymce with content

I have a page containing one tinymce4 editor instance. I want to initialize this editor with some content, programmatically. I know that I have to call: tinymce.get('editor').setContent('my content'); However I have trouble to do this when …

Read More