在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">
<editor
v-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 align center 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,
asp富文本编辑器
menubar: false, //顶部菜单栏显⽰
//此处为图⽚上传处理函数，这个直接⽤了base64的图⽚形式上传图⽚，
//如需ajax上传可参考www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
this.imgUpload(blobInfo, success, failure); //下⽂的⾃定义函数
}
},
}
}
此时不出意外编辑器界⾯应该出来了，接下来是上传图⽚到七⽜服务器
获取token，⾃定义上传⽅法
废话不多说，直接上代码
mounted() {
},
methods: {
async getUploadToken() {
let res = await this.$axios.$post('/common/getUploadToken') //更换⾃⼰的请求⽅法和路径
this.qnToken = res.data
},
imgUpload(blobInfo, success, failure) {
const axiosInstance = ate({ withCredentials: false }); //withCredentials 禁⽌携带cookie，带cookie在七⽜上有可能出现跨域问题        let data = new FormData();
data.append("token", this.qnToken); //七⽜需要的token，后台获取
data.append("file", blobInfo.blob());
axiosInstance({
method: "POST",
url: 'up-z1.qiniup', //上传地址，视情况更换
data: data,
timeout: 30000, //超时时间，因为图⽚上传有可能需要很久
onUploadProgress: progressEvent => {
//imgLoadPercent 是上传进度，可以⽤来添加进度条
let imgLoadPercent = und(
(progressEvent.loaded * 100) / al
);
}
})
.
then(res => {
// 调⽤成功回调，返回⽤七⽜外链地址和返回的key拼接的图⽚路径
success(`你的CDN地址${res.data.key}`);
})
.catch(function (err) {
console.log(err);
//上传失败
});
},
}
不出意外就⼤功告成了。。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。