wangEditor – 支持word上传的富文本编

wangEditor – 支持word上传的富文本编辑器

angEditor – 支持word上传的富文本编辑器，WANGEDITOR实现WORD图片自动转存，JAVA中将WORD转换为HTML导入到WANGEDITOR编辑器中（解决图片问题，样式，非常完美），wangEditor如何导入word文档，如何实现导入WORD文档到WANGEDITOR编辑器中？WANGEDITOR导入WORD文档 WANGEDITOR WORD导入插件，HTML富文本编辑器导入WORD，Web富文本编辑器导入WORD，WANGEDITOR富文本编辑器导入WORD，WANGEDITOR导入WORD，WANGEDITORWORD导入编辑，wangEditor集成word导入功能，

之前在网上也搜索过相关资料，

网上一般的方案都是在JS中解压ZIP，然后解析文档。

后端是用的JAVA，SpringBoot框架，实际上前端在集成的时候是不关心后端具体是用什么语言实现的。

它这个版本有几个wangEditor3,wangEditor4,wangEditor5，好用的是就3和4，5不支持插入HTML。但是用户用插入HTML这个功能用的比较多。

vue-cli-wangEditor3,vue3-cli-wangEditor4集成word导入功能。在VUE框架下面集成了WORD导入功能。

用户选择word文件后，自动转换成html,自动将word里面的图片上传到服务器中，自动将HTML添加到编辑器中。

主要的方案就是提供一个转换接口，转换接口使用RESTful协议，这样的话兼容性更好一点，其它的平台用起来的话更方便简单一点，而且测试起来也方便。

现有项目需要为TinyMCE增加导入word文件的功能，导入后word文件里面的图片自动上传到服务器中，返回图片和文字HTML，word里面的文本样式保留

用户一般在发新闻和发文章时用到，算是一个高频使用功能，用户体验上来讲确实是很好，和以前的发新闻或者发文章的体验比起来要方便许多，用户用的更爽。1.下载示例

https://gitee.com/xproer/zyoffice-vue3-cli-wang-editor4

2.引入组件

3.添加按钮

4.配置转换接口

效果

开发文档：https://drive.weixin.qq.com/s?k=ACoAYgezAAwsDazDKJ

产品比较：https://drive.weixin.qq.com/s?k=ACoAYgezAAwh8oq8Zf

产品源代码：https://drive.weixin.qq.com/s?k=ACoAYgezAAwjJM8412

报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwsfyDdrf

给大家分享一个好用的富文本编辑器

项目功能介绍

前后端分离
前端 vue3+typescript+wangEditor+axios
后端 springboot+mybatis-plus+swagger
项目精简不引入过多框架
1. 自定义图片上传
2. 自定义视频上传
(wangEditor 有默认配置但要返回response body有格式要求故自己编写后端自定义实现)
3. 后端对于html的处理 转义安全字符 解义
4. 文章的保存
5. 文章的查询

资源介绍

swagger接口文档

编辑器功能展示

项目目录讲解

前端

后端

部分代码展示

前端富文本编辑器页面App.vue

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import {
  onBeforeUnmount,
  ref,
  shallowRef,
  onMounted,
  reactive
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IEditorConfig } from "@wangeditor/core";
import { uploadPic, deleteFile, uploadVideo, toSaveArticleAndFile ,toQueryArticleApi} from "./request/api";
import { resourceUrl } from "./common/path";
import {
  IWangEPic,
  IWangEVid,
  IRichData,
  IToSaveAricle,
  IReQueryArticle
} from "./pageTs/index";
//图片 视频 类型声明
const richData=reactive(new IRichData());
const saveArticleData=reactive(new IToSaveAricle());
// 编辑器实例，必须用 shallowRef
const editorRef=shallowRef();

// 内容 HTML
const valueHtml=ref("");

// 模拟 axios 异步获取内容
onMounted(()=> {
  setTimeout(()=> {
    valueHtml.value="<p>大大帅将军 小小怪下士</p>";
  }, 1500);
});
//编辑器初始化
const toolbarConfig={};
const editorConfig: Partial<IEditorConfig>={ MENU_CONF: {} };
// 编辑器创建完毕时的回调函数。
const handleCreated=(editor: any)=> {
  editorRef.value=editor; // 记录 editor 实例，重要！
};
//图片类型定义
type InsertPicType=(url: string)=> void;
//图片上传
editorConfig.MENU_CONF!["uploadImage"]={
  // 自定义上传 InsertFnType
  async customUpload(richPic: File, insertFn: InsertPicType) {
    //图片上传接口调用
    uploadPic(richPic).then((res)=> {
      console.log(res.data);
      //返回给编辑器 图片地址
      insertFn(resourceUrl + res.data);
      //上传成功后 记录图片地址
      richData.preFileList.push(res.data);
    });
  },
};
//上传视频 url 视频地址 poster 视频展示图片地址
type InsertVidType=(url: string, poster: string)=> void;
editorConfig.MENU_CONF!["uploadVideo"]={
  // 自定义上传
  async customUpload(file: File, insertFn: InsertVidType) {
    //视频上传接口调用
    uploadVideo(file).then((res)=> {
      console.log(res.data);
      //返回给编辑器 图片地址
      insertFn(resourceUrl + res.data, "/src/assets/bg.png");
      //上传成功后 记录视频地址
      richData.preFileList.push(res.data);
    });
  },
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(()=> {
  const editor=editorRef.value;
  if (editor==null) return;
  editor.destroy();
});
//保存文章
const toSaveArcitle=()=> {
  const editor=editorRef.value;
  // 1.获取最后保存的文章图片 视频 list数组
  editor.getElemsByType("image").forEach((item: IWangEPic)=> {
    //排除掉外部资源
    if(item.src.indexOf(resourceUrl) !=-1){
      richData.articleFileUrl.push(item.src);
    }
  });
  editor.getElemsByType("video").forEach((item: IWangEVid)=> {
    if(item.src.indexOf(resourceUrl) !=-1){
      richData.articleFileUrl.push(item.src);
    }
  });
  //2.对于全部图片 视频 对比 获取已删除图片
  richData.preFileList.forEach((item)=> {
    //articleFileList 数组展示的是图片完全路径
    //preFileList 保存的是图片部分路径
    //所以要通过添加resourceUrl常量进行对比
    if (richData.articleFileUrl.indexOf(resourceUrl + item)==-1) {
      //保存到需删除的数组中
      richData.deleteFileList.push(item);
    }else{
      //保存需要存入数据库的数组
      saveArticleData.articleFileUrl.push(item);
    }
  });

  //3.调后台接口 删除图片 视频
  deleteFile(richData.deleteFileList).catch((err)=> {
    console.log(err.msg);
  });
  //4.调后台接口保存文章
  //参数赋值
  saveArticleData.articleName=richData.articleName;
  saveArticleData.articleAuthor=richData.articleAuthor;
  saveArticleData.articleContent=valueHtml.value;
  toSaveArticleAndFile(saveArticleData).then(res=>{
    console.log("保存文章成功");
    //保存文章后 所有数据清空
    valueHtml.value="";
    richData.articleAuthor="";
    richData.articleName="";
  })
};
//文章查询
const queryArticle=reactive(new IReQueryArticle());
const toQueryArticle=()=>{
  toQueryArticleApi(1566944471915032576n).then(res=>{
    console.log(res.data);
    queryArticle.articleAuthor=res.data.articleAuthor;
    queryArticle.articleContent=res.data.articleContent;
    queryArticle.articleId=res.data.articleId;
    queryArticle.gmtUpdate=res.data.gmtUpdate;
    queryArticle.articleName=res.data.articleName;
  })
}
</script>

<template>
  <div>
    文章名称:<input
      class="demoInput"
      type="text"
      v-model="richData.articleName"
      placeholder="请输入文章名称"
    />
  </div>
  <div>
    文章作者:<input
      class="demoInput"
      type="text"
      v-model="richData.articleAuthor"
      placeholder="请输入文章作者"
    />
  </div>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="richData.model"
    />
    <Editor
      style="height: 550px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="richData.model"
      @onCreated="handleCreated"
    />
  </div>
  <button @click="toSaveArcitle">保存</button>
  <div>==========================================</div>
  <button @click="toQueryArticle">查询文章</button>
  <div v-if="queryArticle!=null">
    <h1>{{queryArticle.articleName}}</h1>
  <h5>{{queryArticle.articleAuthor}}</h5>
  <h6>{{queryArticle.gmtUpdate}}</h6>
  <div  v-html="queryArticle.articleContent">
    </div>
  </div>

</template>

<style lang="scss" scoped>
.demoInput {
  outline-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 13px 14px;
  width: 320px;
  font-size: 14px;
  font-weight: 320;
  margin: 20px;
  font-family: "Microsoft soft";
}
.demoInput:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}
</style>

后端文章查询保存 serviceImpl

/**
 * <p>
 *  服务实现类
 * </p>
 *
 * @author 小王八
 * @since 2022-09-05
 */
@Service
public class ArticleServiceImpl extends ServiceImpl<ArticleMapper, Article> implements ArticleService {
    @Autowired
    private ArticleMapper articleMapper;
    @Autowired
    private ArticleFileService articleFileService;

    @Override
    @Transactional(rollbackFor=Exception.class)
    public String toSaveArticle(ToSaveArticle toSaveArticle) {
        //1.生成文章id 插入图片article_id
        long articleId=IdUtil.getSnowflakeNextId();
        //2.文章内容转换
        //过滤HTML文本，防止XSS攻击 可用 会清理掉html元素标签 只留下文本
        //String articleContent=HtmlUtil.filter(toSaveArticle.getArticleContent());
        //html=>安全字符
        String escape=HtmlUtil.escape(toSaveArticle.getArticleContent());
        //3.文章入数据库
        save(new Article()
                .setPkId(articleId)
                .setArticleName(toSaveArticle.getArticleName())
                .setArticleAuthor(toSaveArticle.getArticleAuthor())
                .setArticleContent(escape)
        );
        //4.文章资源入数据库
        if (ObjectUtil.isNotEmpty(toSaveArticle.getArticleFileUrl())){
            articleFileService.toSaveFile(toSaveArticle.getArticleFileUrl(),articleId);
        }
        return "文章保存成功";
    }

    @Override
    public ReShowArticle toShowArticle(Long articleId) {
        return ReShowArticle.toReShow(getById(articleId));
    }

功能演示源码分享

关于功能的动态详细展示
我专门录制的一期B站视频 作为讲解
具体源码
放在视频简介(gitee 前后端地址都有)
【一款好用的富文本编辑器 wangEditor 前后端 vue3+springboot】
B站视频链接
制作不易还望大家三连支持

TML富文本编辑器导入WORD，Web富文本编辑器导入WORD，WANGEDITOR富文本编辑器导入WORD，WANGEDITOR导入WORD，WANGEDITORWORD导入编辑，wangEditor集成word导入功能，

它这个版本有几个wangEditor3,wangEditor4,wangEditor5，好用的是就3和4，5不支持插入HTML。但是用户用插入HTML这个功能用的比较多。

vue-cli-wangEditor3,vue3-cli-wangEditor4集成word导入功能。在VUE框架下面集成了WORD导入功能。

用户选择word文件后，自动转换成html,自动将word里面的图片上传到服务器中，自动将HTML添加到编辑器中。

现有项目需要为TinyMCE增加导入word文件的功能，导入后word文件里面的图片自动上传到服务器中，返回图片和文字HTML，word里面的文本样式保留

用户一般在发新闻和发文章时用到，算是一个高频使用功能，用户体验上来讲确实是很好，和以前的发新闻或者发文章的体验比起来要方便许多，用户用的更爽。

1.下载示例

https://gitee.com/xproer/zyoffice-vue3-cli-wang-editor4

2.引入组件

3.添加按钮

4.配置转换接口

效果

在线咨询

上一篇：JavaScript开发工具WebStorm使用教程
下一篇：JavaScript实现表单验证

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商