TinyMCE plugin installed

Tinymce officially provides the TinymCE-Vue component for the VUE project

npm install @tinymce/tinymce-vue -SCopy the code

If there is a tinymce service to purchase, you can refer to tinymCE-Vue’s instructions and use Tinymce directly through apI-key.

I downloaded TinyMCE without signing up or buying the service.

npm install tinymce -SCopy the code

After the installation is successful, look for tinymce/skins in node_modules and copy the skins directory to the static directory. For clarity, I’ve wrapped the Tinymce directory.



Since Tinymce has an English interface by default, our project needs a Chinese interface, so we need to download a Chinese language package. You can also download the language packs you need.



Place the downloaded language package in the static/tinymce directory



Initialize the

The introduction of the file

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'Copy the code

Tinymce-vue is a component that needs to be registered in Components to use it.

<editor v-model="myValue" :init="init"></editor>Copy the code

Init is an initial configuration item. For details about the API, see the official documentation.

init: {  
language_url: '/static/tinymce/zh_CN.js',  
language: 'zh_CN',  
height: 300,  
skin_url: '/static/tinymce/skins/ui/oxide',  
branding: false,  
menubar: false,},Copy the code

Skin_url points to the skin file that was copied out earlier

Extend the component

The default editor has only basic functions. If you need to upload pictures, insert tables, etc., you need to add plug-ins

import 'tinymce/plugins/image'// Insert the upload image plugin import'tinymce/plugins/media'// Insert the video plugin import'tinymce/plugins/table'// Insert the table plugin import'tinymce/plugins/lists'// List plugin import'tinymce/plugins/wordcount'// word count plug-inCopy the code

Once you add a plug-in, the default function button is added to the toolbar toolbar toolbar, which can also be customized

plugins: {
  type: [String, Array],
  default: 'lists image media table textcolor wordcount contextmenu'
},
toolbar: {
  type: [String, Array],
  default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'
}Copy the code

I wrapped it up for later use.

Complete code:

<template>
  <div class="tinymce-editor">
    <editor v-model="myValue" 
           :init="init"
           :disabled="disabled"
            @onClick="onClick">
    </editor>
  </div>
</template><script>
  import tinymce from 'tinymce/tinymce'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/silver/theme'
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/media'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/contextmenu'
  import 'tinymce/plugins/wordcount'
  import 'tinymce/plugins/colorpicker'
  import 'tinymce/plugins/textcolor' 
 exportDefault {components: {Editor}, props: {// Pass a value to enable the component to support the V-model binding value: {type: String,
        default: ' '
      },
      disabled: {
        type: Boolean,
        default: false
      },
      plugins: {
        type: [String, Array],
        default: 'lists image media table textcolor wordcount contextmenu'
      },
      toolbar: {
        type: [String, Array],
        default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat'}},data() {
      return{// Initialize configuration init: {language_url:'/static/tinymce/zh_CN.js',
          language: 'zh_CN',
          height: 300,
          skin_url: '/static/tinymce/skins/ui/oxide',
          plugins: this.plugins, 
         toolbar: this.toolbar, 
         branding: false, 
         menubar: false, / / upload handler for the picture here, this directly with the base64 picture form to upload pictures, / / for ajax upload https://www.tiny.cloud/docs/configure/file-image-upload/ for reference#images_upload_handler
          images_upload_handler: (blobInfo, success, failure) => {
            const img = 'data:image/jpeg; base64,' + blobInfo.base64()
            success(img)
          }
        },
        myValue: this.value
      }
    }, 
   mounted() { tinymce.init({}) }, methods: {/ / add the related events, of events available reference document = = > > https://github.com/tinymce/tinymce-vue All the available events / / what kind of event can increase the onClick (e) {this.$emit('onClick', e, tinymce)}, // You can add some of your own custom events, such as empty contentclear() {
        this.myValue = ' '
      } 
   },
    watch: {
      value(newValue) {
        this.myValue = newValue
      },
      myValue(newValue) {
        this.$emit('input', newValue)
      }
    }
  }
</script>
<style scoped>
</style>Copy the code

Use:

<template>
  <div>
    {{ msg }}
    <tinymce-editor v-model="msg"
                    :disabled="disabled"
                    @onClick="onClick"
                    ref="editor">
    </tinymce-editor>
    <button @click="clear"</button> < button@click ="disabled = true"> Disable </button> </div> </template> <script> import TinymceEditor from'./tinymce-editor'
  export default {
    components: {
      TinymceEditor
    },
    data() {
      return {
        msg: 'Welcome to Use Tinymce Editor',
        disabled: false}}, methods: {// mouse click events onClick(e, editor) {console.log('Element clicked') console.log(e) console.log(editor)}, // Empty the contentsclear() {
        this.$refs.editor.clear()
      }
    }
  }
</script>
<style scoped>
</style>Copy the code