1.安装tinymce、tinymce-vue
npm install tinymce@5.0.11 -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即可简单解决
参考:1.https://juejin.cn/post/6971416366351908895
2.https://dandelioncloud.cn/article/details/1564278991563747329