<小时/>
请给我一些关于如何在 JavaScript 中实现以下内容的技术建议。
我需要在以下场景中将 highcharts 集成到tinyMCE中:
- 用户从tinyMCE菜单中选择“添加图表”，
- 选择图表(它的chartId存储在变量中)，
- 图表被渲染到tinyMCE的iframe(使用主干 View ，能够使用chartId获取图表信息并使用其id渲染图表，这已经实现)。
另请注意，所有这些都发生在 extJS 应用程序内部。
这个图表应该是:
- 相当大且可编辑，例如就像图像一样，
- 但用户无法将脱字符号放入 highchart 中并更新其中的文本，例如它完全像图像一样被选择。
- 右键单击时，会显示tinyMCE的弹出菜单，例如图像，我可以在其中设置宽度-高度-样式等。
我还需要当从tinyMCE收到实际标记时，我会得到一个占位符，而不是整个图表，例如标签“chart dataId="chartId"”或其他格式。
已经完成的事情:
- 我已将tinyMCE附加到extJS并将其呈现为form.field
- 我已将自定义按钮添加到tinyMCE的工具栏
- 我实现了将图表渲染到 virtual 中，然后将此 div 添加到tinyMCE 的 iframe dom 中，但是图表只渲染了部分，并且图表内的文本是可选的，这是不被接受的。
最终，主要问题是:
- 如何使图表正确渲染到tinyMCE的iframe中？
- 如何使tinyMCE中的图表在类似图像的模式下可选择和编辑？
- 从tinyMCE检索标记时如何使用一些占位符替换图表？
感谢您的建议!
最佳答案
我已经针对此类需求开发了一些解决方案。这是允许您创建/编辑自己的图表的插件，它是免费的并且具有 MIT 许可证(也有图表)，我使用 Chartist在那里，它也拥有 MIT 许可证。
它是如何工作的？只需将 SVG 添加到您的内容中，或者您可以添加一些自定义 uploader - 将文件推送到您的服务器并将 IMG 标签添加到您的文本中。
链接:https://github.com/Axel186/charts-tinymce-plugin
希望对你有用，如果有人有任何疑问，请随时问我。
关于Javascript:TinyMCE + Highcharts，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11576671/