Tinymce-vue has two installation methods: (1) Register on the official website, and then obtain the API-key and configure Approved Domains. This installation plug-in is placed in the cloud, namely on tiny’s official website server. The initialization is generally very slow in China, so it is better not to use it in China, so as not to be ridicued as too slow, or directly blank.

(2) Plugins and voice packages are local, which is the core of this article;

1. Install the plug-in

npm install @tinymce/tinymce-vue -S
npm install tinymce -S
Copy the code

2, configure the Chinese package, create the tinymce folder in the public file of the project, and place the zh_cn.js file in the Chinese package and configure it in your public directory, as shown below:

3. Configure skins and save the skins file in the public folder > tinymce. The file comes from the following directory: node_modules > tinymce > skins

SRC -> components -> defineTinymce -> index.vue


<template>
  <div class="tinymce-editor">
    <editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" />
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

// Resolve the icons.js exception
import 'tinymce/icons/default'

// Editor plugins
/ / more plug-in reference: https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image' // Insert the upload image plugin
import 'tinymce/plugins/media' // Insert the video plug-in
import 'tinymce/plugins/lists' // List plugins
import 'tinymce/plugins/wordcount' // word count plug-in
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/code'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/link'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/template'
import 'tinymce/plugins/fullscreen'

export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String.default: ' '
    },
    disabled: {
      type: Boolean.default: false
    },
    plugins: {
      type: [String.Array].default:
        'code advlist lists image media wordcount link template fullscreen'
    },
    toolbar: {
      type: [String.Array].default:
        'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image | code'
    }
  },
  data () {
    const This = this
    return {
      init: {
        language_url: `/tinymce/zh_CN.js`.language: 'zh_CN'.skin_url: `/tinymce/skins/ui/oxide`.content_css: `/tinymce/skins/content/default/content.css`.height: 300.plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false.menubar: false./ / for ajax upload https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler for reference
        images_upload_handler: (blobInfo, success, failure) = > {
          const file = blobInfo.blob() || {}
          if(! file || ! file.size)return
          const maxSize = 10
          if (file.size > maxSize * 1024 * 1024) {
            this.$Message.warning(The maximum size of the picture is${maxSize}M`)
            return}},file_picker_types: 'file image'
      },
      myValue: this.value
    }
  },
  watch: {
    value (newValue) {
      this.myValue = newValue
    },
    myValue (newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted () {
    tinymce.init({})
  },
  methods: {
    / / add the related events, events available reference document = = > > https://github.com/tinymce/tinymce-vue All the available events
    // What events do I need to increment by itself
    onClick (e) {
      this.$emit('onClick', e, tinymce)
    },
    // You can add your own custom events, such as content emptying
    clear () {
      this.myValue = ' '}}}</script>

Copy the code

5. Introduce components


import TinymceEditor from '@/components/defineTinymce'

export default {
  name: 'CTerminalAdd'.components: {
    TinymceEditor
  },
  props: {
    currMuseum: Object
  }
}

<tinymce-editor v-model="remark" />
Copy the code

References: 1, www.tianbianyu.com/828/ 2, juejin.cn/post/684490…