Javascript:TinyMCE+；海图

请给我一些关于如何在javascript中实现以下内容的技术建议

我需要在以下场景中将highcharts整合到tinyMCE中：

• 用户从tinyMCE菜单中选择“添加图表”
• 选择图表（其图表ID存储在变量中）
• 图表被呈现到tinyMCE的iframe（使用主干视图，可以使用chartId获取图表信息，并使用已经实现的id呈现图表）

还要注意，所有这些都发生在extJS应用程序内部

此图表应为：

• 大小和可编辑，例如像图像一样
• 但用户无法将插入符号放在highchart中并更新其中的文本，例如，它完全像图像一样被选中
• 当右键单击时，会显示tinyMCE的弹出菜单，如图像，我可以在其中设置宽度和高度样式等

我还需要在从tinyMCE收到实际标记时，而不是整个图表，我会得到一个占位符，例如标记“chart dataId=“chartId”或其他格式

已经做的事情：

• 我已将tinyMCE附加到extJS，并将其呈现为form.field
• 我已经在tinyMCE的工具栏上添加了自定义按钮
• 我实现了将图表渲染到virtual中，然后将这个div添加到tinyMCE的iframe dom中，但是图表只渲染了一部分，并且图表中的文本是可选的，这是不被接受的

最后，主要问题是：

• 如何使图表正确地呈现到tinyMCE的iframe中
• 如何使tinyMCE中的图表在类似图像的模式下可选择和编辑
• 从tinyMCE检索标记时，如何用占位符替换图表

---

谢谢你的建议

我为类似的需求开发了一些解决方案。这是一个插件，允许你创建/编辑你自己的图表，它是免费的，有麻省理工学院的许可证（以及图表），我在那里使用，它也有麻省理工学院的许可证

它是如何工作的？只需将SVG添加到您的内容中，或者您可以向服务器添加一些自定义上传推送文件，并将IMG标记添加到文本中

链接：

---

希望它会有用，如果有人有任何问题，请随时问我。

backbone+extjs+highcharts+tinymce？听起来很复杂！为什么不使用extjs图表和htmleditor呢？@NeilMcGuigan extjs图表太重了——一个页面上的3+个图表开始滞后。HtmlEditor没有表，但我们需要它们。