vue2 使用 markdown插件 v-md-editor

最新推荐文章于 2024-08-22 12:36:27 发布
最新推荐文章于 2024-08-22 12:36:27 发布
阅读量1k 收藏 3
点赞数
文章标签： 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的转换。
摘要由CSDN通过智能技术生成

参考文献

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元/天 解锁文章
is芳小芳
关注
Vue脚手架Typescript使用Markdown编辑器v-md-editor记录
wobuxiangxin1314的博客
03-06 712
Vue脚手架Typescript使用Markdown编辑器v-md-eidtor记录
Vue3 使用v-md-editor如何动态上传图片了
「 虚幻私塾」
08-07 1696
insertImage：url就表示你需要回显的地址；可以看到我上面发送了一个请求到后端，标签带上了这个文件；files：表示你拖入的图片文件，可以是多个，也可以是一个。按我以上配置后，你把图片插入或者从本地拖入，就可以激发。有没有人和我一样去看过这个file长什么样子。在setup看看这个函数（这是我写好的）先看看这个图片编辑时的图片吧。...
vuemarkdown高亮插件
08-10
vue markdown 高亮插件
npm ERR! peer vue@“^2.6.14“ from @wangeditor/editor-for-vue@1.0.2,wangEditor
最新发布
weixin_54048131的博客
08-22 314
发现:vue@2.6.12 npm错误！来自根项目的vue@"2.6.12 " npm错误！同行vue@"^2.6.14”来自@ Wang editor/editor-for-vue @ 1 . 0 . 2 npm错误！node _ modules/@ Wang editor/editor-for-vue npm错误！@ Wang editor/editor-for-vue @ @ * "来自根项目 npm错误！将此命令与- force或- legacy-peer-deps配合使用 npm错误！
Vue2使用vue-md-editor
m0_59541783的博客
10-25 2511
Vue2 对v-md-editor的简单使用
vue-markdown插件实现markdown文件预览（含目录大纲展示）
m0_59415345的博客
07-17 3341
Vue-Markdown是一个轻量级且高效的库，用于在Vue.js应用程序中渲染Markdown文本。它允许开发者以简洁的方式将Markdown的强大功能与Vue组件的灵活性相结合，提升开发效率和用户体验。vue-markdown 是一个基于 marked.js 的 Vue Markdown 插件。它是一个简单易用的 Markdown 解析器，可以方便地将 Markdown 文档解析为 HTML。它有如下特点：功能强大：支持 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...
VUE3使用v-md-editor 模仿小程序文档 锚点定位阅读功能 解决图片不显示问题
weixin_40857648的博客
02-10 1814
读取MD折腾了三天，搞完觉得还是简单的 http://ckang1229.gitee.io/vue-markdown-editor/zh/ 这个开发者的文档写的还算清楚 第一步（不要装错版本了） main.ts注册 但是我的eslint发生报错了 这个只解决了一半 还有两个通过ignore解决也没发现问题 这好像是开发者回复。 我是只是用展示的功能，就这么导入的 上面的代码是锚点定位的，下面是展示的 附上官方使用方式 <template> <div> &l
Vue-Markdown：高效渲染Markdown的Vue组件
gitblog_00086的博客
03-24 1824
Vue-Markdown：高效渲染Markdown的Vue组件 项目地址:https://gitcode.com/gh_mirrors/vu/vue-markdown 是一个强大的Vue.js组件，用于将Markdown文本优雅地转换为HTML，它让在Vue应用中集成Markdown内容变得异常简单。该项目通过利用Vue的可复用性和灵活性，结合Markdown的简洁性，为开发者提供了出色的用户体验...
vuemarkdown一个基于vuejs的markdown语法解析插件
08-10
vue-markdown 一个基于vue.js的markdown语法解析插件
vue3-markdown-it::sparkles: 一个很棒的 Vue 3 markdown-it 包装插件，甚至可以支持外部插件！
07-23
:sparkles: vue3-markdown-it :sparkles: 一个很棒的 Vue 3 包装插件，甚至可以支持外部插件！ :magnifying_glass_tilted_right: 安装 npm install vue3-markdown-it 支持的插件 -而其中，一切都开始它 - 添加缩写 - 添加锚点 - 添加定义列表 markdown-it-emoji - 添加表情符号 markdown-it-footnote - 添加脚注 markdown-it-highlightjs - 为代码块添加高亮 markdown-it-ins - 添加<ins>标签 markdown-it-mark - 添加标记/突出显示 markdown-it-sub - 添加下标 markdown-it-sup - 添加上标 markdown-it-task-lists - 添加任务列表 markdown-it-toc-done-right - 添加目录 用法 全球使
在Vue2中使用 v-md-edit的笔记
只会hello world的小白啊
06-14 1193
v-md-edit 插件入门级教程
vue2.0+使用md-edit编辑器
小刘的博客
02-05 1836
前言：小刘开发过程中，如果是博客项目一般是会用到富文本。众多富文本中，小刘选择了markdown，并记录分享了下来。上传图片菜单默认为禁用状态 设置 disabled-menus 为空数组可以开启。至此：github主题的markdown编辑器基本用法完成了。特别注意：当步骤到行号的时候，会出现依赖有问题；图片上传功能：将图片上传到服务器，然后回显图片。
0.9、VUE-Vue MarkDown 插件 MavonEditor
༺ bestcxx的专栏 ༻
11-20 932
文章目录Vue.js 的 MarkDown 插件 MavonEditorMavonEditor 官方说明操作步骤安装全局声明在单模板中使用效果参考 Vue.js 的 MarkDown 插件 MavonEditor 比较简单 MavonEditor 官方说明 MavenEditor 操作步骤 安装 $ npm install mavon-editor --save 全局声明 核心代码 import mavonEditor from 'mavon-editor' import 'mavon-editor/di
vue集成MarkDown编辑器插件
weixin_44735933的博客
03-02 1347
安装mavon-editor插件 npm install mavon-editor --save 在main.js中引入mavon-editor // 导入markdown编辑器 import mavonEditor from "mavon-editor"; import "mavon-editor/dist/css/index.css";3 // 使用MarkDown编辑器 Vue.use(mavonEditor); 在组件中使用 <template> <div cla.
[zyf-markdown]介绍一款vue的markdown插件zyf-markdown
weixin_42388872的博客
05-08 461
今天介绍一款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 3002
github地址 演示地址 特点 支持简体中文、英语、法语、西班牙语四种语言 移动端适配 语法拓展全面 支持图片上传 文档丰富、功能丰富且可配置 mavonEditor 基于Vue的markdown编辑器 English Documents Demo for jsfiddle example (图片展示) PC Install mavon-editor (安装) $ npm ...
vue2项目vue-quill-editor插件使用
07-28
您好！对于Vue 2项目中使用vue-quill-editor插件，您可以按照以下步骤进行操作： 1. 首先，您需要安装vue-quill-editor插件。可以使用npm或yarn来进行安装，命令如下： ``` npm install vue-quill-editor 或 yarn add vue-quill-editor ``` 2. 在Vue项目的入口文件（通常是main.js）中引入vue-quill-editor插件，并注册为全局组件。示例如下： ```javascript import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.snow.css' // 引入样式文件 Vue.use(VueQuillEditor) ``` 3. 在需要使用富文本编辑器的组件中，使用`<vue-quill-editor>`标签来渲染富文本编辑器。例如，在一个名为`Editor.vue`的组件中，可以这样使用： ```html <template> <div> <vue-quill-editor v-model="content" /> </div> </template> <script> export default { data() { return { content: '' } } } </script> ``` 4. 可以通过`v-model`指令来绑定富文本编辑器的内容，以便在组件中获取用户输入的内容。 5. 根据需求，您可以进一步配置vue-quill-editor插件的选项。具体的配置选项可以参考官方文档。 这样，您就可以在Vue 2项目中使用vue-quill-editor插件来实现富文本编辑功能了。希望对您有帮助！如果还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值