The company’s official website background needs to do a function to upload news, announcements, naturally need to use the rich text editor. UEditor, Simditor, wangEditor, CKEditor, TinyMCE, Quill, these are some of the most popular editors. Online reviews are mixed, and which one to use depends on your business needs. At that time, it was said that the combination of Quill and Vue was better, so Quill was used. After the development, it was discovered that there was a problem. Insert an image in the editor and center it. The image will be centered in the editor interface, but it will not be centered when it is uploaded to the company website. The image style is not the added inline style, but a Quill class name. Coupled with the boss of Quill’s editor interface is not too good, decided to give up and redo… After agonizing for a while, I chose to use TinyMCE. I used Vue2. X, NPM directly installed tinymce package, installed is the latest version, may be related to the version, after installed in the component introduced, began to report various 404 errors, what JS, CSS can not find, finally found compatible version.

The version I use is

"@ tinymce/tinymce - vue" : "^ 2.1.0", "tinymce" : "^ 5.0.12"Copy the code

Install the NPM package

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

After downloading tinymce, find the tinymce directory in node_modules and copy skins and plugins into the static\tinymce directory

Download the Chinese language pack

Download addressOnce the download is complete unzip it to the static\tinymce directory

In-component import

Import tinymce from 'tinymce/tinymce' import Editor from '@tinymce/tinymce-vue' // Need to introduce the corresponding function plug-in, And use the plugin in the plugins and the toolbar import 'tinymce/themes/modern/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'Copy the code

In-component use

<template>
  <div class="tinymce-editor">
    <editor
      v-model="myValue"
      :init="init"
    ></editor>
  </div>
</template>
<script>
  export default {
      components: {
          Editor
      },
  }
</script>
Copy the code

Do editor related configuration in data

Data () {return {init: {language_url: '/tinymce/langs/ zh_cn.js ', // language_url: 'zh_CN', skin_URL: '/tinymce/skins/lightgray', height: 350, width: 1100, plugins: "lists image table colorpicker textcolor wordcount contextmenu", toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \ styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \ table image media charmap emoticons  hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs', fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px', font_formats: 'Microsoft YaHei,Helvetica Neue,PingFang SC, Sans-Serif; PingFang SC,Microsoft YaHei,sans-serif; Song typeface = simsun, serif; Italics = FangSong, serif; Blackbody = SimHei, sans-serif. Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; ', branding: false, menubar: False, // top menu bar display // here is the image upload function, this directly uses the base64 image form upload image, / / for ajax upload images_upload_handler refer to https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler: (blobInfo, success, failure) => { this.imgUpload(blobInfo, success, failure); // Custom function}},}}Copy the code

At this time no accident editor interface should come out, the next is to upload pictures to the seven cattle server

Obtain the token and customize the upload method

Without further ado, let’s get right to the code

mounted() { this.getUploadToken() }, methods: {async getUploadToken() {let res = await this.$axios.$post('/common/getUploadToken') // Change your request method and path this.qntoken = res.data }, imgUpload(blobInfo, success, failure) { const axiosInstance = axios.create({ withCredentials: false }); //withCredentials forbids cookies. Cross-domain problems may occur when cookies are in use. Let data = new FormData(); data.append("token", this.qnToken); Data.append ("file", blobinfo.blob ()); // Data.append ("file", blobinfo.blob ()); AxiosInstance ({method: "POST", url: 'https://up-z1.qiniup.com', // upload address, depending on the case data: data, timeout: OnUploadProgress: ProgressEvent => {//imgLoadPercent Let imgLoadPercent = math.round ((progressevent.loaded * 100)/progressevent.total); ${res.data.key} '; ${res.data.key} '; ${res.data.key} ' }) .catch(function (err) { console.log(err); // Upload failed}); }},Copy the code

And we’re done without incident…