Vue使用mavon-editor插件解析markdown编辑预览

最新推荐文章于 2024-05-16 23:00:11 发布
最新推荐文章于 2024-05-16 23:00:11 发布
阅读量5.5k 收藏 19
点赞数 3
分类专栏： 前端 文章标签： npm vue.js es6 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43736435/article/details/105610226
版权
1、安装mavon-editor插件
npm install mavon-editor --save
2、在main.js中引入mavon-editor
//全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'	//解决编辑器的功能显示问题
Vue.use(mavonEditor)
3、HTML使用插件展示单栏(预览区域)
<mavon-editor
        class="md"
        :value="webDataString"
        :subfield="false"
        :defaultOpen="
最低0.47元/天 解锁文章
onpine
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
mavon-editor样式失效，快速解决
欢迎来到iceseasyh的博客
02-25 2511
mavon-editor样式失效的解决办法，冲兄弟们
Vue：Vue-cli2结合mavonEditor实现MarkDown编辑器
KaiSarH
03-27 748
Vue-cli2结合mavonEditor实现MarkDown编辑器
使用mavonEditor写文章，并且很好的预览。
小道仙的后宫
08-25 9487
最近在写博客，选了好久的编辑器最终选中了mavonEditor，它也没有让我失望，下面我们就来看一下它的使用吧 1、演示（先来看一下我做成的最终效果吧） 1-1:编辑 1-2：预览 （由于截图工具的原因，没有全部框出来。一直到点个赞上面都是噢） 2、解释 2-1、我编辑和预览都是用的mavonEditor。最开始我想自己去实现预览功能，我发现这个想法是愚蠢的 2-2、使用mavonEd...
Web前端最全Vue：Vue-cli2结合mavonEditor实现MarkDown编辑器(2)，2024年最新面试
最新发布
2401_84412953的博客
05-16 682
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。
mavonEditor：mavonEditor-基于Vue的markdown编辑器，支持多种个性化功能
02-03
mavonEditor：mavonEditor-基于Vue的markdown编辑器，支持多种个性化功能
vue集成mavon-editor编辑的内容转html格式有差异的坑
好好学习，不断总结
02-26 1080
问题 使用showdown将内容转为html预览，格式与编辑时预览的不一致 我们在mavon-editor编辑好的内容保存后，想在网页中展示，需要转换格式，转换步骤： 第一步，install showdown 第二步，在对应的页面进行转换 import ('showdown').then(showdown => { const converter = new showdown.Converter() this.contentHtml = converter.makeHtml(内容);/
记录mavon-editor在Vue中的使用(编辑及预览功能)
weixin_43401138的博客
10-09 625
【代码】记录mavon-editor在Vue中的使用(编辑及预览功能)
Vue中使用mavonEditor插件实现markdown在线编辑
BADAO_LIUMANG_QIZHI的博客
04-25 3396
场景 若依前后端分离版手把手教你本地搭建环境并运行项目： 若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_若依前后端分离 在上面的基础上，怎样实现markdown在线编辑功能。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、插件地址 mavon-editor - npm 2、安装插件 npm install mavon-ed
vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用
10-17
vue3 v-md-editor markdown编辑器（VMdEditor）和预览组件（VMdPreview ）的使用
mavonEditor:mavonEditor-基于Vue的markdown编辑器，支持各种个性化功能
05-10
mavonEditor 喜爱 & 想要将mavonEditor变得更好的小伙伴，邮这里 ps: 毕业/工作已经把我榨干，能维护mavon... import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' // use Vue.use
vue3.0 vue-quill-editor.rar
09-19
vue3.0+vue-quill-editor+element富文本编辑引入可直接使用 可上传图片调整图片大小
Vue-Quill-Editor富文本编辑器的使用教程
12-29
本文为大家分享了Vue Quill Editor富文本编辑器的具体使用方法，供大家参考，具体内容如下 先看效果图：    1、下载Vue-Quill-Editor  npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor...
vue3使用v-md-editor预览markdown内容
weixin_60886885的博客
06-01 3760
vue3使用v-md-editor预览markdown内容
Vue--整合mavon-editor编辑器(markdown编辑和预览)
IT利刃出鞘的博客
10-12 690
本文介绍Vue如何使用markdown编辑器。 mavon-editor是目前比较主流的markdown编辑器，本文介绍它的使用方法。
在vue中使用marked解析MARKDOWN,生成目录,运行代码示例
热门推荐
Baymax的博客
10-28 1万+
前言 对于我来说一个博客系统就是用来总结自己所学得知识的。写写文章，巩固技术，写文章我就采用了mavon-editor,在后台将写好的Markdown文章保存到数据库里，前台在获取Markdown文章将其解析成html代码然后渲染。所以写文章不用愁了，那如何解析Markdown呢！我前前后后用了mavon-editor（包太大），vue-marked（功能少）等等插件来实现！结果不满足预期。所以不如使用marked.js直接解析呢！包小效率高，于是就对marked.js进行封装，实现了目录，运行代码块，图片
mavonEditor富文本存储md文件以及md文件解析成html文件
weixin_44770377的博客
03-13 785
演示详见链接 添加链接描述 一、安装 npm install mavon-editor --save 二、在main.js中全局注册 //富文本 import mavonEditor from 'mavon-editor' import 'mavon-editor/dist/css/index.css' Vue.use(mavonEditor) 三、vue中使用 <mavon-edit...
解析Markdown格式的JSON数据
心生于物而死于物
01-31 8432
markdown [url]http://baike.baidu.com/link?url=A_TMdRrgzrZkjnleWuS9zgi1yahFct3tcVee2UusJme9Ye9p-djw8t7DKnS2EtD9vIyjeDLc61V5jQKL7ezmZ586JvADtnaloq2u7gMjO9u[/url] 是一种简单的标记语法,通过该标记语法，它可以使普通文本内容具有一定的格式。 ...
vue中展示markdown文件，使用mavon-editor的详细步骤
一只有点酸的程序员 的博客
01-18 6900
前言 最近搞了一段时间vue开发，发现一个比较常见的需求，但是整体的解决方案不是很明确，就是在vue开发的网页中展示markdown。这是一个对程序猿很常见的需求，在网页中有层次的展示一些内容，Markdown是一个非常好的方式。 所以准备写一篇博客，介绍在vue项目下，使用mavon-editor展示md文件的过程，具体在实现过程和思路中包含了：mavon-editor的插件介绍、引入和如何在.vue文件中使用，并在最后给出了一个实现例子，大家可以选需要的部分查看。 写了1个示例程序，跑起来是上面的效果
vue 3.2.13 mavon-editor
01-16
Vue 3.2.13和Mavon Editor是两个不同的库，它们可以在Vue项目中一起使用来实现富文本编辑器的功能。 首先，你需要在你的Vue项目中安装Vue 3.2.13和Mavon Editor。你可以使用npm或yarn来安装它们。在命令行中运行以下命令： ```shell npm install vue@3.2.13 npm install mavon-editor ``` 安装完成后，你需要在你的Vue项目中引入Vue和Mavon Editor。在你的Vue组件中，可以按照以下方式引入它们： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import MavonEditor from 'mavon-editor'; import 'mavon-editor/dist/css/index.css'; const app = createApp(App); app.use(MavonEditor); app.mount('#app'); ``` 在上面的代码中，我们首先引入了Vue和Mavon Editor。然后，我们使用`app.use(MavonEditor)`来注册Mavon Editor插件。最后，我们使用`app.mount('#app')`将Vue应用挂载到HTML页面上的一个元素上。 现在，你可以在你的Vue组件中使用Mavon Editor了。在模板中，你可以使用`<mavon-editor></mavon-editor>`标签来渲染Mavon Editor组件。例如： ```html <template> <div> <mavon-editor v-model="content"></mavon-editor> </div> </template> <script> export default { data() { return { content: '' }; } }; </script> ``` 在上面的代码中，我们使用`v-model`指令将Mavon Editor的内容绑定到了`content`属性上。这样，当用户在编辑器中输入内容时，`content`属性的值也会相应地更新。 这就是使用Vue 3.2.13和Mavon Editor实现富文本编辑器的基本步骤。你可以根据自己的需求进一步定制和配置Mavon Editor的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值