Vue tinymce富文本编辑器实现与图片保存至阿里云OSS
前言
最近在做后台的文章发布功能，选了一圈的编辑器最后选择tinymce，不仅因为界面优美、功能全面，最主要是使用教程和技术博客多，这样在遇到问题时能更快的解决。言归正传接下来给大家介绍下tinymce的实现以及图片上传阿里云oss。tinymce中文文档，tinymce官网
安装tinymce-vue
npm install @tinymce/tinymce-vue -S
下载tinymce
npm install tinymce -S
tinymce-vue与tinymce安装完毕后在static目录下新建一个tinymce文件夹，然后在node_modules 中找到 tinymce/skins目录，将其复制到static\tinymce目录下面。
static->tinymce整体目录结构如下
下载中文语言包
网址: https://www.tiny.cloud/get-tiny/downloads/选择中文语言包，下载后将zh_CN.js放置在刚才创建的static->langs下
tinymce组件编写(base64存储)
在src下components目录下创建一个tinymce文件夹，然后在tinymce文件夹下创建一个tinymce-editor.vue，tinymce-editor完整代码如下,这里图片存储以base64存储为例，下面会继续介绍阿里云OSS存储：
<template>
<div class="tinymce-editor">
<editor v-model="myValue"
:init="init"
:disabled="disabled"
@onClick="onClick">
</editor>
</div>
</template>
<script>
//导入组件与扩展包
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/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'
import 'tinymce/plugins/preview'
import 'tinymce/icons/default/icons.min.js'
export default {
components: {
Editor
},
props: {
// 传入一个value，使组件支持v-model绑定
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'lists image media table textcolor wordcount contextmenu preview'
},
toolbar: {
type: [String, Array],
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat preview'
}
},
data () {
return {
// 初始化配置
init: {
language_url: '/static/tinymce/langs/zh_CN.js', // 这里是中文语言包的路径
language: 'zh_CN',
skin_url: '/static/tinymce/skins/ui/oxide', // 这里是skin的路径用于设置主题有亮与暗两种主题
height: 380, // 设置编辑器的高度
width: 940, // 设置编辑器的宽度
plugins: this.plugins,
toolbar: this.toolbar,
branding: false,
menubar: true,
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
// 这是将图片以base64存储在代码上
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
success(img)
}
},
myValue: this.value
}
},
mounted () {
tinymce.init({
selector: 'tinymce-editor'
})
},
methods: {
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
// 需要什么事件可以自己增加
onClick (e) {
this.$emit('onClick', e, tinymce)
},
// 可以添加一些自己的自定义事件，如清空内容
clear () {
this.myValue = ''
},
watch: {
value (newValue) {
this.myValue = newValue
},
myValue (newValue) {
this.$emit('input', newValue)
}
}
}
</script>
<style scoped>
</style>
tinymce组件编写(阿里云OSS存储)
阿里云OSS存储就是将图片上传至OSS上然后返回图片链接，对图片链接进行存储。以Base64进行存储数据库优点是在提交前可以撤销图片从而不保存，缺点是一旦存储多了前端对页面的渲染会很慢。以OSS存储优点是，加载文章界面快，缺点是一旦上传只能覆盖无法撤销。代码上的差异主要在images_upload_handler中。
1.安装oss
npm install ali-oss --save
2.获取到访问oss的accessKeyId和accessKeySecret：
3.跨域问题
设置如下
然后在RAM访问控制->用户->给创建的用户添加AliyunOSSFullAccess和AliyunSTSAssumeRoleAccess权限权限:
4.在项目中配置oss.js
在src下components目录下新建js文件夹，在其下创建oss.js,代码如下：
let OSS = require('ali-oss')
export let client = new OSS({
region: '', // 填你的oss所在区域，例如oss-cn-shenzhen
accessKeyId: '', // 填你的oss的accessKeyId
accessKeySecret: '', // 填你的oss的accessSecret
bucket: 'wwj01' // 你创建的路径名称
})
5.tinymce-editor(阿里云)完整代码
<template>
<div class="tinymce-editor">
<editor v-model="myValue"
:init="init"
:disabled="disabled"
@onClick="onClick">
</editor>
</div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/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'
import 'tinymce/plugins/preview'
import 'tinymce/icons/default/icons.min.js'
import {client} from '../js/oss.js'
export default {
components: {
Editor
},
props: {
// 传入一个value，使组件支持v-model绑定
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
plugins: {
type: [String, Array],
default: 'lists image media table textcolor wordcount contextmenu preview'
},
toolbar: {
type: [String, Array],
default: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat preview'
}
},
data () {
return {
// 初始化配置
init: {
language_url: '/static/tinymce/langs/zh_CN.js',
language: 'zh_CN',
skin_url: '/static/tinymce/skins/ui/oxide',
height: 380,
width: 940,
plugins: this.plugins,
toolbar: this.toolbar,
branding: false,
menubar: true,
// 此处为图片上传处理函数，这里以阿里云oss上传图片为例，
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
images_upload_handler: (blobInfo, success, failure) => {
var filename = blobInfo.filename()
var index = filename.lastIndexOf('.')
var suffix = filename.substring(index + 1, filename.length)
// 重构文件名 加上时间序列防止重名
filename = this.$md5(blobInfo.base64()) + this.getTime() + '.' + suffix
client.multipartUpload(filename, blobInfo.blob()).then(function (result) {
if (result.res.requestUrls) {
console.log('返回结果', result)
success(result.res.requestUrls[0].split('?')[0])
}
}).catch(function (err) {
console.log(err)
})
}
},
myValue: this.value
}
},
mounted () {
tinymce.init({
selector: 'tinymce-editor'
})
},
methods: {
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
// 需要什么事件可以自己增加
onClick (e) {
this.$emit('onClick', e, tinymce)
},
// 可以添加一些自己的自定义事件，如清空内容
clear () {
this.myValue = ''
},
getTime () {
var Time = new Date()
var year = Time.getFullYear()
var month = Time.getMonth() + 1
var date = Time.getDate()
var hours = Time.getHours()
var minute = Time.getMinutes()
var seconds = Time.getSeconds()
var time = year + month + date + hours + minute + seconds
return time
}
},
watch: {
value (newValue) {
this.myValue = newValue
},
myValue (newValue) {
this.$emit('input', newValue)
}
}
}
</script>
tinymce组件使用
HTML部分
// 实现文本双向绑定msg
<template>
<div class="release_tinymce">
<tinymce-editor v-model="msg" :disabled="disabled" @onClick="onClick" ref="editor"></tinymce-editor>
</div>
</template>
JS部分
<script>
// 组件引入
import TinymceEditor from '../tinymce/tinymce-editor'
export default {
name: 'releasepage',
components: {
TinymceEditor
},
data () {
return {
msg: 'Welcome to Use Huaweintel Editor',
disabled: false,
}
},
mounted: function () {
},
watch: {
},
methods: {
// 鼠标单击的事件
onClick (e, editor) {
console.log('Element clicked')
console.log(e)
console.log(editor)
},
// 清空内容
clear () {
this.$refs.editor.clear()
}
}
}
</script>