河北网络公司网站建设,进入公众号的欢迎语,梧州推广网站服务商,wordpress导入采集文章项目中需要实现 “在线编辑 word 模板” 的功能#xff0c;我打算使用富文本组件 tinymce #xff0c;因为业务需求比较特殊#xff0c;研究一下 tinymce 是否能实现。
如何在 vue 项目中引用 tinymce#xff0c;可以看另一篇文章 《在 vue 项目中使用 tinymce》
#x…项目中需要实现 “在线编辑 word 模板” 的功能我打算使用富文本组件 tinymce 因为业务需求比较特殊研究一下 tinymce 是否能实现。
如何在 vue 项目中引用 tinymce可以看另一篇文章 《在 vue 项目中使用 tinymce》
最后这个功能没有用 tinymce 实现换了别的富文本库。但还是把这次的研究过程记录下来给自己做一个总结回顾 业务描述
使用场景
假设我需要写一个 word 文件《2023年销售部工作汇报》 写完之后我还要给开发部、采购部写同样的报告格式相同只有金额数值需要根据各部门实际情况填写。写完了今年的报告我还要补上之前年份的报告。
这些都是重复的工作我想省点力气。做一个模板让程序给我自动生成多份 word 文件。
简单观察就能发现这篇报告中只有两个变量年度 和 部门。收入支出的值都可以按照设定好的规则根据这两个变量的值自动计算查询 我使用这个模板时只需要指明 年度 和 部门 的值程序就会自动把所有值替换好生成 word 文件。年度和部门是直接替换文字金额是根据年度和部门的值自动查询数据库后再替换。
上面是简单的描述真实项目要复杂得多这里不详细说明了。
解释
年度、部门是 “全局参数”导出 word 时用户可以设置这个值或者使用默认值比如说年度默认取当前年。总收入、总支出、净收入是“数据标签”每个标签都需要配置好规则这样导出 word 时就可以根据全局参数的值实时查询数据
数据标签的规则设置非常灵活可配置项很多大部分的业务场景都可以覆盖。这里不细说了举个例子简单理解一下就够了很久不写sql了不确定语法对不对明白意思就行
# [总收入]的规则
SELECT SUM(income) FROM table_money WHERE year 年度 and dept 部门;除了简单的数据标签还可以插入多种类型的图表。这些内容也需要配置数据规则、设置想要的样式。导出 word 时查询完数据会自动渲染 用 tinymce 怎么实现
每个数据标签是一个整体
全局参数、数据标签等业务组件它们其实都是占位符。在编辑模板的时候这些占位符的名字是由配置决定的会根据你的配置信息自动给标签起名字不应该让用户在富文本中直接修改文字。而且每个标签应该是一个整体。
如下图光标在数据标签内部了这是不可以的应该禁止光标点进去 光标在净收入标签的后面。这时候用户点击 Backspace 键应该把 [净收入] 标签整个删除 这种效果其实在 CodeMirror 中可以实现也很好实现因为 CodeMirror 提供了支持。但 tinymce 中并没提供支持其实大部分富文本组件都不支持这对于富文本属于进阶功能了普通使用者用不到。我也试了很久在 tinymce 中想要实现很麻烦
灵机一动我可以用 button 标签啊最终全局参数、数据标签决定用
input typebutton value[年度]PROBLEM SOLVED!
后来在网上看到有人说Web component 配合 tinymce custom_elements 属性也可以实现类似功能。就不去试了这里提一下。而且Web component 也有兼容性问题现在项目还没放弃兼容 IE用不了 编辑器中怎么显示图表
项目中的图表很多是用 echarts 实现的比如柱状、饼图。但 echarts 图是不能放在 tinymce 编辑框中直接用的。所以我使用图片当占位符。 在屏幕外获取数据、渲染图表。渲染好之后把图表转为图片再更新占位符的 src。 因为最终导出到 word 后用户看到的也是一张静态的图片word里也放不了活的 echarts 图表哇
给数据标签添加事件
编辑模板时点击数据标签要弹出配置弹窗。所以要给数据标签添加点击事件。
tinymce 所有的 set 方法只接受 string 类型的参数。所以不能把 element 直接传给 insertContent只能传 element.outerHTML。这样绑定的事件就无效了。
onMounted(() {tinymce.init({selector: #target,toolbar: addDataTag,setup: (editor) {editor.ui.registry.addButton(addDataTag, {text: 插入数据标签,onAction: () {const button editor.getDoc().createElement(input); button.setAttribute(id, dataTag1);button.setAttribute(type, button);button.setAttribute(value, 数据标签1); button.addEventListener(click, function () { console.log(click);}); // 没用// insertContent 方法只接受 string 类型的参数所以这里只能传 button.outerHTML。绑定的事件函数丢失了。editor.insertContent(button.outerHTML); },});},});
});要想加点击事件只能先用 tinymce set。等页面中已经有这个元素后再去找到它并绑定事件 onAction: () {...// 绑不上事件button.addEventListener(click, function () { console.log(before); });editor.insertContent(button.outerHTML);const res editor.getDoc().querySelector(#dataTag1);// 成功绑定事件res.addEventListener(click, function () { console.log(after); }); },但是这样绑定的事件是临时的每次页面回显数据时都要给数据标签重新绑定一遍事件。
onMounted(() {tinymce.init({...});setTimeout(() {// 从服务器获取数据并回显tinymce.activeEditor.setContent(input iddataTag1 typebutton value数据标签1);// 绑定事件const widgets tinymce.activeEditor.getDoc().querySelector(input[typebutton]);widgets.addEventListener(click, function () { console.log(回显时绑定事件); });}, 500);
});回显后给已有的标签绑定事件新增时给当前新增的这个绑定事件。很麻烦不如 每次初始化时给 editor.getDoc().body 绑定事件根据 e.srcElement 判断触发元素
这里只是根据麻烦程度来考虑。但其实给元素绑定事件是根本不可行的只能给 body 绑原因在下面会说明
关联数据
模板内容是一段 html 代码。业务组件的配置项是 object 对象。
要把 html 中代表业务组件的 Element 和配置项关联起来就需要在 Element 上绑定属性
input typebutton value[年度] biz-typeglobalParams biz-id1自定义属性和事件被 cleanup 了
但是我发现 tinymce 在每次获取、设置数据时都会先执行 cleanup 清除元素上的自定义属性、事件处理函数等。也就是说上面的按钮在添加到文档中时 biz-type 和 biz-id 这两个自定义属性就已经丢失了。
显式调用 tinymce getContent setContent insertContent 方法时会被 cleanup。其他隐式触发 tinymce set 的操作也会悄悄执行 cleanup防不胜防。举例
我插入了一个数据标签点击事件有一切正常。光标的位置和数据标签在同一行点击工具栏插入水平线 变成 再点击”数据标签1“没有反应说明绑定的事件已经丢了。我认为原因是插入水平线功能的内部实现是先 get 了当前行进行数据处理、计算再把算好的结果 set 进去取代以前的内容。所以这一行的内容都被替换了只是看上去一样罢了。
我也验证了这个想法用浏览器的调试工具把之前的 element 存下来了。和之后的 element 进行比较果然是不相等的 前后已经不是同一个元素了 这也说明在上一部分 “给数据标签添加事件” 中给具体元素绑定事件是不可行的很容易就会因为 cleanup 而丢失。只能采用给整个 editor.body 绑定事件的做法。
丢失事件的问题用 “给 body 整体绑事件” 就解决了下面该说丢失自定义属性的问题了。
我原本想看 tinymce 的源码看看它 cleanup 时用的什么规则但找了挺久没找到。我决定换个思路想到 tinymce 自动清理应该是为了规范数据所以它不认 ”乱七八糟“ 的自定义属性那正规的属性他就应该认了吧。我试了试 HTML5 提供的自定义属性语法
input typebutton value[年度] data-biz-typeglobalParams data-biz-id1成功tinymce 接受这两个属性了
