1、安装tinymce编辑器
npm i tinymce
npm i @tinymce/tinymce-vue
或：
yarn add tinymce
yarn add @tinymce/tinymce-vue
2、配置中文语言包
地址：中文语言包
注：最好将语言包放在public/langs/或static/langs/目录下，下面组件将会引用
3、封装组件
在components 目录下新建 tinymce.vue
<template>
<div>
<Editor :id="tinymceId" :init="init" :disabled="disabled" v-model="myValue"></Editor>
</div>
</template>
<script>
//引入tinymce-vue
import Editor from '@tinymce/tinymce-vue'
//公共的图片前缀
//import Global from "./Global";
export default {
components: { Editor },
props: {
//编号
id: {
type: String
},
//内容
value: {
type: String,
default: ''
},
//是否禁用
disabled: {
type: Boolean,
default: false
},
//插件
plugins: {
type: [String, Array],
default: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons autosave autoresize formatpainter',
},
//工具栏
toolbar: {
type: [String, Array],
default: 'code undo redo restoredraft | fullscreen | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
table image media charmap emoticons hr pagebreak insertdatetime print preview | bdmap indent2em lineheight formatpainter axupimgs',
}
},
data() {
let that = this;
return {
tinymceId: this.id || 'vue-tinymce' + Date.parse(new Date()),
myValue: this.value,
init: {
//汉化,路径是自定义的
language_url: '/tinymce/langs/zh_CN.js',
language: 'zh_CN',
//皮肤
skin: 'oxide',
//插件
plugins: this.plugins,
//工具栏
toolbar: this.toolbar,
//高度
height: 500,
//图片上传
images_upload_handler: function (blobInfo, success, failure) {
//文件上传的formData传递
let formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
//上传的api,和后端配合，返回的是图片的地址，然后加上公共的图片前缀
that.$api.system.uploadImage(formData).then(res => {
var url = "tt"//Global.baseUrlImg + res;
console.log(url)
success(url)
}).catch(res => {
failure('图片上传失败')
});
}
}
}
},
methods: {
},
watch: {
//监听内容变化
value(newValue) {
this.myValue = newValue
},
myValue(newValue) {
this.$emit('input', newValue)
}
}
}
</script>
<style>
.tox-notifications-container {
display: none;
}
/*在页面正常使用时不用加这个样式，在弹窗使用时，要加这个样式，因为使用弹窗，z-index层数比较低，工具栏的一些工具不能使用，要将z-index层数提高。*/
.tox.tox-silver-sink.tox-tinymce-aux {
z-index: 2100 !important;
}</style>4、引用组件
新建test.vue
<template>
<div>
<TinymceEditor :value="content" @input="newContent"></TinymceEditor>
</div>
</template>
<script>
import TinymceEditor from "./components/tinymce.vue"
export default {
components: {
TinymceEditor
},
data() {
return {
content: ""
}
},
methods: {
// 获取富文本的内容
newContent(val) {
this.content = val; // 直接更新 content 属性
}
}
}
</script>注：文件引入路径是关键
