Vue爬坑之旅(二十六)：vue中使用tinymce-vue

tinymce-vue是一款強大的富文本編輯器

UI精美，功能模塊多，可按需加載配置

github地址：tinymce-vue

demo查看

一、安裝

"@tinymce/tinymce-vue": "^3.0.1",
"tinymce": "^5.0.14",

下載的時候可以先在static下面建個目錄tinymce，裏面可以防止一些插件，語言包什麼的

二、下載中文語言包

inymce提供了很多的語言包，這裏我們下載中文語言包，下載完成後將其解壓到static\tinymce目錄下面，如上圖

三、初始化

引入基本文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/modern/theme'

components中註冊tinymce-vue才能使用

<Editor v-model="editorHTML" :init="editorInit"></Editor>

 配置表(部分常用)：

editorInit: {

        /**
         * 配置參數
         * @param {string/object} language_url 語言包文件地址
         * @param {string} language 設置語言包
         * @param {number} height 初始化高度
         * @param {string} plugins 使用插件名稱
         * @param {string} toolbar 工具欄配置
         * @param {boolean} branding 是否顯示右下角品牌名稱
         * @param {boolean} resize 是否允許自由拖拽
         * @param {string} fontsize_formats 字號設置
         * @param {function} images_upload_handler 自定義圖片上傳回調
         */
        language_url: EditorCN,
        language: 'zh_CN',
        height: 390,
        plugins: 'link lists image code table wordcount advlist code lineheight fullscreen',
        toolbar: 'bold | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | lineheight | bullist numlist | outdent indent | image | fullscreen',
        branding: false,
        resize: false,
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 26px 28px 30px',
        images_upload_handler (blobInfo, succFun, failFun) {
          console.log('上傳圖片')
          let formdata = new FormData()
          console.log('獲取到的圖片信息：' + blobInfo)
          // 插入圖片
          succFun('https://my.weblf.cn/website/static/img/3.5cba2ca.jpg')
        }
      }

擴展插件

默認的編輯器只有基本功能，如果還需要上傳圖片，插入表格之類的功能就需要添加插件
如添加上傳圖片和插入表格的插件

import 'tinymce/plugins/image'
import 'tinymce/plugins/table'

 引入後還需要再toolbar工具欄上添加相應的按鈕

plugins: 'lists image media table textcolor wordcount contextmenu',
toolbar: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',

完整代碼：

<template>
  <div class='tinymce'>
    <Editor v-model="editorHTML" :init="editorInit"></Editor>
  </div>
</template>

<script>
// import axios from '@/mixins/axios'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import EditorCN from './../../../static/tinymce/zh_CN'

import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/fullscreen'

import './../../../static/tinymce/plugins/lineheight/lineheight'

let that = ''

export default {
  data () {
    return {
      switch: true,
      editorHTML: '',
      editorInit: {

        /**
         * 配置參數
         * @param {string/object} language_url 語言包文件地址
         * @param {string} language 設置語言包
         * @param {number} height 初始化高度
         * @param {string} plugins 使用插件名稱
         * @param {string} toolbar 工具欄配置
         * @param {boolean} branding 是否顯示右下角品牌名稱
         * @param {boolean} resize 是否允許自由拖拽
         * @param {string} fontsize_formats 字號設置
         * @param {function} images_upload_handler 自定義圖片上傳回調
         */
        language_url: EditorCN,
        language: 'zh_CN',
        height: 390,
        plugins: 'link lists image code table wordcount advlist code lineheight fullscreen',
        toolbar: 'bold | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | lineheight | bullist numlist | outdent indent | image | fullscreen',
        branding: false,
        resize: false,
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 26px 28px 30px',
        images_upload_handler (blobInfo, succFun, failFun) {
          console.log('上傳圖片')
          let formdata = new FormData()
          console.log('獲取到的圖片信息：' + blobInfo)
          // 插入圖片
          succFun('https://my.weblf.cn/website/static/img/3.5cba2ca.jpg')
        }
      }
    }
  },
  // mixins: [axios],
  model: {
    prop: 'content',
    event: 'setContent'
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    tinymceUploadImg: {
      type: Function,
      default: () => {}
    }
  },
  components: { Editor },
  watch: {
    'content' (value) {
      if (this.switch) {
        this.switch = false
        this.editorHTML = value
      }
    },
    'editorHTML' (value) {
      this.$emit('setContent', value)
    }
  },
  async mounted () {
    that = this
    tinymce.init({})
    this.editorHTML = this.content
  }
}
</script>

<style lang="scss">
@import "./tinymce.scss";
</style>