NPM download, if it is VUe3.0, execute the following code

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

Vue2.0 is not supported after tinymce4.0, so you need a fixed version, or a degraded version, otherwise an error will be reported

TypeError: Object(...) is not a function at Module.. / node_modules / _ @ [email protected] @ @ tinymce/tinymce - vue/lib/es2015 / main/ts/components/Editor. Js (37) Editor. Js:Copy the code

Vue2.0 is installed using the following NPM

NPM install [email protected] -s NPM install @tinymce/[email protected] -sCopy the code

After the installation is complete, copy and paste the Skins folder under Tinymce in node_modules to the public folder for later use.

Because rich text is in English by default, you need to download the corresponding language package from the official website, which contains the languages of most countries. After downloading, it is a JS file, and the Chinese package name is zh_cn.js

Download website https://www.tiny.cloud/get-tiny/language-packages/Copy the code

After downloading, put js in the public folder for future use. The directory structure is as follows.

There are four steps to using rich text on a page.

① Introduce the following four lines of code into the page and register the Editor in Components

import tinymce from "tinymce"; import Editor from "@tinymce/tinymce-vue"; import 'tinymce/themes/silver/theme'; / / here introduce error can replace the import 'tinymce/themes/modern/theme' import "tinymce/ICONS/default"; // Display rich text icon, if you do not add rich text icon display will become! not found components: { myEditor:Editor },Copy the code

② Add the following code to the template

      <myEditor id="tinymce" v-model="value" :init="init" > </myEditor>      <div v-html="value"></div>
Copy the code

③ Add the following code to data

Data () {return {value: ", init:{language_url: "/ zh_cn.js ", // Skin_url: "/skins/ UI /oxide", height: 500, // editor height: branding: False,// Whether to disable "Powered by TinyMCE"},}; },Copy the code

In Mounted, call tinymce.init({}).

mounted() {
    tinymce.init({});
},
Copy the code

A rich text editor can be displayed on the page, but the functionality is rarely inadequate.

import "tinymce/plugins/image"; Import "tinymce/plugins/link"; Introduce hyperlink plugin import "tinymce/plugins/code"; Import "tinymce/plugins/table"; Import "tinymce/plugins/lists"; import "tinymce/plugins/wordcount"; Add plugins: 'Link Image Lists table wordcount code' to data init:{} to add the plugins introduced above. Add the following line to display the plugins in the Toolbar. toolbar: "fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen",Copy the code

The page is displayed as follows:

Add the following three lines of code to drag images into rich text

import "tinymce/plugins/paste"; Paste_data_images: true, //Copy the code

For more details, see the official documentation

https://github.com/tinymce/tinymce-vue https://www.tiny.cloud/docs/integrations/vue/#tinymcevuejsintegrationquickstartguide http://tinymce.ax-z.cn/ in Chinese documentsCopy the code