After the update tinymce 5, how to use tinymce-vue

Project rich text editor originally using wangEditor , this is a very lightweight, simple editor

But the company's business upgrade, you want a more full-featured editor, I am looking for a long time, the current common editors are these:

UEditor : Baidu front of the open source project, powerful, based on jQuery, but no longer has to maintain, and defines a back-end code, modify more strenuous

WYSIWYG-Bootstrap : miniature, easy to use, small and beautiful, just Bootstrap + jQuery ...

KindEditor : powerful, concise code, you need to configure the background, but I have not seen updated

wangEditor : Lightweight, compact, easy to use, but after upgrading to 3.x, not easy to customized development. However, the authors very hard, in a broad sense and I are a family, make a call

Quill : function itself is not much, but you can expand on their own, api also easy to understand, if you can read English, then ...

summernote : no in-depth study, UI pretty, is a small but beautiful editor, but I need a big

In the case of such a reference, I finally chose tinymce this does not even take the ladder are not open official website editor (almost compulsively), mainly due to two things:

1. GitHub a lot of stars, but also a fully functional;

2. The only word coming from a paste can keep most of the format editor;

3. The rear end does not need to find the person to change the interface scan code, isolated front and rear ends;

4. The two say good too!

Project uses vue-cli 3.x version, tinymce5

1. Install and references

Note: Only install tinymce-vue No, need to install tinymce, otherwise it will error

npm install tinymce
npm install @tinymce/tinymce-vue

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'

2. Initialize Editor (record of problems and solutions)

By Example initialization find editor does not display, report " theme.js:1 Uncaught SyntaxError: Unexpected token <" this error.

Solution: manually introduced tinymce theme, the init ({}) Riga method theme: 'silver', useless.
```
import 'tinymce/themes/silver'
```
But not being given the editor is not displayed, continue to study, found that also need to define the skin , in the init ({}) Riga skin: "oxide"useless.

Solution: first create a directory in the public folder named tinymce, tinymce then find the skin wrapped in node_modules, the copy to the public / tinymce, and finally when the init configuration skin_url initialize tinymce in:
```
<editor :init="{skin_url:'/tinymce/skins/ui/oxide'}"></editor>
```
Note: The resources into absolute path, read a public folder resources. If the application is not deployed at the root of the domain name, then you need to configure publicPath prefix URL.
```
<editor :init="{skin_url:`${publicPath}tinymce/skins/ui/oxide`}"></editor>
...
data () {
    return {
      publicPath: process.env.BASE_URL
    }
}
```

3. Configuration

Some common configuration properties

  browser_spellcheck: true, // 拼写检查  branding: false, // 去水印  elementpath: false, //禁用编辑器底部的状态栏  statusbar: false, // 隐藏编辑器底部的状态栏  paste_data_images: true, // 允许粘贴图像  menubar: false, // 隐藏最上方menu

plugins

Use a plug-in plug-ins need to introduce this, for example:

import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'

plugins: 'fullscreen preview'

toolbar

You can use "|" packet to a toolbar, to a certain type of functionality into a set, for example:
```
toolbar: 'bold italic underline | alignleft aligncenter alignright'
```

4. Customize

The language to Chinese

step:
1. In the official website to download the language pack https://www.tiny.cloud/get-tiny/language-packages/
2. Before downloading the new language pack into the folder tinymce
3. When you add the following code to initialize
```
      language_url: `/tinymce/langs/zh_CN.js`,
      language: 'zh_CN',
```

Add custom function button in the toolbar tinymce5

this.tinymceInit = {
...
toolbar: 'imageUpload',
  setup: (editor) => {
    editor.ui.registry.addButton('imageUpload', { tooltip: '插入图片', icon: 'image', onAction: () => { } }) } }