如何在tinymce中嵌入图像？答案

【问题标题】：How can I embed an image in tinymce?如何在tinymce中嵌入图像？
【发布时间】：2011-08-30 13:17:15
【问题描述】：

Tinymce 允许您通过引用 url 添加图像。对于一个可能甚至不知道 url 是什么的普通用户来说，这太乏味了。他们的计算机上有一张图片，它应该嵌入到 html 文本中。有没有使用 tinymce 实现这一目标的简单方法？

文件上传插件在这种特殊情况下没有帮助，因为 tinymce 编辑器在本地运行。图片确实需要嵌入到html文本中。

【问题讨论】：

标签： tinymce embed

【解决方案1】：

我已经创建了一个插件，它可以在这里找到 (https://github.com/buddyexpress/bdesk_photo)

插件有一些限制，例如：

图片必须小于等于 500KB
图片的尺寸必须等于或小于 800x800。

【讨论】：

【解决方案2】：

您需要确保在tinymce init 中valid_elements 和valid_children 配置正确。您希望用户如何嵌入图像？（按钮单击、拖放、...）

要为每个 tinymce API 插入图像，您可以使用：

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

我强烈建议您下载 tinymce 开发者版本并仔细查看文件 tiny_mce/themes/advanced/editor_template_src.js 和 tiny_mce/themes/advanced/charmap.html。如果可能，在源代码中搜索“charmap”。而是插入一个字符，您将不得不插入图像 html 代码。

【讨论】：

我想使用“插入图片”按钮。当然，拖放会很整洁！但是按钮可能更容易发现，并且不需要任何特殊培训。
所以在这种情况下，单击按钮会插入一张图片（相同）或触发对话以选择一张？
我的目标是在按下“插入图像”按钮时选择文件的对话框。
你应该看看charmap按钮（高级功能）。这是一个很好的起点。查看我编辑的帖子。
谢谢，塔里亚马。您概述的内容听起来像是正确的道路。不幸的是，我每天都不用 Javascript 做任何工作，所以我可能无法投入必要的时间来自己实现这个功能。我可能会暂时帮助客户“手动”插入图像。谢谢指点！