Tinymce-vue has two installation methods: (1) Register on the official website, and then obtain the API-key and configure Approved Domains. This installation plug-in is placed in the cloud, namely on tiny’s official website server. The initialization is generally very slow in China, so it is better not to use it in China, so as not to be ridicued as too slow, or directly blank.
(2) Plugins and voice packages are local, which is the core of this article;
1. Install the plug-in
npm install @tinymce/tinymce-vue -S
npm install tinymce -S
Copy the code
2, configure the Chinese package, create the tinymce folder in the public file of the project, and place the zh_cn.js file in the Chinese package and configure it in your public directory, as shown below:
3. Configure skins and save the skins file in the public folder > tinymce. The file comes from the following directory: node_modules > tinymce > skins
SRC -> components -> defineTinymce -> index.vue
<template>
<div class="tinymce-editor">
<editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" />
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
// Resolve the icons.js exception
import 'tinymce/icons/default'
// Editor plugins
/ / more plug-in reference: https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image' // Insert the upload image plugin
import 'tinymce/plugins/media' // Insert the video plug-in
import 'tinymce/plugins/lists' // List plugins
import 'tinymce/plugins/wordcount' // word count plug-in
import 'tinymce/plugins/autosave'
import 'tinymce/plugins/code'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/link'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/template'
import 'tinymce/plugins/fullscreen'
export default {
components: {
Editor
},
props: {
value: {
type: String.default: ' '
},
disabled: {
type: Boolean.default: false
},
plugins: {
type: [String.Array].default:
'code advlist lists image media wordcount link template fullscreen'
},
toolbar: {
type: [String.Array].default:
'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image | code'
}
},
data () {
const This = this
return {
init: {
language_url: `/tinymce/zh_CN.js`.language: 'zh_CN'.skin_url: `/tinymce/skins/ui/oxide`.content_css: `/tinymce/skins/content/default/content.css`.height: 300.plugins: this.plugins,
toolbar: this.toolbar,
branding: false.menubar: false./ / for ajax upload https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler for reference
images_upload_handler: (blobInfo, success, failure) = > {
const file = blobInfo.blob() || {}
if(! file || ! file.size)return
const maxSize = 10
if (file.size > maxSize * 1024 * 1024) {
this.$Message.warning(The maximum size of the picture is${maxSize}M`)
return}},file_picker_types: 'file image'
},
myValue: this.value
}
},
watch: {
value (newValue) {
this.myValue = newValue
},
myValue (newValue) {
this.$emit('input', newValue)
}
},
mounted () {
tinymce.init({})
},
methods: {
/ / add the related events, events available reference document = = > > https://github.com/tinymce/tinymce-vue All the available events
// What events do I need to increment by itself
onClick (e) {
this.$emit('onClick', e, tinymce)
},
// You can add your own custom events, such as content emptying
clear () {
this.myValue = ' '}}}</script>
Copy the code
5. Introduce components
import TinymceEditor from '@/components/defineTinymce'
export default {
name: 'CTerminalAdd'.components: {
TinymceEditor
},
props: {
currMuseum: Object
}
}
<tinymce-editor v-model="remark" />
Copy the code
References: 1, www.tianbianyu.com/828/ 2, juejin.cn/post/684490…