Vue脚手架Typescript使用Markdown编辑器v-md-editor记录

难、起名

已于 2023-04-27 14:12:22 修改

阅读量870

点赞数 1

分类专栏：前端文章标签： vue.js typescript 编辑器

于 2023-03-06 14:34:57 首次发布

本文链接：https://blog.csdn.net/wobuxiangxin1314/article/details/129336928

版权

本文记录了在Vue项目中采用Typescript如何使用Markdown编辑器v-md-editor，包括CodeMirror的进阶引入，其他插件的集成，以及如何重新设计博客编辑页面，实现上传本地图片和拖拽图片功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue脚手架Typescript使用Markdown编辑器v-md-editor记录

一、需求描述
二、记录

一、需求描述

前端项目需要写博客，所以引入Markdown编辑器v-md-editor来对博客内容进行解析与编辑

二、记录

v-md-editor官方文档

1、v-md-editor进阶版CodeMirror的引入

main.ts

//Markdown编辑器配置
import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
// Prismjs
import Prism from 'prismjs';
// codemirror 编辑器的相关资源
import Codemirror from 'codemirror';
// mode
import 'codemirror/mode/markdown/markdown';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/mode/vue/vue';
// edit
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/edit/matchbrackets';
// placeholder
import 'codemirror/addon/display/placeholder';
// active-line
import 'codemirror/addon/selection/active-line';
// scrollbar