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类型发生了改变，导致一直出现错误。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/143093.html
