1.下載依賴

npm i @wangeditor/editor @wangeditor/editor-for-vue

2.插件版本

?3.使用

引入css和組件

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

配置方法

// 富文本實例對象
const editorRef = shallowRef()
// 菜單配置
const toolbarConfig = ref({})
// 編輯器配置
const editorConfig = ref({
  placeholder: '請輸入內容...',
  readOnly: false,  // 只讀
  MENU_CONF: {
    // 配置上傳圖片
    uploadImage: {
      server: 'http://111.198.10.15:21409/minio/file/upload', // 配置圖片上傳地址
      maxFileSize: 2 * 1024 * 1024, // 10M  圖片大小限制
      fieldName: 'multipartFile', // 上傳名字
      allowedFileTypes: [], // 選擇文件時的類型限制，默認為 ['image/*'] 。如不想限制，則設置為 []
      // 自定義上傳參數，傳遞圖片時需要帶一些參數過去寫在這。參數會被添加到 formData 中，一起上傳到服務端。
      // meta: {
      //   image_class_id: "2",
      //   file_type: "1",
      // },
      // 自定義設置請求頭，比如添加token之類的
      // headers: {
      //     Accept: 'text/x-json',
      //     otherKey: 'xxx'
      // },
      // 上傳進度的回調函數，可以用來顯示進度條
      onProgress(progress: any) {
        // progress 是 0-100 的數字
        console.log('progress', progress)
      },
      // // 單個文件上傳成功之后
      // onSuccess(file, res) {
      //     console.log(`${file.name} 上傳成功`, res)
      // },

      // 單個文件上傳失敗
      onFailed(file: any, res: any) {
        console.log(`${file.name} 上傳失敗`, res)
      },

      // 上傳錯誤，或者觸發(fā) timeout 超時
      onError(file: any, err: any, res: any) {
        console.log(`${file.name} 上傳出錯`, err, res)
      },

      // 插入圖片到富文本編輯器回顯
      customInsert(res: any, insertFn: any) {
        console.log()
        // res 即服務端的返回結果
        getPhotoUrl(res.data[0]).then((res) => {
          const url = res.data
          const alt = ''
          const href = res.data
          // 從 res 中找到 url alt href ，然后插入圖片
          insertFn(url, alt, href)
        })
      },
    },
    // 配置上傳視頻
    uploadVideo: {
      server: 'http://111.198.10.15:21409/minio/file/upload', // 配置視頻上傳地址
      maxFileSize: 5 * 1024 * 1024, // 5M  視頻大小限制
      fieldName: 'multipartFile', // 上傳名字
      // 最多可上傳幾個文件，默認為 5
      // maxNumberOfFiles: 1,
      allowedFileTypes: [], // 選擇文件時的類型限制，默認為 ['video/*'] 。如不想限制，則設置為 []
      // 自定義上傳參數，傳遞圖片時需要帶一些參數過去寫在這。參數會被添加到 formData 中，一起上傳到服務端。
      // meta: {
      //   type: 1,
      // },
      // 自定義設置請求頭，比如添加token之類的
      // headers: {
      //     Accept: 'text/x-json',
      //     otherKey: 'xxx'
      // },
      // metaWithUrl: false, // 將 meta 拼接到 url 參數中，默認 false
      // withCredentials: true, // 跨域是否傳遞 cookie ，默認為 false
      // 上傳之前觸發(fā)
      onBeforeUpload(file: any) {
        // file 選中的文件，格式如 { key: file }
        return file
        // 可以 return
        // 1. return file 或者 new 一個 file ，接下來將上傳
        // 2. return false ，不上傳這個 file
      },

      // 上傳進度的回調函數，可以用來顯示進度條
      onProgress(progress: any) {
        // progress 是 0-100 的數字
        console.log('progress', progress)
      },

      // // 單個文件上傳成功之后
      onSuccess(file: any, res: any) {
        console.log(`${file.name} 上傳成功`, res)
      },

      // 單個文件上傳失敗
      onFailed(file: any, res: any) {
        console.log(`${file.name} 上傳失敗`, res)
      },

      // 上傳錯誤，或者觸發(fā) timeout 超時
      onError(file: any, err: any, res: any) {
        console.log(`${file.name} 上傳出錯`, err, res)
      },

      // 插入圖片到富文本編輯器回顯
      customInsert(res: any, insertFn: any) {
        console.log(res, '視頻插入')
        // res 即服務端的返回結果
        // let url = res.data.url;
        // let poster = res.data.poster;
        // 從 res 中找到 url poster ，然后插入
        // 參數url是視頻地址，poster是視頻封面圖片，后端如果不返回，可以考慮寫死一個固定的封面圖
        getPhotoUrl(res.data[0]).then((res) => {
          const url = res.data
          // 從 res 中找到 url alt href ，然后插入圖片
          insertFn(url, '')
        })
      },
    },
  },
})
const onCreated = (editor: any) => {
  editorRef.value = editor
  nextTick(() => {
    editorRef.value = editor // 一定要用 Object.seal() ，否則會報錯
  })
}

模板(標簽)中插入

<div style="border: 1px solid #dcdfe6;width: 100%;border-radius: 4px;">
          <toolbar
            style="border-bottom: 1px solid #dcdfe6;width: 100%;border-radius: 4px;"
            :editor="editorRef"
            :default-config="toolbarConfig"
            mode="default"
          />
          <editor
            v-model="ruleForm.noticeContent"
            style="height: 300px; overflow-y: hidden;"
            :default-config="editorConfig"
            mode="default"
            @onCreated="onCreated"
          />
        </div>

效果

?文章來源地址http://www.zghlxwxcb.cn/news/detail-698684.html

到了這里，關于vue3項目使用富文本編輯器-wangeditor的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！