How can I embed an image in tinymce?

Question

Tinymce allows you to add an image by refering to an url. For a normal user, who probably does not even know what an url is, this is too tedious. They have an image on their computer, and it should be embedded in the html text. Is there a straightforward way to achieve this using tinymce?

A file upload plugin would not be helpful in this particular instance, because the tinymce editor runs locally. The image really needs to be embedded in the html text.

Answer 1

I have created a plugin its found here ( https://github.com/buddyexpress/bdesk_photo )

There are some restrictions in plugin like:

• The image must be equal to or less then 500KB
• The image must be equal to or less then 800x800 in dimensions.

Answer 2

You need to make sure that in the tinymce init valid_elements and valid_children are configured correctly. How do you wish the user to embed the image? (buttonclick, drag-and-drop,...)

To insert an image per tinymce API you can use:

editor.execCommand('mceInsertContent', false, '<img src="images/myimage.jpeg" height="12" width="12" />');

I strongly suggest you download the tinymce developer version and have a closer look at the files tiny_mce/themes/advanced/editor_template_src.js and tiny_mce/themes/advanced/charmap.html. If possible search the sourcecode for "charmap". Instead inserting a character you will have to insert the image html code.