vue3使用wangEditor富文本编辑器_vue3 wangeditor

1、安装依赖

npm install @wangeditor/editor --save

npm install @wangeditor/editor-for-vue@next --save

2、引入

 
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IEditorConfig } from "@wangeditor/editor";
import "@wangeditor/editor/dist/css/style.css";

注意：记得引入css文件，因为官网和部分教程都没写这个，导致样式错位，找了好久才找到

3、页面使用wangEditor

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

截图：

 4、设置富文本配置

const mode = "default";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
// 内容 HTML
const valueHtml = ref("");
const toolbarConfig = {};
const editorConfig: Partial<IEditorConfig> = {
  placeholder: "请输入内容...",
  MENU_CONF: {}
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
onBeforeMount(() => {
  //上传图片
  editorConfig.MENU_CONF["uploadImage"] = {
    server: import.meta.env.VITE_API_BASE_URL + "/file/uploadEditor",
    fieldName: "file",
    headers: { Authorization: "Bearer " + sessionStorage.getItem("token") },
    maxFileSize: 10 * 1024 * 1024,
    base64LimitSize: 5 * 1024,
    maxNumberOfFiles: 1,
    allowedFileTypes: ["image/*"],
    customInsert(res, insertFn) {
      console.log("customInsert", res);
      const imgInfo = res.data[0] || {};
      const { url, alt, href } = imgInfo;
      if (!url) throw new Error(`Image url is empty`);
      console.log("Your image url ", url);
      insertFn(url, alt, href);
    }
    // onBeforeUpload(file) {
    //   console.log("onBeforeUpload", file);
    //   return file; // will upload this file
    //   // return false // prevent upload
    // },
    // onProgress(progress) {
    //   console.log("onProgress", progress);
    // },
    // onSuccess(file, res) {
    //   console.log("onSuccess", file, res);
    // },
    // onFailed(file, res) {
    //   alert(res.message);
    //   console.log("onFailed", file, res);
    // },
    // onError(file, err, res) {
    //   console.error("onError", file, err.message, res);
    // }
  };
    //插入视频
  editorConfig.MENU_CONF["insertVideo"] = {
    onInsertedVideo(videoNode) {
      console.log("inserted video", videoNode);
    }
  };
//上传视频
  editorConfig.MENU_CONF["uploadVideo"] = {
    server: import.meta.env.VITE_API_BASE_URL + "/file/uploadEditor",
    fieldName: "file",
    allowedFileTypes: ["video/*"],
    headers: { Authorization: "Bearer " + sessionStorage.getItem("token") },
    maxFileSize: 100 * 1024 * 1024,
    customInsert(res, insertFn) {
      const videoInfo = res.data[0] || {};
      const { url } = videoInfo;
      if (!url) throw new Error(`视频的url为空`);
      insertFn(url + "#dsffdsfsf");
    }
    // onBeforeUpload(file) {
    //   console.log("onBeforeUpload", file);
    //   return file; // will upload this file
    //   // return false // prevent upload
    // },
    // onProgress(progress) {
    //   console.log("onProgress", progress);
    // },
    // onSuccess(file, res) {
    //   console.log("onSuccess", file, res);
    // },
    // onFailed(file, res) {
    //   alert(res.message);
    //   console.log("onFailed", file, res);
    // },
    // onError(file, err, res) {
    //   alert(err.message);
    //   console.error("onError", file, err, res);
    // }
  };
});
const handleCreated = editor => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};