• 一款好用的富文本编辑器(wangeditor)运用 Vue3+Springboot

    目录

    ​

    🧰项目功能介绍🧰

    🚕资源介绍🚕

    🛺swagger接口文档🛺

    🚙编辑器功能展示🚙

    🛻项目目录讲解🛻

    🎨前端🎨

    🌃后端🌃

    🚌部分代码展示🚌

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

    🧋后端 文章查询保存 serviceImpl🧋

    🚒功能演示 源码分享🚒

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

    🧰项目功能介绍🧰

    前后端分离

         🍳前端 vue3+typescript+wangEditor+axios🍳      

    🥨 后端 springboot+mybatis-plus+swagger🥨

    🥐项目精简 不引入过多框架🥐

    🌯1. 自定义图片上传🌯
    🍗2. 自定义视频上传🍗

    (wangEditor 有默认配置 但要返回response body有格式要求 故自己编写后端自定义实现) 
    🍖3. 后端 对于html的处理 转义安全字符 解义🍖
    🧀4. 文章的保存🧀
    🥗5. 文章的查询🥗

    🚕资源介绍🚕

    🛺swagger接口文档🛺

      

    🚙编辑器功能展示🚙

    🛻项目目录讲解🛻

    🎨前端🎨

    🌃后端🌃

    🚌部分代码展示🚌

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

    1. <script setup lang="ts">
    2. import "@wangeditor/editor/dist/css/style.css"; // 引入 css
    3. import {
    4.   onBeforeUnmount,
    5.   ref,
    6.   shallowRef,
    7.   onMounted,
    8.   reactive
    9. } from "vue";
    10. import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
    11. import { IEditorConfig } from "@wangeditor/core";
    12. import { uploadPic, deleteFile, uploadVideo, toSaveArticleAndFile ,toQueryArticleApi} from "./request/api";
    13. import { resourceUrl } from "./common/path";
    14. import {
    15.   IWangEPic,
    16.   IWangEVid,
    17.   IRichData,
    18.   IToSaveAricle,
    19.   IReQueryArticle
    20. } from "./pageTs/index";
    21. //图片 视频 类型声明
    22. const richData = reactive(new IRichData());
    23. const saveArticleData=reactive(new IToSaveAricle());
    24. // 编辑器实例，必须用 shallowRef
    25. const editorRef = shallowRef();
    26.  
    27. // 内容 HTML
    28. const valueHtml = ref("");
    29.  
    30. // 模拟 axios 异步获取内容
    31. onMounted(() => {
    32.   setTimeout(() => {
    33.     valueHtml.value = "
      大大帅将军 小小怪下士
      "      ;
    34.   }, 1500);
    35. });
    36. //编辑器初始化
    37. const toolbarConfig = {};
    38. const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} };
    39. // 编辑器创建完毕时的回调函数。
    40. const handleCreated = (editor: any) => {
    41.   editorRef.value = editor; // 记录 editor 实例，重要！
    42. };
    43. //图片类型定义
    44. type InsertPicType = (url: string) => void;
    45. //图片上传
    46. editorConfig.MENU_CONF!["uploadImage"] = {
    47.   // 自定义上传 InsertFnType
    48.   async customUpload(richPic: File, insertFn: InsertPicType) {
    49.     //图片上传接口调用
    50.     uploadPic(richPic).then((res) => {
    51.       console.log(res.data);
    52.       //返回给编辑器 图片地址
    53.       insertFn(resourceUrl + res.data);
    54.       //上传成功后 记录图片地址
    55.       richData.preFileList.push(res.data);
    56.     });
    57.   },
    58. };
    59. //上传视频 url 视频地址 poster 视频展示图片地址
    60. type InsertVidType = (url: string, poster: string) => void;
    61. editorConfig.MENU_CONF!["uploadVideo"] = {
    62.   // 自定义上传
    63.   async customUpload(file: File, insertFn: InsertVidType) {
    64.     //视频上传接口调用
    65.     uploadVideo(file).then((res) => {
    66.       console.log(res.data);
    67.       //返回给编辑器 图片地址
    68.       insertFn(resourceUrl + res.data, "/src/assets/bg.png");
    69.       //上传成功后 记录视频地址
    70.       richData.preFileList.push(res.data);
    71.     });
    72.   },
    73. };
    74. // 组件销毁时，也及时销毁编辑器
    75. onBeforeUnmount(() => {
    76.   const editor = editorRef.value;
    77.   if (editor == null) return;
    78.   editor.destroy();
    79. });
    80. //保存文章
    81. const toSaveArcitle = () => {
    82.   const editor = editorRef.value;
    83.   // 1.获取最后保存的文章图片 视频 list数组
    84.   editor.getElemsByType("image").forEach((item: IWangEPic) => {
    85.     //排除掉外部资源
    86.     if(item.src.indexOf(resourceUrl) !=-1){
    87.       richData.articleFileUrl.push(item.src);
    88.     }
    89.   });
    90.   editor.getElemsByType("video").forEach((item: IWangEVid) => {
    91.     if(item.src.indexOf(resourceUrl) !=-1){
    92.       richData.articleFileUrl.push(item.src);
    93.     }
    94.   });
    95.   //2.对于全部图片 视频 对比 获取已删除图片
    96.   richData.preFileList.forEach((item) => {
    97.     //articleFileList 数组展示的是图片完全路径
    98.     //preFileList 保存的是图片部分路径
    99.     //所以要通过添加resourceUrl常量进行对比
    100.     if (richData.articleFileUrl.indexOf(resourceUrl + item) == -1) {
    101.       //保存到需删除的数组中
    102.       richData.deleteFileList.push(item);
    103.     }else{
    104.       //保存需要存入数据库的数组
    105.       saveArticleData.articleFileUrl.push(item);
    106.     }
    107.   });
    108.  
    109.   //3.调后台接口 删除图片 视频
    110.   deleteFile(richData.deleteFileList).catch((err) => {
    111.     console.log(err.msg);
    112.   });
    113.   //4.调后台接口保存文章
    114.   //参数赋值
    115.   saveArticleData.articleName=richData.articleName;
    116.   saveArticleData.articleAuthor=richData.articleAuthor;
    117.   saveArticleData.articleContent=valueHtml.value;
    118.   toSaveArticleAndFile(saveArticleData).then(res=>{
    119.     console.log("保存文章成功");
    120.     //保存文章后 所有数据清空
    121.     valueHtml.value="";
    122.     richData.articleAuthor="";
    123.     richData.articleName="";
    124.   })
    125. };
    126. //文章查询
    127. const queryArticle = reactive(new IReQueryArticle());
    128. const toQueryArticle=()=>{
    129.   toQueryArticleApi(1566944471915032576n).then(res=>{
    130.     console.log(res.data);
    131.     queryArticle.articleAuthor=res.data.articleAuthor;
    132.     queryArticle.articleContent=res.data.articleContent;
    133.     queryArticle.articleId=res.data.articleId;
    134.     queryArticle.gmtUpdate=res.data.gmtUpdate;
    135.     queryArticle.articleName=res.data.articleName;
    136.   })
    137. }
    138. script>
    139.  
    140. <template>
    141.   <div>
    142.     文章名称:<input
    143.       class="demoInput"
    144.       type="text"
    145.       v-model="richData.articleName"
    146.       placeholder="请输入文章名称"
    147.     />
    148.   div>
    149.   <div>
    150.     文章作者:<input
    151.       class="demoInput"
    152.       type="text"
    153.       v-model="richData.articleAuthor"
    154.       placeholder="请输入文章作者"
    155.     />
    156.   div>
    157.   <div style="border: 1px solid #ccc">
    158.     <Toolbar
    159.       style="border-bottom: 1px solid #ccc"
    160.       :editor="editorRef"
    161.       :defaultConfig="toolbarConfig"
    162.       :mode="richData.model"
    163.     />
    164.     <Editor
    165.       style="height: 550px; overflow-y: hidden"
    166.       v-model="valueHtml"
    167.       :defaultConfig="editorConfig"
    168.       :mode="richData.model"
    169.       @onCreated="handleCreated"
    170.     />
    171.   div>
    172.   <button @click="toSaveArcitle">保存button>
    173.   <div>==========================================div>
    174.   <button @click="toQueryArticle">查询文章button>
    175.   <div v-if="queryArticle!=null">
    176.     <h1>{{queryArticle.articleName}}h1>
    177.   <h5>{{queryArticle.articleAuthor}}h5>
    178.   <h6>{{queryArticle.gmtUpdate}}h6>
    179.   <div  v-html="queryArticle.articleContent">
    180.     div>
    181.   div>
    182.  
    183. template>
    184.  
    185. <style lang="scss" scoped>
    186. .demoInput {
    187.   outline-style: none;
    188.   border: 1px solid #ccc;
    189.   border-radius: 3px;
    190.   padding: 13px 14px;
    191.   width: 320px;
    192.   font-size: 14px;
    193.   font-weight: 320;
    194.   margin: 20px;
    195.   font-family: "Microsoft soft";
    196. }
    197. .demoInput:focus {
    198.   border-color: #66afe9;
    199.   outline: 0;
    200.   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    201.     0 0 8px rgba(102, 175, 233, 0.6);
    202.   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    203.     0 0 8px rgba(102, 175, 233, 0.6);
    204. }
    205. style>

    🧋后端 文章查询保存 serviceImpl🧋

    1. /**
    2.  * 
    3.  *  服务实现类
    4.  * 
    5.  *
    6.  * @author 小王八
    7.  * @since 2022-09-05
    8.  */
    9. @Service
    10. public class ArticleServiceImpl extends ServiceImpl implements ArticleService {
    11.     @Autowired
    12.     private ArticleMapper articleMapper;
    13.     @Autowired
    14.     private ArticleFileService articleFileService;
    15.  
    16.     @Override
    17.     @Transactional(rollbackFor = Exception.class)
    18.     public String toSaveArticle(ToSaveArticle toSaveArticle) {
    19.         //1.生成文章id 插入图片article_id
    20.         long articleId = IdUtil.getSnowflakeNextId();
    21.         //2.文章内容转换
    22.         //过滤HTML文本，防止XSS攻击 可用 会清理掉html元素标签 只留下文本
    23.         //String articleContent = HtmlUtil.filter(toSaveArticle.getArticleContent());
    24.         //html=>安全字符
    25.         String escape = HtmlUtil.escape(toSaveArticle.getArticleContent());
    26.         //3.文章入数据库
    27.         save(new Article()
    28.                 .setPkId(articleId)
    29.                 .setArticleName(toSaveArticle.getArticleName())
    30.                 .setArticleAuthor(toSaveArticle.getArticleAuthor())
    31.                 .setArticleContent(escape)
    32.         );
    33.         //4.文章资源入数据库
    34.         if (ObjectUtil.isNotEmpty(toSaveArticle.getArticleFileUrl())){
    35.             articleFileService.toSaveFile(toSaveArticle.getArticleFileUrl(),articleId);
    36.         }
    37.         return "文章保存成功";
    38.     }
    39.  
    40.     @Override
    41.     public ReShowArticle toShowArticle(Long articleId) {
    42.         return ReShowArticle.toReShow(getById(articleId));
    43.     }

    🚒功能演示 源码分享🚒

     关于功能的动态详细展示 

    我专门录制的一期B站视频 作为讲解

    🥝 具体源码🥝

    放在视频简介(gitee 前后端地址都有)

    【一款好用的富文本编辑器 wangEditor 前后端 vue3+springboot】 

    B站视频链接

    🥰制作不易  还望大家三连支持🥰

  • 相关阅读:
    SpringBoot整合RabbitMQ及其原理分析
    GET 请求和 POST 请求的区别和使用
    探索技术之上科技伦理，阿里巴巴成立科技伦理治理委员会
    【项目】仿muduo库One Thread One Loop式主从Reactor模型实现高并发服务器（TcpServer板块）
    C语言利用计算机找系统的最小通路集的算法
    java（抽象内部类）笔记
    视频剪辑软件Corel VideoStudio 会声会影2023新功能介绍及安装激活教程
    JavaScript数据类型BigInt实践之id数值太大，导致前后端交互异常
    【Golang】gin客户端动态加载Html格式文件
    动态链接库的使用记录
  • 原文地址：https://blog.csdn.net/Little___Turtle/article/details/126716931