javascript 将图像插入 tinymce 编辑器

Insert an image into a tinymce editor

提问by Baz

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?

我的 html 页面上有一个 tinymce 文本框。在此文本框下，我有一个包含我的文件系统的表格，我可以在其中导航以找到我的图像。我希望能够单击此表中的图像并将其插入到 timymce 文本框中。我该怎么做呢？

回答by user2314737

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.

从图像的src.

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

请注意，您需要在命令中将图像的 CSS 样式传递给 tinyMCE。

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 + '"/>');

编辑：对于 Tiny MCE 4.x，插入图像代码可以简化为： tinymce.activeEditor.insertContent('<img alt="Smiley face" height="42" width="42" src="' + sr + '"/>');

Here's the demo.

这是演示。

回答by Phung D. An

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

user2314737 的小提琴坏了。所以我结合李飞合的解决方案来解决这个问题。

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

fiddle

小提琴