The installation

Home page install Tinymce

npm install --save tinymce
Copy the code

Then directly use the official integrated component TinymCE-Vue

// For Vue.js 3.x users:
npm install --save "@tinymce/tinymce-vue@^4"
// For Vue.js 2.x users:
npm install --save "@tinymce/tinymce-vue@^3"
Copy the code

Initialize the

 <template>
   <div id="app">
     <editor
       v-model="myValue"
       :init="init"
     />
   </div>
 </template>

 <script>
 import tinymce from 'tinymce/tinymce'
 import Editor from '@tinymce/tinymce-vue'

 export default {
   name: 'app'.components: {
     Editor
   },
   data() {
     return {
       init: {
         language_url: '/tinymce/langs/zh_CN.js'.language: 'zh_CN'.skin_url: '/tinymce/skins/lightgray'.plugins: 'autoresize autolink lists advlist lineheight image link table paste'.toolbar: 'forecolor backcolorstrikethrough | bullist numlist | image link | table',},myValue: ' '}}}</script>
Copy the code

Then a basic tinyMCE rich text is ready to use

Language pack

TinyMCE is an English language pack by default. If you need to use other languages, you can download the language pack from the official website

After downloading, you need to put the downloaded file in the corresponding directory under the public folder, and change the reference address during initialization

Use of plug-ins

The official plug-in

TinyMCE has a large number of plug-ins integrated into it, which can be introduced directly when used and added during initialization

import 'tinymce/plugins/advlist'
Copy the code

Third-party plug-ins

After downloading the third-party plug-in, you need to save the downloaded file in the corresponding directory under the public folder and import it during initialization

import '@public/tinymce/plugins/lineheight/plugin'
Copy the code

Attachment: Plug-in Chinese documentation

Custom picture upload

Step 1: Enable the image plugin

Introduce the image plug-in. Add the image to the plugins parameter.

Step 2: Use the images_upload_handler function for initialization

 init: {
         images_upload_handler: (blobInfo, success) = > {
            let formData = new FormData()
            formData.append('file', blobInfo.blob());
            uploadAction(window._CONFIG['domianURL'] +"/sys/oss/file/upload", formData).then((res) = > {
              if (res.success) {
                  const img = res.result
                  success(img)
              }
            })
          }
       }
Copy the code

Paste the filter

Step 1: Enable the paste plugin

Introduce the Paste plug-in. Paste is added to the plugins argument.

Step 2: Use the paste_preprocess function for initialization

 init: {
        paste_preprocess: function(plugin, args){
            if (args.content.indexOf('src="file:') > -1) {  
              args.content = args.content.replace(/.' ')}}}Copy the code

Args. Content is the paste content. After modification, the function does not return a value, which means that the function is executed before the paste content is inserted.

Use of multiple editors

You just need to loop through the wrapped component

When using multiple editors, you can use the following method if you want to manipulate a single rich text

tinymce.editors[this.index].insertContent(`<span></span>`)
Copy the code

Tinymce is the array of instances of the current page, and index is the rich text index you want to operate on

Add: Tinymce operation Api, including how to set tinymce content, get Tinymce content, get Tinymce cursor, generate shortcut keys, etc.

The last

The above are just some of the problems I have encountered while using TinyMCE, and I would like to share them with you as a summary. I hope you can give me your advice!

Attached: TinymCE Chinese document Tinymce official document