wangeditor富文本編輯如何在Vue項目中使用

這篇文章給大家介紹wangeditor富文本編輯如何在Vue項目中使用，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

<!--富文本編輯器。http://www.wangeditor.com/
使用示例：
<AppEditor v-model="content"></AppEditor>
-->
<template>
 <article ref="editor" class="AppEditor-root"></article>
</template>
<script>
 const E = require('wangeditor');
 export default {
  name: 'AppEditor',
  model: {
   prop: 'value',
   event: 'update:value',
  },
  props: {
   // value值，v-model綁定
   value: {type: String, default: ''},
   // 菜單選項
   menus: {
    type: Array,
    default(){
     return [
      'bold', // 粗體
      'italic',//斜體
      'underline',//下劃線
      'fontSize', // 字號
      'strikeThrough',//刪除線
      'image', // 插入圖片
      'undo', // 撤銷


      // 'fontName', // 字體
      // 'italic', // 斜體
      // 'underline', // 下劃線
      // 'strikeThrough', // 刪除線
      // 'foreColor', // 文字顏色
      // 'backColor', // 背景顏色
      // 'link', // 插入鏈接
      // 'list', // 列表
      // 'justify', // 對齊方式
      // 'quote', // 引用
      // 'emoticon', // 表情
      // 'image', // 插入圖片
      // 'table', // 表格
      // 'video', // 插入視頻
      // 'code', // 插入代碼
      // 'undo', // 撤銷
      // 'redo', // 重復
     ];
    },
   },
  },
  data(){
   return {
    editor: {}, // 編輯器對象
    _value: '', // 內容備份，用于watch時候判斷，只在編輯器輸入時改變
   };
  },
  computed: {},
  mounted(){
   this.initEditor();
  },
  watch: {
   value(newValue, oldValue){
    // 編輯器onchange更改的不處理，只處理父組件傳來的，防止文字回退bug
    if (newValue != this._value) {
     this.editor.txt.html(newValue);
    }
   },
  },
  methods: {
   initEditor(){
    let editor = new E(this.$refs.editor);
    Object.assign(editor.customConfig, {
     menus: this.menus,
     zIndex: 100,
     height: 200,
     pasteFilterStyle: false,
     onchange: (html) => {
      this._value = html; // 更新 _value
      this.$emit('update:value', html); // 更新 value
     },
     customUploadImg:((file, insert)=> {
      if(this.$utils.isEmpty(file)){
       return;
      }
      const msg = this.$Message.loading({
       content: '親，圖片正在拼命地上傳中，請稍等...',
       duration: 0
      });
      var params = new FormData();
      params.append('img', file[0]);
      this.$api.post('/synthesis/crm/picture/pictureUpload',params).then(res => {
       insert(res.data.imgUrl)
       setTimeout(msg, 0);
       this.$Message.success('上傳成功');
      })
     }),
     uploadImgHooks:{

      customInsert: function (insertImg, result, editor) {
       insertImg(result.url)
      }
     }
    });


    editor.create();
    editor.txt.html(this.value); // 針對數據異步獲取的這里無法立即綁定，在watch判斷處理
    this.editor = editor;
   },
  },
 };
</script>
<style scoped lang="scss">
 .AppEditor-root{ border: 1px solid #f0f0f0; height: 400px !important;
  /deep/ .w-e-toolbar{ border: none !important; border-bottom: 1px solid #f0f0f0 !important; background-color: #fff !important;

  }
  /deep/ .w-e-text-container{ height: calc(100% - 43px) !important; border: none !important; z-index:1 !important;
   .w-e-text{ height: 100%; overflow-y: auto !important;}
  }
 }

</style>

關于wangeditor富文本編輯如何在Vue項目中使用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。