vue封裝tinymce富文本組件,圖片上傳回調方法

這裏我用了tinymce，主要解決的是上傳圖片回調處理

效果預覽：

 

第一步：下載tinymce資源，

把tinymce放到static目錄

在index.html中引入tinymce.min.js文件

<script src=<%= htmlWebpackPlugin.options.path %>/tinymce/tinymce.min.js></script>

第二步：新建tinymce組件

template:

<template>
  <div class="comp-tinymce-wrapper">
    <textarea :id="tinymceId"></textarea>
  </div>
</template>

script:

<script>
//上傳圖片方法

  import {uploadRichImg} from '@/api/common'
  export default {
    name:'tinymce',
    props:{
      id:{
        type:String
      },
      value:{
        type:String,
        default:''
      },
//能夠自定義toolbar
      toolbar:{
        type:Array,
        require:false,
        default(){
          return ['removeformat undo redo |  bullist numlist | outdent indent  | fullscreen code', 'formatselect |  bold italic strikethrough forecolor blockquote | alignleft aligncenter alignright | image link ']
        }
      },
      menubar:{
        default:''
      },
      height:{
        type:Number,
        requier:false,
        default:400
      }
    },
    data(){
      return {
        tinymceId: this.id || 'vue-tinymce'+ Date.parse(new Date()),
        hasInit:false,
        hasChange:false
      }
    },
    mounted(){
      this.initTinymce()
    },
    watch:{
      value(newV,oldV){
        //當傳入值不變化的時候更新富文本內容,
        if(this.hasInit&&!this.hasChange){
        window.tinymce.get(this.tinymceId).setContent(newV)
        }
      }
    },
    methods:{
       initTinymce(){
         const _this = this
         tinymce.init({
           selector: `#${this.tinymceId}`,
           height: this.height,
           body_class: 'panel-body rich-text',
           theme: 'modern',
           content_style:'{p{color_red} }',
           //是否可拉伸
           resize:false,
           //語言
           language: 'zh_CN',
          //是否顯示POWERED BY TINYMCE
           branding:false,
           //toolbar
           toolbar: this.toolbar,
           fixed_toolbar_container: '#mytoolbar',
           //menubar
           menubar: this.menubar,
           //插件
           plugins: 'advlist,autolink,code,paste,textcolor, colorpicker,fullscreen,link,lists, image ',

           powerpaste_word_import: 'clean',
           //tinymce內容自定義樣式
           content_css:'static/tinymce/css/rewrite-mce.css',
           //源代碼彈出層寬
           code_dialog_height: 450,
           //源代碼彈出層高
           code_dialog_width: 1000,
           //
           block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3',
           imagetools_cors_hosts: ['wpimg.wallstcn.com', 'wallstreetcn.com'],
           //連接打開方式
           default_link_target: '_blank',
           images_upload_url: '/oss/file/uploadRichImg?dir=image',
           //上傳圖片回調
           images_upload_handler:(blobInfo, success, failure) => {
             let fd = new FormData()
             fd.append('file',blobInfo.blob())
             uploadRichImg(fd).then(res => {
               let result = res.data[0]
               success(result.url)
               })
               .catch(err => { })

           },
           init_instance_callback: editor => {
             if (_this.value) {
               editor.setContent(_this.value)
             }
             _this.hasInit = true
             editor.on('NodeChange Change input KeyUp', () => {
               //change觸發watch去setContent，光標變化了，
               this.hasChange = true
               this.$emit('input', editor.getContent({ format: 'raw' }))
             })
           }
         })
       },
      destroyTiny(){
         if(window.tinymce.get(this.tinymceId)){
           window.tinymce.get(this.tinymceId).destroy()
         }
      },
      setContent(val){
        window.tinymce.get(this.tinymceId).setContent(val)
      },
      getContent(){
        window.tinymce.get(this.tinymceId).getContent()
      },
      destroyed(){
        this.destroyTiny()
      }

    }
  }
</script>

在父組件中引入tinymce組件

import tinymce from '@/components/Tinymce/index'

             <tinymce :height="tiny.height" v-model="sendObj.content"></tinymce>

script:

export default {
    name: 'addNews',
    components:{
      tinymce
    },
    data(){
      return {
        tiny:{
          height:300
        },
        sendObj:{
          content:'nihao'
        }
    },
    methods:{
    }
  }
</script>