The recent project in Vue has the function of adding and editing articles, which requires a rich text editor. After consulting Baidu and Google, I finally chose Tinymce, which is also the first rich text editor I have used (because I have never met similar needs before), and the experience is very good

But in the use of time also encountered problems, say my use of the steps of pa

1. Install dependencies

npm i tinymce
Copy the code

2. Customize the Component TinymceEditor as follows:

├── Bass Exercises - Components │ ├─ Bass Exercises - Index. VueCopy the code

3. Add it to the page

Import Editor from '@ / components/TinymceEditor / / component declare components: {' Editor: Editor}Copy the code

4. Use it on the page

<editor v-model="articleMain.content" />
Copy the code

5. There was a problem in the preview, all the ICONS in the editor were undefined, baidu could not load the ICONS. Js file in the Tinymce package normally, resulting in syntax error

6. After checking the Tinymce documentation, introduce the following statement into the component, the problem is resolved.

import 'tinymce/icons/default'
Copy the code