TinyMCE is an easy-to-use and powerful WYSIWYG rich text editor, which is widely used in both mobile and web terminals. This article mainly describes how to use TinymCE5 in combination with VUE project, which is based on the experience gained from several high-quality blogs on the Internet and my own practice. Hopefully it will help some people with their own problems.

Its Chinese reference document: Tinymce.ax-z.cn /

Plug-in installation

// Install tinymce-vue NPM install @tinymce/tinymce-vue -s // install tinymce-vue -s // install tinymce-vue -sCopy the code

Add the following dependencies configuration to the package.json file:

"Dependencies" : {" @ tinymce/tinymce - vue ":" ^ 2.0.0 ", "tinymce" : "^" 5.0.3,}Copy the code

Then go to NPM install

Operation before use

  • Liubing. me/goto/ HTTPS:…
  • After downloading, unzip the file and put it into the new Tinymce folder in the static folder of the vue project
  • Look for the tinymce folder in the node_modules package and move the skin folder to the new Tinymce folder in the static folder

Reason: the dependency package installed does not include the lang folder package by default, so it needs to be downloaded manually. The placement of skin is because tinymce rich text must remove skin to display the correct configuration. Placing it in static ensures that the configuration file can also be found in the project package

Encapsulate tinymce components with official documentation

<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"; / / editor plug-in plugins / / more plug-in reference: https://www.tiny.cloud/docs/plugins/ import "tinymce/plugins/image"; Import "tinymce/plugins/table"; Import "tinymce/plugins/lists"; / / list plugin import "tinymce/plugins/wordcount"; Export default {components: {Editor}, props: {disabled: {type: Boolean, default: false}, plugins: plugins { type: [String, Array], default: "lists image table wordcount" }, toolbar: { type: [String, Array], default: "undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat" } }, data() { return { init: { language_url: "/static/tinymce/langs/zh_CN.js", language: "zh_CN", convert_urls:false , skin_url: "/static/tinymce/skins/ui/oxide", content_css: "/static/tinymce/skins/content/default/content.css", height: 300, plugins: this.plugins, toolbar: this.toolbar, branding: false, menubar: false, / / for ajax upload images_upload_handler refer to https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler: (blobInfo, success, failure) => { var xhr, formData; xhr = new XMLHttpRequest(); xhr.withCredentials = false; Xhr.open ("POST", "address to upload file "); xhr.onload = function() { var json; if (xhr.status ! = 200) { failure("HTTP Error: " + xhr.status); return; } json = JSON.parse(xhr.responseText); // this.imgsUrl[this.imgsUrl.length - 1] = json["data"]; success(json["data"]); }; formData = new FormData(); formData.append("file", blobInfo.blob(), blobInfo.filename()); xhr.send(formData); } }, myValue: this.value }; }, mounted() { tinymce.init({}); }, methods: {// Add related events, Available events with reference to the 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 custom events of your own, such as clear content () {this.myValue = ""; } }, watch: { value(newValue) { this.myValue = newValue; }, myValue(newValue) { this.$emit("input", newValue); }}}; </script>Copy the code

Vue references components

<template> <tinymce-editor ref="editor" v-model="content" > </tinymce-editor> </template> <script> import TinymceEditor from ".. /commment/tinymce-editor"; export default { components: { TinymceEditor }, data() { return { content: "", } } } </script>Copy the code

Note: Upload_handler function is used to upload images locally. According to the data returned by the server, success(data.imgURL) should send the returned address to render the image to the rich text editor correctly