phoben 发表于 2024-3-28 21:12:52

富文本编辑器终于可以支持"动态模板"了,实现教程

本帖最后由 phoben 于 2024-4-1 10:49 编辑

功能亮点:
1. 原生API实现内置按钮和功能,可以朝编辑器插入自定义参数、表格;
2. 后端配套插件实现替换编辑器内的参数、表格数据;
3. 个性化交互,动态参数和表格支持自定义样式、名称等,生成效果保持一致;



你有没有遇到下列场景:
一、制作邮件、合同等内容模板,需要固定格式,但部分内容需要无损替换?
二、需要用户在网页自主完成模板设计,而不需要重新开发和发布程序?


解决方案:
这次给大家带来一个全新的插件包(已提交应用市场)来解决这个问题,不但使用体验更好,而且新人也容易上手。
该插件名为“富文本编辑器增强”,内含多款配套插件工具,采用与官方一致的API,轻量、稳定、好用。有了它您可以轻松使用富文本编辑器来创建“动态模板”内容,插件巧妙的将模板参数融入到编辑器中,并可以实时进行解析。


https://mallcdn.grapecity.com.cn/525fcdb2c6e4920c85addfaaf8d24d96添加动态参数https://mallcdn.grapecity.com.cn/f90fe8270ae9119adf14bd1d77a40b33

添加动态表格https://mallcdn.grapecity.com.cn/eb661f3ffe843a942e2ad17c629e3992
https://mallcdn.grapecity.com.cn/a144909be82d40edaff4bd15fa3d1e2c录屏演示:https://mallcdn.grapecity.com.cn/717e35d44130456c11d2336f78b8fc6a

实现步骤
1、朝富文本编辑器里签入自定义按钮,用于朝内容中插入“参数”;
2、解析HTML内容,将所有参数提取出来,并完成无损替换;
3、为富文本编辑器增加若干事件,用于捕捉用户行为;


上方提到的几个插件,都已经打包成一个插件,在应用市场搜索“富文本编辑器增强”即可找到。
传送门:富文本编辑器增强插件包 - 葡萄城市场 (grapecity.com.cn)



视频教程
文字描述可能不太全面,这里有配套视频使用方法 请移步B站观看:
传送门:活字格中利用富文本编辑器制作动态模板-超哥_哔哩哔哩_bilibili
注意:新版本已更新对数据表格的支持,视频中未包含此部分讲解。


总结
通过增加插件,我们可以无损的在富文本编辑器中添加自定义按钮,用户通过点击按钮可以插入参数,参数是彩色标签块显示,且不允许修改内容,确保参数的规范性。最后通过插件工具解析参数并完成替换。

chinameng 发表于 2024-3-28 22:24:13

大佬 好牛,这好东西!!!!!!!!

roran 发表于 2024-3-29 08:59:01

超牛!!!!!!!!!!!!!!

137294886 发表于 2024-3-29 09:14:43

大佬 好牛,这好东西

phoben 发表于 2024-3-29 09:22:48

chinameng 发表于 2024-3-28 22:24
大佬 好牛,这好东西!!!!!!!!

能用得着就好 :lol

小侠米 发表于 2024-3-29 12:00:38

phoben 发表于 2024-3-29 09:22
能用得着就好

像采购合同的明细,就是表格多行记录也可以用吗

phoben 发表于 2024-3-29 12:21:42

小侠米 发表于 2024-3-29 12:00
像采购合同的明细,就是表格多行记录也可以用吗

目前版本不支持动态的表格,只能做静态表格

qweqwe123 发表于 2024-3-30 08:11:24

用服务端的替换提示Unable to cast object of type 'System.Dynamic.ExpandoObject' to type 'System.Collections.Generic.Dictionary`2'.

phoben 发表于 2024-3-30 10:46:37

qweqwe123 发表于 2024-3-30 08:11
用服务端的替换提示Unable to cast object of type 'System.Dynamic.ExpandoObject' to type 'System.Col ...

你给的替换内容不对,看下视频教程

phoben 发表于 2024-4-1 01:46:37

更新版本了,周一应该会审核通过,支持动态表格的模板定义了
页: [1] 2 3
查看完整版本: 富文本编辑器终于可以支持"动态模板"了,实现教程