目录

🌟前言🌟需求🌟效果预览🌟安装wangEditor富文本编辑器🌟拖拽API🌟wangEditor富文本编辑器所用到的API🌟写在最后🌟JSON包里写函数，关注博主不迷路

🌟前言

哈喽小伙伴们，本期文章为大家说一下最近项目里实现的一个自定义打印模版的功能；一起来看下吧。

🌟需求

打印的内容后端可配置；可以拖拽任意标签；样式可自定义，并内置相对应模本最终数据传给后端，后端通过特定字符去获取数据，并返回给前端显示

通过以上需求，我最终确定了富文本编辑器的方式，配合拖拽API 来实现

🌟效果预览

vue实现基于富文本编辑器的打印模版设置功能（支持拖拽）

🌟安装wangEditor富文本编辑器

wangEditor富文本编辑器-官网

官网里有详细介绍，大家自行翻阅

🌟拖拽API

想实现拖拽有几个问题需要考虑：

谁可以拖拽（拖拽目标）；拖拽区域（哪里可以放下拖拽目标）；拿到拖拽目标的一些数据。

draggable=“true”–可以拖拽

在你需要拖拽的目标上写上写个。即可实现拖拽

<code> <el-tag size="small" style="margin: 2px;cursor: move" draggable="true">拖拽目标</el-tag>code>

@dragstart–开始拖拽

本事件可以监听到开始拖拽的事件，并且可以拿到目标物里的信息

<el-tag

size="small" code>

style="margin: 2px;cursor: move" code>

draggable="true" code>

@dragstart.native="(event) => onDragStart(event,others)">code>

拖拽目标

</el-tag>

onDragStart(event, item) {

console.log('开始拖拽', event, item)

// 获取目标物

let draggableItem = event.target;

draggableItem.key = item.key

// 设置内容 视频当中为例：价格： ${价格}

event.dataTransfer.setData("text/plain", draggableItem.innerText+ ':'+ ' ' +'${' +draggableItem.innerText + '}');

},

把文本处理成 $ {} 这样，是为了传给后端，后端方便处理数据，后端通过 $ {} 来截取并查询正确的数据，并在打印的时候拼接好模版和真实数据。