vue中使用富文本编辑器mavon-editor粘贴图片上转到腾讯COS

最新推荐文章于 2024-06-24 08:47:45 发布
最新推荐文章于 2024-06-24 08:47:45 发布
阅读量900 收藏 2
点赞数
分类专栏： mavon-editor 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lg993372246/article/details/114746232
版权

文章目录

前言

使用富文本编辑器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不到

秦时明月之安康
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mavonEditor：mavonEditor-基于Vue的markdown编辑器，支持多种个性化功能
02-03
mavonEditor：mavonEditor-基于Vue的markdown编辑器，支持多种个性化功能
富文本编辑器 实现ctrl+v粘贴图片并上传、word粘贴带图片
Mr_Zang666的博客
04-17 809
if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { //判断浏览器内核是否为Trident内核IE8.0。// 当数据包大小不是数据单元的整数倍时，读取最后剩余的小于数据单元的所有数据。// 忽略简单form字段而不是上传域的文件域(等)然后访问http://localhost:8088/ueditor/ 就可以测试了。
富文本框编辑器 图片粘贴上传，实现图文粘贴，图片自动上传
最新发布
alisky119的博客
06-24 1088
UEDITOR WORD图片上传，UEDITOR – 支持WORD上传的富文本编辑器，UEDITOR的WORD图片转存-UEDITOR篇，百度UEDITOR实现WORD图片自动转存，富文本编辑器UEDITOR支持从WORD复制粘贴保留格式和图片的插件，富文本编辑器粘贴WORD内容，说几点，首先就是没有提供完整的产品，或者测试示例，或者提供的示例缺依赖，缺包，缺代码，测试的时候问题一大堆，不是这错就是那错的，真的挻浪费时间的，也可以看得出来，文章里面的方案基本上都是不行的，word图片快捷键粘贴，
富文本编辑器复制word文档中的图片
Jioho的博客
07-29 7630
title: 富文本编辑器复制word文档中的图片 date: 2020-06-24 sidebar: auto categories: 前端 tags: 富文本编辑器 word文档 文章有点长，感觉每次写文章都特别啰嗦，如果不想看过程的话直接跳到总结，那边有核心的方法~ 富文本编辑器复制 word 文档中的图片 问题点：从 word 文档复制进来的内容的图片都是 file:/// 协议，这时候如果我们的页面是 http://或者 https:// 协议的话，就不允许读取图片了。 除非页面也是.
富文本编辑器实现一键粘帖word图片
weixin_45525177的博客
02-13 591
富文本编辑器实现一键粘帖word图片
mavonEditor中的图片上传与删除(前后端交互)
m0_56758388的博客
09-15 575
使用Mavon-Editor编辑器上传本地图片到又拍云云存储（Vue+SpringBoot）
qq_44727672的博客
08-21 814
使用Mavon-Editor编辑器上传本地图片到又拍云云存储（Vue+SpringBoot）
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
vue富文本编辑器 vue-quill-editor.js quill版本1.3.6
07-01
vue富文本编辑器vue-quill-editor.js ...vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 https://blog.csdn.net/cplvfx/article/details/125557966
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
10-16
在本文中，我们将深入探讨如何在Vue项目中集成Element UI和vue-quill-editor，创建一个功能丰富的富文本编辑器，并实现图片的自定义上传。Vue是一个轻量级、高效的前端框架，Element UI则是一个基于Vue的组件库，...
mavon-editor 富文本编辑器图片上传和获取html，markdown节点信息 详解
weixin_53561783的博客
12-17 2169
一.下载安装 npm install mavon-editor --save 二.全局挂载和使用 import mavonEditor from "mavon-editor"; import "mavon-editor/dist/css/index.css"; Vue.use(mavonEditor); 三.组件封装即使用 <template> <div> <mavon-editor ref="md" placeholder
Vue系列-使用mavon-editor编辑并保存markdown到后台，同时回显图片
ws6afa88的博客
09-24 7557
1. 安装并配置mavon-editor到Vue项目 前端vue，后端springboot实现markdown文件的编辑与上传。主要使用mavon-editor插件 1.1 安装 npm install mavon-editor --save 1.2 配置 新建mavenEditor.js // 全局注册 // import with ES6 import Vue from 'vue' import mavonEditor from 'mavon-editor' impo
在vue项目中使用MavonEditor，实现上传图片。
答案的博客
06-18 5309
啦啦啦啦啦！我又来更新了！ 由于ckeditor过于复杂，当然有可能是因为博主的过于愚笨，导致上传图像失败，并且浪费我宝贵的时间，so，我就还是选择一个比较中规中矩的编辑器，够我使用就ok了！ 那么重点来咯！ 1.首先进进入项目的目录下，摁住shift+右键，，运行 npm uninstall mavon-editor命令，它就会自动安装！ 2.安装完事之后呢，我们就要在项目...
ueditor富文本复制粘贴含有图片的word内容处理，并且支持截图或单独复制图片粘贴
hcjlwn的博客
11-07 1045
公司最近升级项目，要求富文本支持含多图片的word的内容复制粘贴，没办法，为了用户体验只能去找解决方案，通过各种查资料，整理出来亲测有效的方案。：1、监听粘贴事件，通过e.clipboardData 获取剪贴板里的信息2、获取图片的本地路径，同时通过rtf内容中查找图片数据3、把图片转为base64（没有做上传到服务器，后期有需要再加上）
mavonEditor-文档
weixin_47032465的博客
05-26 1264
如不需要hightlight代码高亮显示，你应该设置ishljs为false。默认工具栏按钮全部开启, 传入自定义对象，可以选择启用部分按钮。中的语言解析文件和代码高亮样式将在使用时按需加载.如果需要自定义添加工具栏按钮，可以通过以下方式。开启代码高亮props。起以下文件将默认使用。
mavon-editor编辑器与图片上传
weixin_40145253的博客
03-17 2184
mavon-editor编辑器与图片上传 图片上传是一个常用的功能，今天我们来实现基于Vue的Markdown编辑器——mavon-editor的图片上传功能。 一、安装与引入 1. 首先在命令行安装mavon-editor编辑器。 npm install mavon-editor --save 2. 在main.js中引入。 import editor from "mavon-editor"; import "mavon-editor/dist/css/index.css" Vue.use(edit
富文本编辑器实现一键复制word图片
weixin_45525177的博客
02-13 362
但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容，如果上传到服务器后其他人也访问不了，网上找了很多编辑器发现没有一个能直接解决这个问题。这个时候我们在编辑器中使用jsonp获取到处理完的图片数据替换原来的file:///xxxxxx.jpg路径就搞定了。然后我写了一个监听粘贴事件的操作，用来获取粘贴之后的file:///xxxx.jpg这种路径。编辑器中的图片地址已经全部替换成了服务器的图片地址，其它的用户也能够正常访问。所有图片都能够保存在服务器中，而且支持分布式图片存储。
vue使用富文本编辑器vue-quill-editor 怎么调整图片大小
10-31
2. 使用CSS选择器选中富文本编辑器中的图片元素。 3. 设置图片元素的宽度和高度属性，例如：width: 50%; height: auto;。 4. 根据需要调整宽度和高度的具体数值。 下面是一个示例CSS样式代码，可以将富文本编辑器中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值