web 端富文本实现插入 echarts 图表

[ImmerTry]

公司现在有个需求，实现富文本插入 echarts 图表，可以修改图表上的数据及内容。 大家有过类似需求的解决方案吗

[ubbcou]

如果可以去除图表的交互功能，那么我觉得可以这么做，echarts 依据数据的响应台后生成图表 & 导出图片，将图片插入到富文本。

这样可以不依赖在渲染端对 echarts 的支持，就可以显示图表内容。

[LinYa]

我想先了解一下，目前用的富文本编辑器是什么？

[hellsnow]

或者能不能搞一些占位符，最后去插入 echarts

[f056917]

太复杂，建议用 form 表单

[ImmerTry]

@LinYa 目前再用的是 wangEditor 这个富文本编辑器

[zdhxiong]

把 echarts 封装成 Web Components ，富文本里插入一个自定义标签就行

[jucelin]

富文本编辑器 只添加图表的占位符，可以设置显示大小，过滤参数之类的
实际显示的时候，再替换，并渲染数据。

[lneoi]

这很像目前的 Notion Like 逻辑

[lneoi]

wangEditor 可以自定义数据结构 实在不行套个壳应该可以

[zhangleshiye]

@ImmerTry 粗略的看了下支持上传文件, 是我的话, （用户点击编辑器上的插入图表按钮）-> 打开一个新的页面或者模态窗（ 类似数据大屏的那种编辑页,这种就一块显示图表，其他表单域显示配置项，颜色，维度，横轴数轴, 图表类型选择）->确认完后回传服务器并返回文件哈希地址->回传编辑器

[zhangleshiye]

@ImmerTry vue 的话可以参考开源项目 https://gitee.com/MTrun/go-view 不考虑太复杂的交互应该还是能实现的

[sailei]

本人 已经用 wangEditor 实现集成 echart
https://www.bilibili.com/video/BV1Ph411g7Rv/?spm_id_from=333.999.0.0&vd_source=acb8e37c3285c1622b0be5d51d6c6d9f

[ImmerTry]

@sailei 看到了演示，目前的话是只能固定的图标插入嘛

[sailei]

看需求吧，加我 v c2FpbGVpMQ==