Vue整合UEditor

UEditor

官方API文檔

這裏將UEditor做成Vue通用組件。

<div>
	<script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;"></script>
</div>

import ueditor from 'ueditor'
  export default {
    data () {
      return {
        ue: null,
        ueId: `J_ueditorBox_${new Date().getTime()}`
      }
    },
    methods: {
      initEditor () {
        // 創建富文本實例
        this.ue = ueditor.getEditor(this.ueId, {
          zIndex: 3000,
          // 富文本中頂部按鈕
          toolbars: [
            ['fullscreen']
          ]
        })
      },
      // 富文本內容賦值
      setContentValue (data) {
        let vm = this
        this.ue.ready(function () {
          vm.ue.setContent(data)
        })
      },
      // 獲取富文本內容
      getContentValue () {
        let content = this.ue.getContent()
        this.$emit('changeParamExplain', content)
      },
      // 富文本不可編輯
      setNotChange () {
        let vm = this
        this.ue.ready(function () {
          vm.ue.setDisabled('fullscreen')
        })
      }
    }
  }

在Vue頁面中，通過引用組件的方式直接將其引用到頁面中。

<ueditor ref="editor"></ueditor>

import ueditor from '@/common/ueditor'

// 頁面初始化時調用富文本初始化方法
mounted () {
  // 加載完畢調用
  this.$nextTick(() => {
    this.$refs.editor.initEditor()
  })
}