Vue3 使用v-md-editor如何动态上传图片了

🚀 优质资源分享 🚀

学习路线指引(点击解锁) 知识定位 人群定位
🧡 Python实战微信订餐小程序 🧡 进阶级 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。
💛Python量化交易实战💛 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

Vue3 使用v-md-editor如何动态上传图片了

前端代码:


|  | <v-md-editor  |
|  | :autofocus="true" |
|  | v-model="blog.content" |
|  | height="510px" |
|  | placeholder="请输入内容" |
|  | left-toolbar="undo redo clear | h bold italic strikethrough quote | ul ol table hr | image | save " |
|  | :disabled-menus="[]" |
|  |  @upload-image="handleUploadImage" |
|  |  > |
|  | v-md-editor> |


按我以上配置后,你把图片插入或者从本地拖入,就可以激发upload-image绑定的函数,我这的名称为:handleUploadImage

先看看这个图片编辑时的图片吧

大致流程图

在setu

  • 4
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3 中按需引入 v-md-editor 编辑器,你可以按照以下步骤进行操作: 1. 首先,安装 v-md-editor 包及其相关依赖: ``` npm install v-md-editor @kangc/v-md-editor @kangc/v-md-editor/lib/theme/style/vuepress.css ``` 2. 在你的 Vue 3 项目中,创建一个名为 `vmdeditor.js` 的文件,用于配置按需引入: ```javascript // vmdeditor.js import { createApp } from 'vue' import VMdEditor from '@kangc/v-md-editor' import '@kangc/v-md-editor/lib/style/base-editor.css' import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js' // 引入你需要使用的编辑器组件 import { Vditor, CodeMirror, Prism, TextArea } from '@kangc/v-md-editor/lib/codemirror-editor' // 注册编辑器组件 VMdEditor.use(vuepressTheme, { Prism, CodeMirror, TextArea }) // 创建 Vue 应用实例 const app = createApp({}) app.use(VMdEditor) app.mount('#app') ``` 3. 在你的 Vue 3 项目中的入口文件(通常是 `main.js`)中引入 `vmdeditor.js` 文件: ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import './vmdeditor.js' // 引入 vmdeditor.js 文件 createApp(App).mount('#app') ``` 4. 现在,你可以在 Vue 组件中使用 v-md-editor 编辑器组件了。例如,在 `App.vue` 组件中使用 Vditor 编辑器: ```vue <template> <v-md-editor> <Vditor v-model="content" /> </v-md-editor> </template> <script> export default { data() { return { content: '' } } } </script> ``` 通过以上步骤,你可以按需引入 v-md-editor 编辑器,并在 Vue 3 项目中使用。记得根据你的需求选择合适的编辑器组件进行引入和使用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值