The VUE project version is 2.x, remember: @tinymce/tinymce-vue cannot be used in vue2 with a version above 4;
if a higher version is installed, uninstall: npm uninstall @tinymce/tinymce-vue
Step 1: Install
npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S
Step Two: Configuration Files
Find the tinymce under node_modules and copy the skins and themes under the directory to the static/tinymce file path. The langs here is the Chinese language package added by myself. The language package download address: Language Packages | Trusted Rich Text Editor
| TinyMCE
third Step: component package TinymceText.vue
file path: src/components/TinymceText.vue
<template>
<div class="tinymce-editor">
<editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick">
</editor>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
export default {
components: {
Editor
},
props: {
//传入一个value，使组件支持v-model绑定
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default:
// ' anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'
'lists image media table wordcount '
},
toolbar: {
type: [String, Array],
default:
// 'undo redo | searchreplace | bold italic | underline | strikethrough | alignleft aligncenter alignright | outdent indent blockquote removeformat subscript superscript code codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime table forecolor backcolor'
'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat hr'
}
},
data () {
return {
//初始化配置
init: {
language_url: '../static/tinymce/langs/zh-Hans.js', // 根据自己文件的位置，填写正确的路径。路径不对会报错
language: 'zh_CN',
skin_url: '../static/tinymce/skins/ui/oxide', // 根据自己文件的位置，填写正确的路径。路径不对会报错
height: 300,
plugins: this.plugins,
toolbar: this.toolbar,
branding: false,
menubar: false,
//此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
success(img)
console.log('failure', failure)
},
resize: false
},
myValue: this.value
}
},
mounted () {
tinymce.init({
})
},
methods: {
//添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
//需要什么事件可以自己增加
onClick (e) {
this.$emit('onClick', e, tinymce)
},
//可以添加一些自己的自定义事件，如清空内容
clear () {
this.myValue = ''
}
},
watch: {
value (newValue) {
this.myValue = newValue
},
myValue (newValue) {
this.$emit('input', newValue)
}
}
}
</script>
<style scoped>
</style>
Note: The path here must be written correctly, otherwise the page will not produce rich text effects and the console will report an error
init: {
language_url: '../static/tinymce/langs/zh-Hans.js', // 根据自己文件的位置，填写正确的路径。路径不对会报错
language: 'zh_CN',
skin_url: '../static/tinymce/skins/ui/oxide', // 根据自己文件的位置，填写正确的路径。路径不对会报错
Step 4: The component uses TextEditor.vue
file path: src/views/TextEditor.vue
<template>
<div>
<h1>富文本编辑器</h1>
<Tinymce class="setTinymce" :height="200" v-model="value"></Tinymce>
</div>
</template>
<script>
import Tinymce from "@/components/TinymceText.vue";
export default {
data() {
return {
value:''
};
},
components: {
Tinymce,
},
};
</script>
Finally, look at the effect:
the text effect can be added to the encapsulated rich text component TinymceText.vue according to the needs;
at the beginning of the configuration, various errors occurred, and there are two situations in summary:
1. The tinymce version is installed too high, this configuration It is the configuration method of VUE2.x;
2. The file path here is wrong: language_url: '…/static/tinymce/langs/zh-Hans.js',
skin_url: '…/static/tinymce/skins/ui/oxide',
If you encounter a problem, be patient and solve it a little bit! !
Reference article:
https://blog.csdn.net/xiaomanonyo/article/details/123177405?ops_request_misc=&request_id=&biz_id=102&utm_term=vue2%E4%B8%AD%E4%BD%BF%E7%94%A8tinymce&utm_medium=distribute .pc_search_result.none-task-blog-2 blog sobaiduweb~default-6-123177405.article_score_rank_blog&spm=1018.2226.3001.4450