在vue cli 3腳手架裏引入tinymce 5富文本編輯器

本文主要講的是在Vue cli 3腳手架搭建的項目裏如何引用Tinymce 5富文本編輯器。

請注意識別「版本號」，不一樣版本的配置細節有所不一樣。

1. tinymce的安裝

1. 安裝tinymce-vue

npm install @tinymce/tinymce-vue -S
複製代碼

2. 安裝tinymce

npm install tinymce -S
複製代碼

3. 下載中文語言包

tinymce提供的語言包不少，選擇下載中文語言包

2. 使用方法

1. 文件操做

• 在項目根目錄的public目錄下新建tinymce文件夾，將下載的中文語言包解壓後放在該文件夾下
• 在依賴包node_modules裏找到tinymce文件夾，將裏面的skins文件夾複製到public/tinymce目錄下

2. 目錄截圖

3. tinymce初始化

1. 引入基本文件

// 引入組件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本編輯器主題的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 擴展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
複製代碼

2. 註冊組件並使用

註冊組件

components: { Editor }
複製代碼

使用組件

<Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" />
複製代碼

3. 初始化配置項

editorInit: {
    selector: '#tinymce',
    language_url: '/tinymce/langs/zh_CN.js',
    language: 'zh_CN',
    skin_url: '/tinymce/skins/ui/oxide',
    height: 300,
    plugins: 'link lists image code table wordcount',
    toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
    images_upload_handler: (blobInfo, success, failure) => {
      this.handleImgUpload(blobInfo, success, failure)
    },
    statusbar: true // 底部的狀態欄
    menubar: true, // 最上方的菜單
    branding: false // 水印「Powered by TinyMCE」
}
複製代碼

4. 簡單demo

<template>
  <div class="activeConfig">
    <div class="activeConfig-container">
      <Editor id="tinymce" v-model="tinymceHtml" :init="editorInit" />
    </div>
  </div>
</template>

<script>
// 引入組件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本編輯器主題的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 擴展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
// 引入api
import { uploadImgage } from '@/api/activeConfig'

export default {
  name: 'ActiveConfig',
  components: { Editor },
  data() {
    return {
      // tinymce的綁定值
      tinymceHtml: '',
      // tinymce的初始化配置
      editorInit: {
        selector: '#tinymce',
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 300,
        plugins: 'link lists image code table wordcount',
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        // 此處爲圖片上傳處理函數
        images_upload_handler: (blobInfo, success, failure) => {
          this.handleImgUpload(blobInfo, success, failure)
        },
        statusbar: true // 底部的狀態欄
        menubar: true, // 最上方的菜單
        branding: false // 水印「Powered by TinyMCE」
      }
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    // 圖片上傳
    handleImgUpload(blobInfo, success, failure) {
      this.baseUrl = process.env.VUE_APP_BASE_URL
      const imgBase64 = `data:${blobInfo.blob().type};base64,${blobInfo.base64()}`
      const data = { img: [imgBase64] }
      uploadImgage(data).then(res => {
        // 傳入success回調裏的數據就是富文本編輯器裏插入圖片的src的值
        success(`${this.baseUrl}/${res.data[0]}`)
      }).catch(() => { failure('error') })
    }
  }
}
</script>

<style lang="scss" scoped>
.activeConfig {
  &-container {
    margin: 30px;
  }
}
</style>
複製代碼

5. 封裝組件

簡單封裝一下，方便使用

<template>
  <div class="tinymce-editor">
    <Editor
      :id="editorId"
      v-model="editorValue"
      :init="editorInit"
      :disabled="disabled"
      @onClick="handleClick"
    />
  </div>
</template>

<script>
// 引入組件
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
// 引入富文本編輯器主題的js和css
import 'tinymce/themes/silver/theme.min.js'
import 'tinymce/skins/ui/oxide/skin.min.css'
// 擴展插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount' // 字數統計插件

export default {
  name: 'TinymceEditor'
  components: { Editor },
  props: {
    id: {
      type: String,
      default: 'tinymceEditor'
    },
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'link lists image code table wordcount'
    },
    toolbar: {
      type: [String, Array],
      default: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat'
    }
  },
  data() {
    return {
      editorInit: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        height: 300,
        plugins: this.plugins,
        toolbar: this.toolbar,
        statusbar: true, // 底部的狀態欄
        menubar: true, // 最上方的菜單
        branding: false, // 水印「Powered by TinyMCE」
        images_upload_handler: (blobInfo, success, failure) => {
          this.$emit('handleImgUpload', blobInfo, success, failure)
        }
      },
      editorId: this.id,
      editorValue: this.value
    }
  },
  watch: {
    editorValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    // https://github.com/tinymce/tinymce-vue => All available events
    handleClick(e) {
      this.$emit('onClick', e, tinymce)
    },
    clear() {
      this.editorValue = ''
    }
  }
}
</script>

複製代碼

6. 封裝組件後demo

使用組件的完整demo示例

<template>
  <div class="demo">
    <tinymce-editor
      :id="editorId"
      ref="editor"
      v-model="message"
      :disabled="isEditorDisabled"
      @input="handleInput"
      @onClick="handleClick"
      @handleImgUpload="imgUpload"
    />
    <div class="demo-btn">
      <el-button type="primary" @click="clearClick">清空內容</el-button>
      <el-button @click="disableClick">{{ !isEditorDisabled ? '禁用' : '啓用' }}</el-button>
    </div>
  </div>
</template>

<script>
import TinymceEditor from '@/components/TinymceEditor'

export default {
  components: { TinymceEditor },
  data() {
    return {
      message: '我常常被生活錘得心灰意冷，可我歷來都沒放棄過。',
      editorId: 'editor-demo',
      isEditorDisabled: false
    }
  },
  methods: {
    // 輸入事件
    handleInput(value) {
      console.log(value)
    },
    // 點擊事件
    handleClick(e, editor) {
      console.log(e, editor)
    },
    // 上傳圖片
    imgUpload(blobInfo, success, failure) {
      const imgBase64 = `data:${blobInfo.blob().type};base64,${blobInfo.base64()}`
      success(imgBase64)
    },
    // 清空事件
    clearClick() {
      this.$refs.editor.clear()
    },
    // 禁用事件
    disableClick() {
      this.isEditorDisabled = !this.isEditorDisabled
    }
  }
}
</script>

<style lang="scss" scoped>
.demo {
  margin: 30px;
  &-btn {
    text-align: center;
    margin: 10px;
  }
}
</style>

複製代碼