在Vue中使用Tinymce富文本编辑器+上传图片到七牛

公司官网后台需要做一个上传新闻、公告的功能，自然而然就需要用到了富文本编辑器。
UEditor、Simditor、wangEditor、CKEditor、TinyMCE、Quill，这是当前比较热门的几个编辑器，网上评论褒贬不一，使用哪个更是根据你的业务需求来定。
当时看的说是Quill与Vue结合比较好，就使用了Quill。开发完之后，才发现有一个问题。在编辑器中插入一张图片，使他居中，在编辑器界面可以居中显示，但是上传到公司官网上后就不居中了。图片的样式竟然不是添加的行内样式，而是一个Quill的类名。再加上老大对Quill的编辑器界面没太有好感，果断放弃重新做。。。
纠结半天后，选择使用TinyMCE(中文文档)。我用的是Vue2.x ，npm直接装tinymce 包，装的是最新版本，可能和版本有关系，装完之后在组件里一引入，就开始报各种404错误，啥js、css找不到，，，最后终于找到了兼容的版本。

我使用的版本为

"@tinymce/tinymce-vue": "^2.1.0",
"tinymce":"^5.0.12"

安装npm包

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

下载的时候可以先在 static 下面建个目录 tinymce，下载 tinymce 完成后在 node_modules 中找到 tinymce目录，将skins和plugins复制到 static\tinymce 目录下面

下载中文语言包

下载地址
下载完成后将其解压到 static\tinymce 目录下面

组件内引入

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
//此时的 tinymce 包含了一些基本功能插件，如果需要其他功能，需要引入对应的功能插件，并在 plugins 和 toolbar 中使用插件
import 'tinymce/themes/modern/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'

组件内使用

<template><div class="tinymce-editor"><editorv-model="myValue":init="init"></editor></div>
</template>
<script>export default {components: {Editor},}
</script>

在 data 中进行编辑器相关的配置

  data() {return {init: {language_url: '/tinymce/langs/zh_CN.js', //语言包的路径language: 'zh_CN',skin_url: '/tinymce/skins/lightgray',height: 350,width: 1100,plugins: "lists image table colorpicker textcolor wordcount contextmenu",toolbar: 'code undo redo restoredraft | 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 | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',branding: false,menubar: false, //顶部菜单栏显示//此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，//如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handlerimages_upload_handler: (blobInfo, success, failure) => {this.imgUpload(blobInfo, success, failure); //下文的自定义函数}},}}

此时不出意外编辑器界面应该出来了，接下来是上传图片到七牛服务器

获取token，自定义上传方法

废话不多说，直接上代码

mounted() {this.getUploadToken()
},
methods: {async getUploadToken() {let res = await this.$axios.$post('/common/getUploadToken') //更换自己的请求方法和路径this.qnToken = res.data},imgUpload(blobInfo, success, failure) {const axiosInstance = axios.create({ withCredentials: false }); //withCredentials 禁止携带cookie，带cookie在七牛上有可能出现跨域问题let data = new FormData();data.append("token", this.qnToken); //七牛需要的token，后台获取data.append("file", blobInfo.blob());axiosInstance({method: "POST",url: 'https://up-z1.qiniup.com', //上传地址，视情况更换data: data,timeout: 30000, //超时时间，因为图片上传有可能需要很久onUploadProgress: progressEvent => {//imgLoadPercent 是上传进度，可以用来添加进度条let imgLoadPercent = Math.round((progressEvent.loaded * 100) / progressEvent.total);}}).then(res => {// 调用成功回调，返回用七牛外链地址和返回的key拼接的图片路径success(`你的CDN地址${res.data.key}`);}).catch(function (err) {console.log(err);//上传失败});},
}

不出意外就大功告成了。。。

在Vue中使用Tinymce富文本编辑器+上传图片到七牛相关推荐

Vue 中使用 Tinymce 富文本编辑器
参考链接:https://www.cnblogs.com/wisewrong/p/8985471.html Tinymce : 从 word 粘贴过来还能保持绝大部分格式的编辑器一. 下载 npm ...
在vue3.0项目中使用tinymce富文本编辑器
目录一.安装二.完整代码三.事项说明四.参考文档之前看了好几篇关于 vue项目中使用 tinymce的文章, import引入大量 tinymce插件, /node_modules/ti ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
Vue项目中使用 tinymce 富文本编辑器的方法，附完整源码
来源 | https://blog.csdn.net/xingmeiok/article/deta 1.tinymce相关参考资料 tinymce版资料: http://tinymce.ax-z.cn ...
Vue3中使用Tinymce富文本编辑器（版本最新）
使用目录前言一.安装方法一(npm.yarn下载) 二.安装方法二(下载官网压缩包方法)--推荐总结前言最近使用了WangEditor编辑器和Tinymce编辑器,使用方法如下(采用的编辑器 ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
vue中使用element-tiptap富文本编辑器
element-tiptap富文本编辑器 npm安装 npm install element-tiptap --save yarn安装 yarn add element-tiptap 全局引入 imp ...
在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴. 找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor.ckeditor doc ...