Vue reference tinmce steps can refer to https://www.cnblogs.com/wisewrong/p/8985471.html website appear Uncaught SyntaxError: Unexpected token < wrong personal reason is that online reference import ‘tinymce/themes/modern/theme this step and current version installation path does not correspond, Import “tinymce/themes/mobile/theme” the correct path to the wouldn’t import ‘tinymce/themes/silver/theme this reference is editor does not appear to need reference

Init initialization time skin_url: ‘/ static/tinymce/skins/lightgray’, this path is not on, should be changed to skin_url: ‘/ static/tinymce/skins/UI/oxide,’

Temporarily found so many problems, can display normally

Vue cli 3 + tinymce5.0 integration reference: liub37.com/vue-tinymce…

Install tinymce-vue NPM install @tinymce/tinymce-vue -s Install tinymce NPM install tinymce -s Put the following configuration into package.json to execute NPM install

“@tinymce/tinymce-vue” : “^2.0.0”, “Tinymce” : “^5.0.3”, Download Chinese language pack Tinymce provides many language packs, here we download Chinese language pack

Go to node_modules and find tinymce. Copy the skins directory to public/tinymce to create the following directory:

Initialize the import base file

Import tinymce from ‘tinymce/tinymce’ import Editor from ‘@tinymce/tinymce-vue’ import ‘tinymce/themes/silver’ Register tinymCE-vue in components to use

To initialize configuration items, refer to the official website documentation. Here are a few important ones

Init: {language_url: ‘/tinymce/langs/ zh_cn.js’,// language package path language:’ zh_CN ‘,// language/skin_URL: ‘/tinymce/skins/ UI /oxide’,// skin path height: 300,// editor height: false,// whether to disable “Powered by tinymce” menubar: False,// top menu bar display} extension editor default only basic functions, if you also need to upload pictures, insert tables and other functions need to add plug-ins such as upload pictures and insert tables plug-in

Import ‘tinymce/plugins/image’ import ‘tinymce/plugins/media’ // Insert video plugin import ‘tinymce/plugins/table’ // Insert table plug-in import ‘tinymce/plugins/lists/list/plug-in import’ tinymce/plugins/wordcount / / word count plug-in You also need to add buttons to the plugins configuration and toolbar toolbar

Plugins: ‘Lists Image Media Table Wordcount’, toolbar: ‘undo redo | formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist Numlist outdent text-indent | lists image media table | removeformat ‘, here we tend to encapsulate it once again, so that other places can refer to at any time