Vue3-wangeditor富文本编辑器的使用

wangeditor官网:用于 Vue React | wangEditor开源 Web 富文本编辑器，开箱即用，配置简单https://www.wangeditor.com/v5/for-frame.html#vue3

按照官网提示安装 两个都要安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

下面直接把富文本的组件放在下面:

<!-- wangeditor富文本编辑器 -->
<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 300px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" />
  </div>
</template>
<script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { init } from "snabbdom";

export default {
  components: { Editor, Toolbar },
  props: {
    message: {
      type: String,
      default: '<p><br></p>'
    }
  },
  setup(props, { emit }) {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();

    // 内容 HTML
    const valueHtml = ref("<p><br></p>");
    console.log(valueHtml, "valueHtmlvalueHtmlvalueHtmlvalueHtml");
    emit('valueHtml', valueHtml)
    // 模拟 ajax 异步获取内容
    onMounted(() => {
      console.log("props.message", props.message);
      valueHtml.value = props.message
    });
    valueHtml.value = props.message
    function init(data) {
      console.log("data", data)
      valueHtml.value = data

    }
    watch(valueHtml, (val) => {
      console.log(val, "val");
      emit("BoxValue", val)
    })
    const toolbarConfig = {
        //删除工具栏中不需要的选项比如视频就是group-video
      excludeKeys: [
        'headerSelect',
        'italic',
        'group-more-style',// 排除菜单组，写菜单组 key 的值即可
        "group-video"
      ]
    };
    const editorConfig = {
      placeholder: "请输入内容...",
      MENU_CONF: {},

    };
    // let token=localStorage.getItem('token')
    // editorConfig.uploadHeaders = {'authentication':'111'};
    editorConfig.MENU_CONF["uploadImage"] = {
      // 上传图片的配置
      server: "这里放你上传图片的接口地址",
      fieldName: "file",//参数类型要写成这样要不然报错400
      //获取服务器返回的http格式图片地址插入到富文本中
      customInsert(res, insertFn) {
        // JS 语法
        // res 即服务端的返回结果
        console.log(res);
        // 从 res 中找到 url alt href ，然后插入图片
        let url = res.fileUrl
        insertFn(url);
      },
    };

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });

    const handleCreated = (editor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    };

    return {
      editorRef,
      valueHtml,
      mode: "default", // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated,
      init
    };
  },
};
</script>    

用到了子传父，这里vue3和vue2传值方法不一样，不会用的话可以百度

 父组件只粘贴关于富文本的代码:

先从html开始（我的顺序是这样，接下来只要粘到你的父组件中就可以）

<MyEditor   :message="form.message"  @BoxValue="BoxValue"  ref="editorRef" />
   <!-- form.message是我要传给后端的参数 -->

//先定义
const editorRef=ref(null)

    function BoxValue(result){
      console.log(result);
      form.value.message=result
    }

//修改步骤中  
if(editorRef.value){
    editorRef.value.init(form.value.message)
  }

 wangeditor富文本做校验:

const validateMessage = (rule, value, callback) => {
  console.log("value",value);
  if (value === '<p><br></p>') {

    callback(new Error('内容不能为空'))
  }else if(value === undefined){
    callback(new Error('内容不能为空'))
  } else if(value === ''){
    callback(new Error('内容不能为空'))
  }
  else {
    callback()
  }
}


//没有粘整个所以粘的时候需要看清楚
  rules: {
    message:[
      { required: true,validator:validateMessage, trigger: "blur" },
    ]
  },

 工具栏配置---博主@我的代码永远没有bug--wangEdtior查看工具栏配置，隐藏工具栏配置_我的代码永没有bug的博客-CSDN博客_wangeditor隐藏工具栏