vue中使用富文本编辑器mavon-editor粘贴图片上转到腾讯COS
文章目录
- 前言
- 一、步骤
-
- 1.安装依赖
- 2.组装mavon-editor组件
-
- 1.编辑模式
- 2.不使用CDN
- 3.上传图片到腾讯COS封装
- 4.阅读模式
- 总结
- 其他富文本
前言
使用富文本编辑器mavon-editor粘贴图片上转到腾讯COS
一、步骤
1.安装依赖
yarn add mavon-editor
yarn add cos-js-sdk-v5
在main.js文件中引入mavon-editor：
2.组装mavon-editor组件
1.编辑模式
我把编辑模式和阅读模式分成了两个组件
编辑模式代码：
<template>
<div>
<mavon-editor
ref="mavonEditor"
v-model="content"
:toolbars="markdownOption"
:ishljs="true"
code-style="atom-one-dark"
@imgAdd="imgAdd"
:externalLink="externalLink"
:style="{'font-size': fontSize + 'px', 'min-height': minHeight + 'px'}"
/>
</div>
</template>
<script>
import tencentCosUpload from '@/libs/tencent-cos-upload'
export default {
name: 'MavonEditorEditMode',
components: {
},
props: {
value: {
type: String,
default: '',
},
height: {
type: [ Number, String, ],
required: false,
default: 450,
},
minHeight: {
type: [ Number, String, ],
required: false,
default: 450,
},
fontSize: {
type: [ Number, String, ],
required: false,
default: 13,
},
},
data () {
return {
content: this.value,
markdownOption: {
fontSize: '12px',
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
/* 1.3.5 */
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件）
/* 1.4.2 */
navigation: true, // 导航目录
/* 2.1.8 */
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
/* 2.2.1 */
subfield: true, // 单双栏模式
preview: true, // 预览
},
externalLink: {
markdown_css: function () {
// 这是你的markdown css文件路径
return '/mavon-editor/markdown/github-markdown.min.css'
},
hljs_js: function () {
// 这是你的hljs文件路径
return '/mavon-editor/highlightjs/highlight.min.js'
},
hljs_css: function (css) {
// 这是你的代码高亮配色文件路径
return '/mavon-editor/highlightjs/styles/' + css + '.min.css'
},
hljs_lang: function (lang) {
// 这是你的代码高亮语言解析路径
return '/mavon-editor/highlightjs/languages/' + lang + '.min.js'
},
katex_css: function () {
// 这是你的katex配色方案路径路径
return '/mavon-editor/katex/katex.min.css'
},
katex_js: function () {
// 这是你的katex.js路径
return '/mavon-editor/katex/katex.min.js'
},
},
}
},
computed: {
},
watch: {
value: {
handler: function (n, o) {
this.content = this.value
},
},
content: {
handler: function (n, o) {
this.$emit('input', n)
},
},
},
mounted () {
},
activated () {
},
deactivated () {
},
destroyed () {
},
methods: {
// 绑定imgAdd event
async imgAdd (pos, file) {
console.log('ddd')
await tencentCosUpload(file, src => {
console.log(src)
if (src) {
this.$refs.mavonEditor.$img2Url(pos, src)
}
})
},
getHTML () {
return this.$refs.mavonEditor.d_render
},
},
}
</script>
<style lang="less" scoped>
</style>
2.不使用CDN
发现从v2.4.2开始，有些文件的引入使用了cdn方式，cdn有的时候很慢，为了不用CDN，可以做如下设置
yarn add copy-webpack-plugin@4.6.0 --dev
const CopyWebpackPlugin = require('copy-webpack-plugin')
config.plugins.push(
new CopyWebpackPlugin([
{
from: 'node_modules/mavon-editor/dist/highlightjs',
to: path.resolve(__dirname, 'dist/mavon-editor/highlightjs'), // 插件将会把文件导出于/dist/highlightjs之下
},
{
from: 'node_modules/mavon-editor/dist/markdown',
to: path.resolve(__dirname, 'dist/mavon-editor/markdown'), // 插件将会把文件导出于/dist/markdown之下
},
{
from: 'node_modules/mavon-editor/dist/katex', // 插件将会把文件导出
to: path.resolve(__dirname, 'dist/mavon-editor/katex'),
},
]),
)
然后通过组件externalLink属性就可以直接引入本地的依赖文件。 （注意：本地开发的时候，要记得重新 npm run 才生效）
3.上传图片到腾讯COS封装
注意到我把粘贴上传图片到腾讯COS的方法封装在了tencent-cos-upload.js文件里面，代码如下：
import COS from 'cos-js-sdk-v5'
import {
getTencentCosCredentials, } from '@/api/tencent-cos-upload'
import {
Message,
} from 'view-design'
import md5 from 'js-md5'
export default async function tencentCosUpload (file, callback) {
// const cos = new COS({
// SecretId: 'xxx',
// SecretKey: 'xxx',
// })
const uploadFileName = md5(JSON.stringify(file)) + '-' + file.name
const res = await getTencentCosCredentials()
// 后台接口返回 密钥相关信息
const {
credentials, expiration, expiredTime, requestId, startTime, } = res.data.data
const bucket = 'xxx'
const region = 'ap-guangzhou'
const dir = 'xxx/'
const cos = new COS({
getAuthorization: function (options, callback) {
// eslint-disable-next-line standard/no-callback-literal
callback({
TmpSecretId: credentials.tmpSecretId,
TmpSecretKey: credentials.tmpSecretKey,
XCosSecurityToken: credentials.sessionToken,
StartTime: startTime,
ExpiredTime: expiredTime,
expiration: expiration,
requestId: requestId,
})
},
})
// 分片上传文件
cos.sliceUploadFile({
Bucket: bucket,
Region: region,
Key: dir + uploadFileName,
Body: file,
onHashProgress: function (progressData) {
console.log('校验中', JSON.stringify(progressData))
},
onProgress: function (progressData) {
console.log('上传中', JSON.stringify(progressData))
},
}, function (err, data) {
console.log(err || data)
if (err) {
Message.error({
render: h => {
return h('div', {
domProps: {
innerHTML: '文件上传失败，请重新上传',
},
})
},
duration: 0,
closable: true,
})
} else {
callback('http://' + data.Location)
// cos.getObjectUrl({
// Bucket: bucket,
// Region: region,
// Key: data.Key,
// Sign: true,
// }, function (err, data) {
// console.log(err || data.Url)
// if (err) {
// Message.error({
// render: h => {
// return h('div', {
// domProps: {
// innerHTML: '文件上传失败，请重新上传',
// },
// })
// },
// duration: 0,
// closable: true,
// })
// } else {
// callback(data.Url)
// }
// })
}
})
}
上传图片到腾讯COS的用法可以参考下面的文档：
https://cloud.tencent.com/document/product/436/11459
https://cloud.tencent.com/document/product/436/35651
上传成功之后，腾讯云会返回图片的地址，发现图片没有呈现出来，
直接在浏览器访问出现的也不是图片，
像是权限不对，如果是这样，需要设置存储桶的权限，
设置之后，富文本编辑器mavon-editor就能呈现图片了，
如果不设置存储桶的权限，也可以请求带有签名的图片地址，不过返回的图片的url会非常长，非常难看
4.阅读模式
<template>
<div>
<mavon-editor
class="md"
:value="value"
:boxShadow="false"
:subfield="false"
:defaultOpen="'preview'"
:toolbarsFlag="false"
:editable="false"
:scrollStyle="true"
:ishljs="true"
:externalLink="externalLink"
:style="{'font-size': fontSize + 'px'}"
/>
</div>
</template>
<script>
export default {
name: 'MavonEditorReadMode',
components: {
},
props: {
value: {
type: String,
default: '',
},
height: {
type: [ Number, String, ],
required: false,
default: 450,
},
fontSize: {
type: [ Number, String, ],
required: false,
default: 13,
},
},
data () {
return {
externalLink: {
markdown_css: function () {
// 这是你的markdown css文件路径
return '/mavon-editor/markdown/github-markdown.min.css'
},
hljs_js: function () {
// 这是你的hljs文件路径
return '/mavon-editor/highlightjs/highlight.min.js'
},
hljs_css: function (css) {
// 这是你的代码高亮配色文件路径
return '/mavon-editor/highlightjs/styles/' + css + '.min.css'
},
hljs_lang: function (lang) {
// 这是你的代码高亮语言解析路径
return '/mavon-editor/highlightjs/languages/' + lang + '.min.js'
},
katex_css: function () {
// 这是你的katex配色方案路径路径
return '/mavon-editor/katex/katex.min.css'
},
katex_js: function () {
// 这是你的katex.js路径
return '/mavon-editor/katex/katex.min.js'
},
},
}
},
computed: {
},
watch: {
},
mounted () {
},
activated () {
},
deactivated () {
},
destroyed () {
},
methods: {
},
}
</script>
<style lang="less" scoped>
</style>
总结
写代码，只有自己亲自经历一遍，才知道有哪些坑，记录下来，以后用的时候方便太多
其他富文本
editor.md
tui-editor，没用过
tinymce，有坑，cdn引入的css经常get不到