vue3 wangeditor富文本编辑器的基础使用

html部分

  <div class="editorBox">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 175px; width: 100%; overflow-y: hidden"
      :mode="mode"
      v-model="value"
      :defaultConfig="editorConfig"
      @onCreated="onCreated" @customPaste="customPaste"
    >
    </Editor>
  </div>

js部分：先安装，然后引入

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

//记得定义组件
components: { Editor, Toolbar },

初始化富文本编辑器
 const onCreated = (editor) => {
      // console.log(editor.getAllMenuKeys());
      data.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    };

配置值

      editor: null,
      toolbarConfig: {//工具栏配置
        toolbarKeys: [
          "bold",//加粗
          "italic",//倾斜
          "underline",//下划线
          "bulletedList",//无序列表
          "numberedList",//有序列表
          "insertLink",//插入链接
        ],
      },
      editorConfig: {//编辑区域
        placeholder: "请输入内容...",
        hoverbarKeys: false,
      },
      mode: "simple", // or 'simple'

复制粘贴文本自定义

  const customPaste=(editor, event) => { //对复制过来的内容进行处理，处理文字格式，图片等
          // 获取粘贴的html部分
          let html = event.clipboardData.getData("text/html");

          // 获取rtf数据（从word、wps复制粘贴时有），复制粘贴过程中图片的数据就保存在rtf中
          const rtf = event.clipboardData.getData("text/rtf");

          if (html && rtf) {
            // 列表缩进会超出边框，直接过滤掉
            html = html.replace(/text\-indent:\-(.*?)pt/gi, "");

            // 从html内容中查找粘贴内容中是否有图片元素，并返回img标签的属性src值的集合
            const imgSrcs = findAllImgSrcsFromHtml(html);
            if (imgSrcs && Array.isArray(imgSrcs) && imgSrcs.length) {
              // 从rtf内容中查找图片数据
              const rtfImageData = extractImageDataFromRtf(rtf);
              if (rtfImageData.length) {
                // 执行替换：将html内容中的img标签的src替换成ref中的图片数据，如果上面上传了则为图片路径
                html = replaceImagesFileSourceWithInlineRepresentation(
                  html,
                  imgSrcs,
                  rtfImageData
                );
                editor.dangerouslyInsertHtml(html);
              }
            }

            // 阻止默认的粘贴行为
            event.preventDefault();
            return false;
          } else {
            return true;
          }
        }

 //仅仅粘贴文本
const customPaste = (editor, event) => {
      //对复制过来的内容进行处理，处理文字格式，图片等
      // 获取粘贴的html部分
      let html = event.clipboardData.getData("text/html");

      // 获取rtf数据（从word、wps复制粘贴时有），复制粘贴过程中图片的数据就保存在rtf中
      const rtf = event.clipboardData.getData("text/rtf");
      const text = event.clipboardData.getData("text/plain"); // 获取粘贴的纯文本
      console.log(text);
      editor.dangerouslyInsertHtml(text);
      // 阻止默认的粘贴行为
      event.preventDefault();
    };