富文本编辑器组件 使用说明

介绍

1. 本组件基于 tinymce 和 @wangeditor/editor 实现，可以实现富文本编辑器的功能，包括图片上传、粘贴上传、代码块、表格、预览、保存等功能。

所需安装依赖

npm i element-plus
npm i tinymce

使用

<template>
  <!-- showVerifyBtn:boolean  是否显示验证按钮，默认false -->
  <!-- editor:'tinyEditor'|'wangEditor' 富文本编辑器类型，默认tinyEditor -->
  <!-- uploadOption: {url:string, before:function, after:function} 上传配置，url为上传接口地址，before为上传前的钩子函数，after为上传后的钩子函数，before函数接收一个formData参数，after函数接收一个response参数，返回一个{success:boolean,message:'', url:string}对象，其中success为上传成功与否,message为上传失败信息(可选)，url为上传成功后的地址 -->
  <!-- v-model:html 富文本编辑器内容，双向绑定 -->
  <!-- v-model:text 富文本编辑器纯文本内容，双向绑定 -->
  <!-- @verify:事件，showVerifyBtn为true时生效，点击按钮触发，参数 {html:html, text:text}  -->
  <!-- selectFile：{show:boolean,apiOption:Object} 选择文件配置，show:是否显示按钮，apiOption：选择器api配置 -->
  <RichText showVerifyBtn editor="wangEditor" :uploadOption="uploadOption" :selectFile="selectFile" v-model:html="html"  v-model:text="text" @verify="verify"></RichText>
</template>

<script setup>

// 引入富文本编辑器组件
import RichText from '@/components/RichText/RichText.vue';

const html = ref('');
const text = ref('');

const uploadOption = reactive({
  url : 'http://localhost:3000/upload', // 上传接口地址
  before:function(formData){
    return formData; // 可对formData做处理，比如添加token
  }, 
  after:function(response){
    return {success:true,message:'', url:response.data.url}
  }
})

const selectFile = reactive({
  show:true,
  apiOption:{
    addFolder:'/meta/FileManage/addFolder',             // 新建文件夹
    getFileList: '/meta/FileManage/getFileList',         // 获取文件列表
    getShareList: '/meta/FileManage/getShareList',        // 获取分享列表
    getFolderList: '/meta/FileManage/getFolderList',      // 获取文件夹列表
    deleteFile: '/meta/FileManage/deleteFile',                     // 删除文件
    deleteFileList:'/meta/FileManage/deleteFile',                 // 批量删除文件
    moveFile:'/meta/FileManage/moveFolderOrFile',                 // 移动文件
    updateFolderName: '/meta/FileManage/updateFolderName',       // 修改文件夹名称

    getTagList: '/meta/FileManage/getTagList',             // 获取标签列表
    addTag: '/meta/FileManage/setTag',                       // 新增标签
    deleteTag: '/meta/FileManage/setTag',                     // 删除标签
    updateTag: '/meta/FileManage/setTag',                       // 修改标签
    addFileToTag: '/meta/FileManage/addFileToTag',                // 给文件添加标签

    shareFile: '/meta/FileManage/shareFile',                      // 分享文件
  }
})

//点击确认按钮触发的函数
const verify = (formData) => {
  console.log('验证formData', formData)
}