解决Vue中使用wangEditor富文本编辑器复制粘贴word文档携带内容样式文本问题

M_Snow

720人浏览 · 2024-04-07 09:49:37

M_Snow · 2024-04-07 09:49:37 发布

在Vue项目中，我们可以使用wangeditor编辑器来实现粘贴Word中的图片和文字HTML自动添加到编辑器中的功能。首先，需要在项目中安装wangeditor编辑器，然后配置好图片上传的接口，以便将图片自动上传到服务器。

当用户在Word中复制图片和文字后，粘贴到编辑器中时，图片会自动上传到服务器，同时图片和文字HTML会自动添加到编辑器中。

完整示例

https://gitee.com/xproer/wordpaster-vue-wang-editor

1.复制插件文件
在这里插入图片描述

安装jquery

npm install jquery

2.导入组件
在这里插入图片描述

初始化WordPaster组件
在这里插入图片描述

测试前请配置图片上传接口并测试成功

接口测试：http://www.ncmem.com/doc/view.aspx?id=61f361025c9247098f6a15c3dfc53db5

接口返回JSON格式参考：

http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

为wangEditor编辑器添加按钮
在这里插入图片描述

整合效果：

在这里插入图片描述

乐奇 Rokid 开放社区

更多推荐

使用Rokid AIUI做了一个童年推箱子游戏

乐奇 Rokid 开放社区

基于 AIUI 框架的眼镜端坐姿监测智能体：WorkerMonitor 设计与实现

基于AIUI框架，设计并实现眼镜端坐姿监测智能体WorkerMonitor。通过加速度传感器实时采集头部姿态数据，结合校准偏移量进行三态分类（正常/警示/异常），每秒采样一次，累计时长并低打扰提醒。每2小时调用LLM生成个性化健康建议，支持自动工作/休息切换与隐藏模式，兼顾隐私与体验。项目采用Ink单文件页面结构，实现极简交互与可持续反馈，为长期伏案者提供无感式颈椎健康管理方案。