富文本编辑器

基本的用法： 

代码都是从这里一点一点扣的  打开进去 写着重要都要加 

下面完整版 注释都解释了

html： 

<Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
      style="border-bottom: 1px solid #ccc"
    />
    <Editor
      :defaultConfig="editorConfig"
      :mode="mode"
      v-model="valueHtml"
      style="height: 400px; overflow-y: hidden"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />

js：

// 这三个固定import
import "@wangeditor/editor/dist/css/style.css";
import {
  ref,
  reactive,
  inject,
  onMounted,
  onBeforeUnmount,
  shallowRef,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 这个是url 帮助图片 前缀 在main方法里面总合，
const server_url = inject("server_url");
// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();
// 去掉uploadVideo功能
const toolbarConfig = { excludeKeys: ["uploadVideo"] };
// 默认配置编辑器配置
const editorConfig = { placeholder: "请输入内容..." };
//设定为空
editorConfig.MENU_CONF = {};
//里面的上传图片 的配置 https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87
editorConfig.MENU_CONF["uploadImage"] = {
  base64LimitSize: 10 * 1024, // 10kb
  server: server_url + "/upload/rich_editor_upload",
};
// 插入图片会执行的一个函数
// if 是否包含http 就给ta 返回server_url带url 不带http ta就会没有图片
editorConfig.MENU_CONF["insertImage"] = {
  parseImageSrc: (src) => {
    if (src.indexOf("http") !== 0) {
      return `${server_url}${src}`;
    }
    return src;
  },
};
// 默认配置不用管 要加上
const mode = ref("default");
// 文本内容
const valueHtml = ref("");
// 接收
const props = defineProps({
  // 设定类型
  modelValue: {
    type: String,
    default: "",
  },
});
// 传出
const emit = defineEmits(["update:model-value"]);
// 设定传出 的开关
let initFinished = false;
// 第一次10ms 接收一次传过来的东西赋予下去
onMounted(() => {
  setTimeout(() => {
    // 是把传过来的东西赋值回这里的内容
    valueHtml.value = props.modelValue;
    initFinished = true;
  }, 10);
});

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

// 编辑器回调函数
const handleCreated = (editor) => {
  console.log("created", editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
};
// 内容变化时调用
const handleChange = (editor) => {
  // 当接收定时器开启式 真正启动
  if (initFinished) {
    // emit('传的名字',要传的东西)
    emit("update:model-value", valueHtml.value);
  }
};

下面重点解析 部分

上传文件 教程-> 菜单配置 | wangEditor

服务器地址必填 和 限制了文件大小 其他功能可以找文章

右边是官方的写法 ：为了给图片加个前缀地址

 vue 组件的 传值：

 // 去掉uploadVideo功能 上传视频

const toolbarConfig = { excludeKeys: ["uploadVideo"] };