Vue富文本编辑器

最新推荐文章于 2024-09-06 22:20:29 发布

ps酷教程

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量195

点赞数

分类专栏：前端学习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_16992475/article/details/126092240

版权

前端学习专栏收录该内容

145 篇文章 7 订阅

订阅专栏

本文介绍了如何在Vue项目中安装和使用MavonEditor，一个Markdown编辑器，并展示了如何结合axios实现图片上传到服务器的功能。通过在组件中注册和配置MavonEditor，以及监听图片添加事件，可以实现在Markdown文本中插入服务器返回的图片URL。

摘要由CSDN通过智能技术生成

mavon-editor

原文：https://www.bilibili.com/video/BV1U44y1W77D

link:https://gitee.com/wCHCw/mavonEditor/#/wCHCw/mavonEditor/blob/master/doc/cn/upload-images.md

安装mavon-editor

npm install mavon-editor -S

注册组件

// main.js全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

Vue页面使用

<div>
    <mavon-editor ref="md" v-model="value" :ishljs="true" @imgAdd="imgAdd"/>
</div>

<!-- 预览 -->
<mavon-editor
    class="md"
    :value="article.content"
    :subfield="false"
    :defaultOpen="'preview'"
    :toolbarsFlag="false"
    :editable="false"
    :scrollStyle="true"
    :ishljs="true"
/>

 // 绑定@imgAdd event
imgAdd(pos, $file) {
  let $vm = this.$refs.md
  // 第一步.将图片上传到服务器.
  const formData = new FormData();
  formData.append('file', $file);
  axios({
    url: 'http://localhost:9090/file/upload',
    method: 'post',
    data: formData,
    headers: {'Content-Type': 'multipart/form-data'},
  }).then((res) => {
    // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
    $vm.$img2Url(pos, res.data);
  })
},