nuxt版本如下:
"nuxt": "^2.15.7"
注:本文引入的富文本编辑没有引入图片上传插件,如需引入则参考其他博文进行引入。
1.引入tinymce依赖
本人尝试引用过最新版本的tinymce依赖,但不知道为啥引入的时候会报依赖错误,故经过尝试,引入如下版本的依赖:
npm install @tinymce/tinymce-vue@2.1.0 tinymce@5.3.2
2.在static路径下创建tinymce文件夹,如下:
3.在node_modules中找到下载好的tinymce文件夹,并将其中的shins文件以及里面的东西复制到static/tinymce中,如下:
node_modules文件夹
node_modules/tinymce/shins文件夹
复制到static/tinymce
4.汉化tinymce,下载tinymce的中文语言包,并放在static/tinymce/langs中,如下:
中文语言包下载地址:
https://www.tiny.cloud/get-tiny/language-packages/
下载完成之后得到:
解压缩之后得到:
把langs复制到static/tinymce文件夹下,如下:
5.在项目工程中的components目录下创建文件tinymce-editor,如下:
6.在创建的tinymce-editor文件中创建index.vue文件,并添加如下内容:
index.vue
<template>
<client-only>
<editor id="tinymce" v-model="myValue" :init="init" :disabled="disabled"></editor>
</client-only>
</template>
<script>
import editor from '@tinymce/tinymce-vue'
// 引入tinymce,并在客户端初始化
let tinymce;
if (process.client) {
tinymce = require('tinymce/tinymce');
// 样式图标
require('tinymce/icons/default/icons');
// 主题样式
require('tinymce/themes/silver/theme');
// 插入表格插件
require('tinymce/plugins/table');
// 列表插件
require('tinymce/plugins/lists');
// 字数统计插件
require('tinymce/plugins/wordcount');
// 自动链接插件
require('tinymce/plugins/autolink');
// 水平分割线
require('tinymce/plugins/hr');
// 预览
require('tinymce/plugins/preview');
}
export default {
components: {editor},
props: {
//传入一个value,使组件支持v-model绑定
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'lists table wordcount link hr autolink preview'
},
toolbar: {
type: [String, Array],
default: 'undo redo | formatselect | bold italic hr | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent table | removeformat preview'
}
},
data() {
return {
//初始化配置
init: {
// 控件语言
language_url: '/tinymce/langs/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,
// 工具栏,如果是false表示隐藏
toolbar: this.toolbar,
// 隐藏最上方menu菜单
menubar: false,
// 拼写检查
browser_spellcheck: true,
// 去水印
branding: false,
statusbar: false, // 隐藏编辑器底部的状态栏
elementpath: false, // 禁用下角的当前标签路径
paste_data_images: 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)
}
},
myValue: this.value
}
},
created() {
},
methods: {
//添加相关的事件,可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
//需要什么事件可以自己增加
onClick(e) {
this.$emit('onClick', e, tinymce)
},
//可以添加一些自己的自定义事件,如清空内容
clear() {
this.myValue = ''
}
},
mounted() { // 用process.client判断一下环境再执行
this.$nextTick(() => {
if (process.client) {
window.tinymce.init({});
}
})
},
watch: {
value(newValue) {
this.myValue = newValue
},
myValue(newValue) {
this.$emit('input', newValue)
}
}
}
</script>
<style scoped>
</style>
7.在要使用该富文本的.vue文件中引入组件,如下:
<template>
<!-- 大小可自定义 -->
<div style="width: 100%;height: 500px;">
<tinymceEditor
v-model="msg"
:disabled="disabled"
ref="editor"
></tinymceEditor>
</div>
</template>
<script>
import tinymceEditor from '~/components/tinymce-editor'
export default {
components: {
tinymceEditor
},
data (){
return {
msg:'富文本编辑器',
disabled:false
}
}
}
</script>