Vue 富文本控件 wangeditor

1.官方网站 ：wangEditor

2.加载控件 

  "@wangeditor/editor-for-vue": "^5.1.12",

3.控件引入

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

import { Search, Plus, Check, Message, Star, Delete, } from "@element-plus/icons";

import { ElMessage } from 'element-plus';
export default {
  components: { Editor, Toolbar, Search, Plus },

<div style="border: 1px solid #ccc">
              <Toolbar style="width: 100%;border-bottom: 1px solid #ccc"
                       :editor="editor"
                       :defaultConfig="toolbarConfig"
                       :mode="mode" />
              <Editor style="height: 400px; width: 100%; overflow-y: hidden"
                      v-model="form.desc"
                      :defaultConfig="editorConfig"
                      :mode="mode"
                      @onCreated="onCreated" />
            </div>

 

4.控件上传图片

data () {
    return {
      id: 0,
      editor: null,
      html: '',
  
      toolbarConfig: {
        excludeKeys :[
          // 'group-image', 
          'uploadVideo'
        ]
          
        
      },
      editorConfig: { placeholder: '请输入内容...' ,

      MENU_CONF: {
 
            // 配置字号
            // fontSize: [... ],


            // 图片上传
            uploadImage: {
                server: '/api/Attachment/uploadImg',
                fieldName: 'img',
                // 单个文件的最大体积限制，默认为 2M
                maximgSize: 2 * 1024 * 1024, // 10M
                // 最多可上传几个文件，默认为 100
                maxNumberOfimgs: 10,
                // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                allowedimgTypes: ['image/*'],
                // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                meta: {
                    path :"dianpu"
                    // token: 'xxx',
                    // otherKey: 'yyy'
                    // img:''
                },
                // 将 meta 拼接到 url 参数中，默认 false
                metaWithUrl: false,

                // 自定义增加 http  header
                headers: {
                    // Accept: 'text/x-json',
                    // otherKey: 'xxx'
                },

                // 跨域是否传递 cookie ，默认为 false
                withCredentials: true,

                // 超时时间，默认为 10 秒
                timeout: 15 * 1000, //10 秒

                // 上传前
                onBeforeUpload(imgs) {
                    ElMessage({
                        message: '图片正在上传中,请耐心等待',
                        grouping: true,
                        duration: 0,
                        customClass: 'uploadTip',
                        iconClass: 'el-icon-loading',
                        showClose: true
                    });
                    return imgs;
                },
                // 自定义插入图片
                customInsert(res, insertFn) {
                    // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
                    // 先关闭等待的ElMessage
                    ElMessage.closeAll();

                    if (res.code === 0) {
                        ElMessage.success({
                            message: "图片上传成功",
                            grouping: true,
                        });
                    } else {
                        ElMessage.error({
                            message: "图片上传失败，请重新尝试",
                            grouping: true,
                        });
                    }
                    // 从 res 中找到 url alt href ，然后插入图片
                    insertFn(res.data.imgurl);
                    console.log(res, "res.data")
                },
                // 单个文件上传成功之后
                onSuccess(img, res) {
                    console.log(`${img.name} 上传成功`, res);
                },

                // 单个文件上传失败
                onFailed(img, res) {
                    console.log(`${img.name} 上传失败`, res);
                },

                // 上传进度的回调函数
                onProgress(progress) {
                    console.log('progress', progress);
                    // progress 是 0-100 的数字
                },

                // 上传错误，或者触发 timeout 超时
                onError(img, err, res) {
                    console.log(`${img.name} 上传出错`, err, res);
                }
          }, }   
      },
 
     
      
    };
  }