vue專案中使用tinymce富文字的踩坑經歷（一）

阿新 • • 發佈：2020-07-20

在專案開發中，一般在後臺管理系統會有編輯需求，那我們就需要使用到富文字這個東西。現在在寫vue專案中就需要到富文字編輯器，所以給大家推薦一款富文字編輯器（TinyMCE）

首先，下載編輯器依賴包

npm install tinymce --save
or
yarn add tinymce

　　在需要用到編輯器的地方引入

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'

<template>
  <Editor v-model="dateValue" :init="init" :disabled="disabled" />
</template>

export default {
  name: 'TinymceEditor',
  components: {
    Editor
  },
  props: {
    value: { type: String, required: true }, // 編輯內容
    option: { type: Object, default: undefined }, // 
 配置引數
    disabled: { type: Boolean, default: false }
  },
  data() {
    return {
      init: {
        menubar: false, // 禁用選單欄
        branding: false, // 隱藏右下角技術支援
        elementpath: false, // 隱藏底欄的元素路徑
        font_formats: '微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;蘋果蘋方=PingFang SC,Microsoft YaHei,sans-serif;宋體=simsun,serif',
        fontsize_formats:  
'12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 50px 60px 70px 80px 90px 100px 120px 140px 160px 180px 200px',
        language_url: '/static/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins',
        content_css: '/static/tinymce/skins/content/content.css',
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        // toolbar:
        //     `bold italic underline strikethrough | fontsizeselect | forecolor backcolor |
        //     alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote |
        //     undo redo | link unlink image code | removeformat`,
        // toolbar: 'bold italic underline strikethrough subscript superscript removeformat | fontselect | fontsizeselect | styleselect | forecolor backcolor | table | image |alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote |undo redo | ',

        // 工具欄1
        toolbar1: 'bold italic underline strikethrough subscript superscript removeformat | fontselect | fontsizeselect | styleselect | forecolor backcolor | ',
        // 工具欄2
        toolbar2: ' table | image | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote |undo redo',
        contextmenu: false, // 禁用富文字的右鍵選單，使用瀏覽器自帶的右鍵選單
        height: 500,
        ...this.option
      }
    }
  },
  computed: {
    dateValue: {
               return this.value ? this.value : ''
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
  }

}