vue使用wangEditor创建富文本

安装

javascript 复制代码
npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save
npm install @wangeditor/plugin-upload-attachment//附件使用

vue

图片上传、视频上传、附件上传

javascript 复制代码
<template lang="html">
    <div style="border: 1px solid #ccc;width:840px" class="editors">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor style="height: 400px; overflow-y: hidden;" v-model="html" @input="handleInput"
            :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" @onChange="onChange"
            @onMaxLength="onMaxLength" />
    </div>
</template>
<script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
import "@wangeditor/editor/dist/css/style.css";
import { getToken } from "@/utils/auth";
export default Vue.extend({
  components: { Editor, Toolbar },
  model: {
    prop: "value", // v-model 接收的值=props的message属性接收的值
    event: "change", // v-model 发生变化时触发的方法
  },
  props: {
    value: {
      // 富文本数据
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "",
    },
    maxLength: {
      type: Number,
      default: 10000000,
    },
  },
  watch: {
    value: function (value) {
      // 如果值不相等再进行赋值,避免多次赋值造成闪烁
      if (value !== this.html) {
        this.html = this.value;
      }
    },
    // value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值
  },
  data() {
    return {
      editor: null,
      html: "",
      textLength: 0,
      // 编辑器模式
      mode: "default", // or 'simple'
      toolbarConfig: {
        // 排除工具栏配置
        excludeKeys: [
          // 全屏,网络视频,本地视频,表情,代码,待办,代码块,插入图片
          "fullScreen",
          // "uploadVideo",
          // "group-video",
          // "emotion",
          // "code",
          // "todo",
          // "codeBlock",
          "insertImage",
        ],
        insertKeys: {
          index: 22, // 自定义插件在工具栏显示的位置
          keys: ["uploadAttachment"], // 查看名称
        },
        hoverbarKeys: {
          attachment: {
            menuKeys: ["downloadAttachment"], // "下载附件"菜单
          },
        },
      },
      italicButton: null,
      editorConfig: {
        placeholder: "请输入内容...",
        maxLength: this.maxLength, // 限制富文本输入文本字数
        MENU_CONF: {
          uploadImage: {
            server: process.env.VUE_APP_BASE_API + "/file",
            timeout: 100000,
            maxFileSize: 10000 * 1024 * 1024, 
            base64LimitSize: 50000 * 1024,
          },
          uploadVideo: {
            fieldName: "file",
            server: process.env.VUE_APP_BASE_API + "/file",
            timeout: 1000000,
            maxFileSize: 10000 * 1024 * 1024, // 1M
            base64LimitSize: 50000 * 1024,
            headers: {
              Authorization: getToken(),
            },
            async customInsert(insertFn, result) {
              if (insertFn.code === 0) {
                result(insertFn.data[0]);
              } else {
                this.$message.error("视频上传失败,请重新上传!");
              }
            },
          },
          uploadAttachment: {
            fieldName: "file",
            server: process.env.VUE_APP_BASE_API + "/file",
            timeout: 1000000,
            headers: {
              Authorization: getToken(),
            },
            async customInsert(res, file,insertFn) {
              insertFn(
                file.name,
                res.data[0]
              );
            },
          },
          fontFamily: {
            fontFamilyList: [
              { name: "仿宋", value: "fangsong" },
              { name: "黑体", value: "Arial" },
              { name: "仿手写", value: "cursive" },
              "serif",
              "sans-serif",
            ],
          },
        },
      },
      // Toolbar对象
      curToolbarConfig: null,
    };
  },

  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ,否则会报错
      this.$nextTick(() => {
        const toolbar = DomEditor.getToolbar(this.editor);
        this.curToolbarConfig = toolbar.getConfig();
      });
    },
    handleInput(value) {
      this.$emit("input", value); // 将内容同步到父组件中
    },
    onChange(editor) {
      // 监听富文本输入
      const text = editor.getText().replace(/\n|\r/gm, "");
      this.textLength = text.length;
    },
    onMaxLength(editor) {
      // 当输入值达到限制值时触发事件
      this.$message.warning("输入文本数已到达最大值!");
    },
  },
  mounted() {},
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时,及时销毁编辑器
  },
});
</script>
<style lang="scss" scoped>
::v-deep .w-e-textarea-video-container {
  background-image: none;
}
</style>

main.js

javascript 复制代码
import {Boot} from '@wangeditor/editor'
import attachmentModule from '@wangeditor/plugin-upload-attachment'
Boot.registerModule(attachmentModule)
相关推荐
Json_181790144806 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网29 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020432 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing34 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月37 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆44 分钟前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome
endingCode1 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript