v-md-editor详解(MarkDown编辑器组件)

简介: v-md-editor详解(MarkDown编辑器组件)

v-md-editor 是基于 Vue 开发的 markdown 编辑器组件。即支持vue2.0的项目也支持vue3.0的项目,另一个 mavonEditor编辑器在Vue3使用过程中不兼容。

Vue3注册使用

import { createApp } from 'vue';
import VueMarkdownEditor 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 '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';
VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});
const app = createApp(/*...*/);
app.use(VueMarkdownEditor);

常用API属性(具体可参考官方文档介绍 | v-md-editor

text:需要解析预览的 markdown 字符串。

v-model:支持双向绑定。


mode:模式。可选值:edit(纯编辑模式) editable(编辑与预览模式) preview(纯预览模式)。


default-fullscreen:是否默认开启全屏。


disabled-menus:禁用的菜单。默认值为 image 工具栏下的上传本地图片菜单

图片上传

<v-md-editor v-model="formdata.content" height="400px"  @upload-image="handleUploadImage"    :disabled-menus="[]"></v-md-editor>
 const  handleUploadImage=(event,insertImage,files)=>{
                console.log(files)
                const FormData1=new FormData()
                FormData1.append("file",files[0])
               request.post("/test2/imp",FormData1,{
                   'Content-Type': 'multipart/form-data'
               }).then(response=>{
                   console.log(response.data)
                    insertImage({
                    url:
                    "http://localhost:8080/test2/fileloadfilename="+files[0].name
               });
            })

     题外话 :在这里使用FormData通过axios把文件上传到服务器,然后通过url进行图片的回显。FormData介绍:FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,创建的FormData对象会自动将form中的表单值也包含进去,包括文件内容也会被编码之后包含进去。然后后端就可以通过MartpartFile进行接收该图片文件然后进行文件的 存储 。在这里后端代码省略,其它文章有过介绍。自己在进行编写 代码的时候出现过一个这样的错误:Current request is not a multipart request,这个问题也是折磨了自己很长时间,主要原因是在这里文件上传需要设置请求头里的content-type,请求头里 Content-Type默认是 application/json;charset=UTF-8 而这里需要是类型是 Content-Type: multipart/form-data,而我在使用axios的时候,在请求拦截器里对Content-Type进行了设置导致content-type类型发生了改变,导致一直出现错误。


相关文章
|
1月前
|
Linux UED C++
MarkEdit:相信做技术的同学都会喜欢这个编辑器的,MarkEdit编辑器,让Markdown编辑变得简单而强大,超赞~~~
嗨,大家好,我是小华同学。MarkEdit是一款跨平台的Markdown编辑器,支持Windows、macOS和Linux,提供实时预览、快捷键、自定义主题和插件系统等核心功能。它适用于日常笔记、技术文档、博客写作、学术论文和电子书制作等多种场景。
152 31
|
4月前
|
人工智能 移动开发 前端开发
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
246 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
|
5月前
|
Ubuntu Linux 测试技术
Linux系统之部署轻量级Markdown文本编辑器
【10月更文挑战第6天】Linux系统之部署轻量级Markdown文本编辑器
246 1
Linux系统之部署轻量级Markdown文本编辑器
|
6月前
|
JavaScript 前端开发 API
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
本文介绍了如何在Vue 3项目中使用v-md-editor组件库来创建markdown编辑器和预览组件。文章提供了安装步骤、如何在main.js中进行全局配置、以及如何在页面中使用VMdEditor和VMdPreview组件的示例代码。此外,还提供了一个完整示例的链接,包括编辑器和预览组件的使用效果和代码。
vue3 v-md-editor markdown编辑器(VMdEditor)和预览组件(VMdPreview )的使用
|
7月前
|
前端开发 Python
60行Python代码开发在线markdown编辑器
60行Python代码开发在线markdown编辑器
94 2
|
7月前
|
存储 安全 数据安全/隐私保护
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
Django 后端架构开发:富文本编辑器权限管理与 UEditor 、Wiki接入,实现 Markdown 文本编辑器
247 0
|
9月前
|
Linux C++ 开发者
几款主流好用的markdown编辑器介绍
几款主流好用的markdown编辑器介绍
599 0
|
9月前
Markdown编辑器--冷门实用知识总结
Markdown编辑器--冷门实用知识总结
|
9月前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
174 4
|
10月前
|
Web App开发 存储 机器学习/深度学习
欢迎使用CSDN-markdown编辑器
欢迎使用CSDN-markdown编辑器
59 0

热门文章

最新文章