tinymce vue2.0集成 并解决响应式丢失问题 文件引入问题(若依版本)、自定义上传图片、视频、样式被el-dialog遮挡问题
1.安装tinymce、tinymce-vue
npm install tinymce@5.4.1 -S
npm install @tinymce/tinymce-vue@3.0.1 -S
2.下载中文语言包
- tinymce提供了很多的语言包 语言包地址
3.配置中文包、配置skins
下载完后放到静态文件public目录下 1、在public目录下新建tinymce目录，将上面下载的语言包解压到该目录
2、在node_modules里面找到tinymce目录,将此目录下skins目录复制到public/tinymce里面
3、在init配置中增加一下代码
language_url: `/tinymce/zh_CN.js`,
language: 'zh-Hans',
content_css: `/tinymce/skins/content/default/content.css`,
4.封装成组件
- 在compontent目录中新建TinyEditor/index.vue
<template>
<div class="tinymce-box">
<TinymceVueEdit
v-model="myValue"
:init="init"
:disabled="disabled"
@click="onClick"
>
</TinymceVueEdit>
</div>
</template>
<script>
// 文档 http://tinymce.ax-z.cn/
// 引入组件
import tinymce from 'tinymce/tinymce'; // tinymce默认hidden，不引入不显示
import Editor from '@tinymce/tinymce-vue';
import request from '@/utils/request';
// // 引入富文本编辑器主题的js和css
// import 'tinymce/skins/content/default/content.css';
import 'tinymce/themes/silver/theme.min.js';
import 'tinymce/icons/default/icons' // 解决了icons.js 报错Unexpected token '<'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/image'; // 插入上传图片插件
import 'tinymce/plugins/media'; // 插入视频插件
import 'tinymce/plugins/table'; // 插入表格插件
import 'tinymce/plugins/lists'; // 列表插件
import 'tinymce/plugins/wordcount'; // 字数统计插件
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/help';
import { getToken } from '@/utils/auth';
export default {
components: {
TinymceVueEdit: Editor
},
name: 'TinyEditor',
props: {
// 默认的富文本内容
value: {
type: String,
default: ''
},
// 禁用
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'link lists image code table wordcount media preview fullscreen'
// 其他工具： 'help'
},
toolbar: {
type: [String, Array],
default: 'bold italic underline strikethrough | fontsizeselect | formatselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | undo redo | link unlink code lists table image media | removeformat | fullscreen preview'
}
},
data() {
let _this = this;
return {
uploadUrl: '/file/upload', // 上传的图片服务器地址
refresh: true,
init: {
language_url: `/tinymce/zh_CN.js`,
language: 'zh-Hans',
skin_url: `/tinymce/skins/ui/oxide`,
// skin_url: 'tinymce/skins/ui/oxide-dark', // 暗色系
content_css: `/tinymce/skins/content/default/content.css`,
convert_urls: false,
height: 450,
// content_css（为编辑区指定css文件）,加上就不显示字数统计了
// content_css: `${this.baseUrl}tinymce/skins/content/default/content.css`,
// （指定需加载的插件）
plugins: this.plugins,
toolbar: this.toolbar, // （自定义工具栏）
statusbar: true, // 底部的状态栏
menubar: 'file edit insert view format table tools help', // （1级菜单）最上方的菜单
branding: false, // （隐藏右下角技术支持）水印“Powered by TinyMCE”
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
// 在这校验上传图片大小
this.images_upload(blobInfo, success, failure);
},
file_picker_callback: function (callback, value, meta) {
if (meta.filetype === 'media') {
// 模拟上传本地视频
let input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', '.mp4');
input.onchange = function () {
let file = this.files[0];
// console.log(file);
let fd = new FormData();
fd.append('file', file);
_this.saveImgOrFile(fd).then((response) => {
callback(response.data.url);
});
};
input.click();
}
}
},
myValue: ''
};
},
mounted() {
tinymce.init({});
},
methods: {
// 图片上传，我这里转成了FormData，并且发送post请求给后端上传阿里云返回url，把url给编辑器
images_upload: function (blobInfo, success, failure) {
let formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
this.saveImgOrFile(formData).then((response) => {
success(response.data.url);
});
},
saveImgOrFile(params) {
return request({
headers: {
'Content-Type': 'multipart/form-data',
Authorization: 'Bearer ' + getToken()
},
url: this.uploadUrl,
method: 'post',
data: params
});
},
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
// 需要什么事件可以自己增加
onClick(e) {
this.$emit('onClick', e, tinymce);
}
},
watch: {
value: {
deep: true,
immediate: true,
handler(newValue, oldValue) {
this.$set(this,'myValue',newValue || '');
}
},
myValue(newValue = '') {
this.$emit('input', newValue || '');
}
}
};
</script>
5.使用
<template>
<div class="app-container home">
<TinyEditor v-model="content"></TinyEditor>
</div>
</template>
<script>
import TinyEditor from '@/components/TinyEditor '
export default {
name: "Index",
data() {
components: {
TinyEditor
},
return {
content:"",
};
},
methods: {
}
};
</script>
6.全局样式，解决遮挡问题
// tinymce样式--开始 .tox-fullscreen .tox.tox-tinymce.tox-fullscreen { z-index: 8000 !important; } .tox-tinymce-aux { z-index: 8001 !important; } // tinymce样式--结束
7.解决响应式丢失 v-model不生效问题
- 1.第二次打开弹窗时，富文本组件中的内容为空
- 原因：此处就不贴图了，原因是在第二次dialog弹窗时，第一次弹窗的tinycme组件未销毁，因此先于第二次dialog出现，而第二次dialog中的传值也就后于富文本组件初始化，也就未被渲染了。
- 解决方案：我的解决方案如下代码，只要保证富文本后于dialog初始化就行了，因此在富文本组件上添加 v-if即可简单解决
8.需要npm tinymce/icons/default/icons 问题
当增加以下代码，导致项目报错，提示要npm时，是tinymce版本问题
import 'tinymce/icons/default/icons' // 解决了icons.js
需要卸载当前版本，重新更换更好版本，依次执行一下代码即可
// 1.卸载 npm uninstall tinymce // 2.重新安装 npm install tinymce@5.4.1 -S
参考：1.https://juejin.cn/post/6971416366351908895
2.https://dandelioncloud.cn/article/details/1564278991563747329
浙公网安备 33010602011771号