1

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

在以下情况下，我需要将 highcharts 集成到 tinyMCE 中：

  • 用户从 tinyMCE 菜单中选择“添加图表”，
  • 选择图表（它的 chartId 存储在变量中），
  • 并且图表被渲染到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 检索标记时，如何用一些占位符替换图表？

感谢您的建议！

4

1 回答 1

0

我已经为这样的要求开发了一些解决方案。这是允许您创建/编辑自己的图表的插件，它是免费的并且具有 MIT 许可证（图表也是如此），我在那里使用Chartist，它也具有 MIT 许可证。

这个怎么运作？只需将 SVG 放入您的内容，或者您​​可以添加一些自定义上传器 - 将文件推送到您的服务器并将 IMG 标签添加到您的文本中。

链接：https ://github.com/Axel186/charts-tinymce-plugin

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

于 2017-07-26T13:59:45.930 回答