vue2 使用 markdown插件 v-md-editor

最新推荐文章于 2025-04-23 15:57:48 发布
最新推荐文章于 2025-04-23 15:57:48 发布
阅读量1.3k 收藏 3
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cspandadn/article/details/131394514
本文介绍了如何在Vue2项目中使用v-md-editor Markdown插件。包括安装、在main.js中的引用及具体使用方法。同时强调了组件渲染Markdown数据时，存储需转化为HTML，并提供了数据转换的方法，如使用turndown库进行HTML到Markdown的转换。

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

参考文献

vue2 使用 markdown插件 v-md-editor_@kangc/v-md-editor_Mr.Meng_95的博客-CSDN博客

轻量版编辑器v-md-editor 编辑器

1、安装

# use npm
npm i @kangc/v-md-editor -S

# use yarn
yarn add @kangc/v-md-editor

2、引用，可用于main.js 中

import Vue from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs
import hljs
最低0.47元/天 解锁文章

200万优质内容无限畅学
is芳小芳
关注
在 Vue 2.0 中集成 Markdown 编辑器
m0_73467713的博客
08-17 3560
-- 可以添加更多的自定义工具按钮 -->
【VUE】vue-markdown插件实现markdown文件预览（含目录大纲展示）
热门推荐
VT_馒头的博客
07-17 1万+
Vue-Markdown是一个轻量级且高效的库，用于在Vue.js应用程序中渲染Markdown文本。它允许开发者以简洁的方式将Markdown的强大功能与Vue组件的灵活性相结合，提升开发效率和用户体验。vue-markdown 是一个基于 marked.js 的 Vue Markdown 插件。它是一个简单易用的 Markdown 解析器，可以方便地将 Markdown 文档解析为 HTML。它有如下特点：功能强大：支持 Markdown 语法的全部特性，例如标题、列表、链接等。
Vue2使用vue-md-editor
m0_59541783的博客
10-25 3181
Vue2 对v-md-editor的简单使用
vue2项目中使用markdown-it插件教程
最新发布
weixin_58495461的博客
04-23 1843
【代码】vue2项目中使用markdown-it插件教程。
在Vue2中使用MarkDown编辑器输入（mavonEditor）
qq_61567032的博客
12-13 2626
在开发一些需求如时，原始的文本框不满足我们的需求，展示word文档的格式又太麻烦吗，不难想到使用markdown的格式来输入和展示内容。本文介绍了在Vue2中怎么使用markdown格式的输入框和展示框。先看一下实现的效果。
vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用
10-17
然后在`src/main.js`中配置V-Md-Editor的Markdown插件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import 'v-md-editor/lib/index.css'; import VMdEditor from 'v-md-editor...
Vue脚手架Typescript使用Markdown编辑器v-md-editor记录
wobuxiangxin1314的博客
03-06 881
Vue脚手架Typescript使用Markdown编辑器v-md-eidtor记录
使用 v-md-editor 显示 Markdown 文本并支持复制代码功能
m0_50666077的博客
07-15 1110
使用 v-md-editor 显示 Markdown 文本并支持复制代码功能
Vue3 使用v-md-editor如何动态上传图片了
「 虚幻私塾」
08-07 1809
insertImage：url就表示你需要回显的地址；可以看到我上面发送了一个请求到后端，标签带上了这个文件；files：表示你拖入的图片文件，可以是多个，也可以是一个。按我以上配置后，你把图片插入或者从本地拖入，就可以激发。有没有人和我一样去看过这个file长什么样子。在setup看看这个函数（这是我写好的）先看看这个图片编辑时的图片吧。...
vuemarkdown高亮插件
08-10
vue markdown 高亮插件
前端Vue2项目使用md编辑器
ngczx的博客
01-22 1533
前端Vue2项目使用md编辑器，实现文章发布等操作。
vue2.0+使用md-edit编辑器
小刘的博客
02-05 1968
前言：小刘开发过程中，如果是博客项目一般是会用到富文本。众多富文本中，小刘选择了markdown，并记录分享了下来。上传图片菜单默认为禁用状态 设置 disabled-menus 为空数组可以开启。至此：github主题的markdown编辑器基本用法完成了。特别注意：当步骤到行号的时候，会出现依赖有问题；图片上传功能：将图片上传到服务器，然后回显图片。
vue2项目中使用markdown-it插件教程，同时解决代码块和较长单词不换行问题
m0_73761441的博客
03-07 2272
markdown-it插件可以将流式数据转换为markdown格式，并渲染成html，在页面中展示，# 可能遇到的问题 1. markdown-it中渲染代码块时，转换为code标签，导致内部段落不会自动换行，不分段会导致撑开宽度，设置white-space:normal即可 2. markdown-it组件中，如果输入较长的单词，不会自动换行，导致宽度撑开；结合::v-deep和*选择器，在markdown-it组件内设置word-break: break-all 和 overflow-wrap: br
在Vue2中使用 v-md-edit的笔记
只会hello world的小白啊
06-14 1559
v-md-edit 插件入门级教程
[zyf-markdown]介绍一款vue的markdown插件zyf-markdown
weixin_42388872的博客
05-08 517
今天介绍一款vue的markdown插件。这个插件目前只兼容vue2.x，兼容ie，vue3.0没测试过 仓库地址 国内仓库地址 仓库地址 示例 demo 安装 npm install zyf-markdown 使用 在main.js中调用 import markDown from 'zyf-markdown' Vue.use(markDown) 示例 <template> <div class="example-wrap"> <markDown v-
推荐一款基于Vue的Markdown编辑器插件——mavonEditor
weixin_34279061的博客
04-21 3124
github地址 演示地址 特点 支持简体中文、英语、法语、西班牙语四种语言 移动端适配 语法拓展全面 支持图片上传 文档丰富、功能丰富且可配置 mavonEditor 基于Vue的markdown编辑器 English Documents Demo for jsfiddle example (图片展示) PC Install mavon-editor (安装) $ npm ...
vue2集成markdown编辑器及前台渲染
Zwwxd666的博客
07-21 1825
使用set集合的不重复特性,获取所有h标签,后续根据标签名,确定缩进值大小,h1-> 缩进级别为1,根据级别*padding-left的固定值实现分层。结尾设置监听器,等待文章目录的a标签映射上去之后监听,点击后调用高亮方法.将自身作用参数传递过去,增加类样式。操作文章的组件里挂载时判断是编辑还是新增，编辑则获取vuex数据到form表单对象。如果是发布新增，路径参数为0，如果是修改，参数为文章id，以此区分编辑还是发布。监听滚动视窗原理 在以往的文章有提及,可自行查找,这里不过多赘述了。
vue3项目中使用v-md-editor
01-20
### 安装与配置 为了在 Vue3 项目中集成 `v-md-editor` 并实现 Markdown 编辑功能，需按照如下方法操作。 #### 1. 创建 Vue3 项目环境 首先确保已经创建了一个基于 Vue3 的开发环境。如果尚未创建，则可以通过 Vue CLI 或 Vite 来快速搭建一个新的 Vue3 应用程序[^2]。 #### 2. 安装依赖包 通过 npm 或 yarn 安装必要的依赖项： ```bash npm install @kangc/v-md-editor markdown highlight.js ``` 这一步骤会安装 `v-md-editor` 及其所需的解析库 `markdown` 和语法高亮工具 `highlight.js`[^1]。 #### 3. 配置Vite构建工具（适用于采用Vite的Vue3项目） 对于使用 Vite 构建系统的 Vue3 项目，在 `vite.config.js` 文件内添加 PrismJS 插件来处理代码片段的样式化展示: ```javascript import { defineConfig } from 'vite'; import prismjs from 'vite-plugin-prismjs'; export default defineConfig({ plugins: [ prismjs({ languages: ['json', /* 添加更多编程语言 */], }), ], }); ``` 此设置允许加载特定的语言支持用于代码着色。 #### 4. 初始化 v-md-editor 组件 接下来初始化 `v-md-editor` 组件，并启用行号显示等功能： ```typescript // main.ts or main.js import { createApp } from 'vue'; import App from './App.vue'; import VueMarkdownEditor, { useCreateLineNumbertPlugin } from '@kangc/v-md-editor'; const app = createApp(App); app.use(VueMarkdownEditor).use(useCreateLineNumbertPlugin()); app.mount('#app'); ``` 这段代码完成了对 `v-md-editor` 的全局注册以及行号插件的应用。 #### 5. 使用组件 最后可以在模板文件里像下面这样调用编辑器组件： ```html <template> <div id="editor"> <!-- 这里放置其他页面元素 --> <v-md-editor v-model="text"></v-md-editor> </div> </template> <script lang="ts"> import { ref } from 'vue'; export default { setup() { const text = ref(''); return { text, }; }, }; </script> ``` 上述示例展示了如何绑定数据模型到编辑区域的内容上。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值