vue問題四：富文本編輯器上傳圖片

vue使用富文本編輯器上傳圖片：

我是用的是wangEditor 富文本編輯器 demo:http://www.wangeditor.com/

1).安裝依賴:npm install wangeditor

2).我自己是創建了一個組件這樣再用到的時候可以直接調用（可能有更簡單的方法）

<template lang="html">

  <div class="editor">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text">
    </div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  let editor=null
  export default {
    name: 'Editorbar',
    data () {
      return {
        info_: null
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: String,
        default: ''
      },
      isClear: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      isClear (val) {
        // 觸發清除文本域內容
        if (val) {
          editor.txt.clear()
          this.info_ = null
        }
      },
      value (val) {
        // 使用 v-model 時,設置初始值
        editor.txt.html(val)
      }
    },
    mounted () {
      this.seteditor()
    },
    methods: {
      seteditor () {
        editor = new E(this.$refs.toolbar, this.$refs.editor)
        editor.customConfig.uploadImgShowBase64 = true // base 64 存儲圖片
        editor.customConfig.uploadImgServer = 'http://47.106.198.122/api/CanteenAdmin/CanteenManagement/UploadImage'// 配置服務器端地址
        editor.customConfig.uploadImgHeaders = {  'token':sessionStorage.getItem('token')    }// 自定義 header
        editor.customConfig.uploadFileName = 'image' // 后端接受上傳文件的參數名
        editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 將圖片大小限制為 2M
        editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上傳 3 張圖片
        editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 設置超時時間
        // this.editor.customConfig.uploadParams = {formFile:'2'};
        // 配置菜單
        editor.customConfig.menus = [
          'bold', // 粗體
          'underline', // 下划線
          'link', // 插入鏈接
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入圖片
          'table', // 表格
          'code', // 插入代碼

        ]

        editor.customConfig.uploadImgHooks = {
          fail: (xhr, editor, result) => {
            // 插入圖片失敗回調
          },
          success: (xhr, editor, result) => {
             // 圖片上傳成功回調
            //
            // let imgUrl = result.data;
            // insertImg(imgUrl)
          },
          timeout: (xhr, editor) => {
            // 網絡超時的回調
          },
          error: (xhr, editor) => {
            console.log(editor)
            // 圖片上傳錯誤的回調
          },
          customInsert: (insertImg, result, editor) => {
            // 圖片上傳成功,插入圖片的回調
            console.log(result);
            // if(result.code == 200){
            var url = result.data;
            insertImg(url)//將內容插入到富文本中
            // console.log(insertImg(url)+"DFDF")
            // console.log(data+"dsfd")
            // }
          }
        };

        editor.customConfig.onchange = (html) => {
          this.info_ = html // 綁定當前逐漸地值
          this.$emit('change', this.info_) // 將內容同步到父組件中
          console.log(this.info_ )
        };

        // 創建富文本編輯器
        editor.create()
      }
    }
  }
</script>

<style lang="css">
  .editor {
    width: 80%;
  margin-left: 4%;
  }
  .toolbar {

    border: 1px solid #ccc;
  }
  .w-e-menu{
    z-index:1 !important;
  }
  .text {
    width:100%;
    border: 1px solid #ccc;
    height: 300px;
  }
</style>

<!--富文本編輯器-->
          <div style="margin-top:2%;margin-left: 1%">
            <editor-bar v-model="zldata.info" :isClear="isClear"></editor-bar>
          </div>



js:
<script>
import EditorBar from './editor'
 export default {
    data: function () {
      return {
             isClear: false,
             zldata: {
                 info:'',
               },
        }
    },
  components: {
      EditorBar
    },

}

</script>

 

喜歡的給個贊吧！！！