这个markdown编辑器无敌了!

优采云 发布时间: 2022-05-28 07:05

  这个markdown编辑器无敌了!

  

  前言

  Markdown 是一种轻量级标记语言,由于其具备简洁的语法和轻量化等优点,现在越来越多的内容网站用它来进行文档的编写,比如git的readme文档、腾讯文档等都支持markdown语法。

  我们在日常生活中多多少少也会跟markdown相关周边会有接触。今天给大家推荐一款强大的markdown编辑器,可用于桌面,也可嵌入我们的网站用于内容创作。

  Vditor

  一般开源的markdown编辑器都是分屏预览,左边写内容,右边渲染内容。而Vditor可以做到实时渲染

  

  当然,也支持传统的分屏预览模式

  

  除此之外,还有很多特点:

  vue项目中使用

  npm install vditor --save<br />

  <br /> <br /><br />import Vditor from 'vditor'<br />import "~vditor/src/assets/scss/index"<br /><br />export default {<br /> created() {<br /> // 可写编辑器<br /> initEdit();<br /><br /> // 预览模式<br /> initPriview();<br /> },<br /> method: {<br /> initEdit() {<br /> window.vditor = new Vditor('vditor', {<br /> // config,配置项参考:https://ld246.com/article/1549638745630#options<br /> }<br /> },<br /> initPriview() {<br /> let vditor = document.getElementById('vditor');<br /> Vditor.preview(vditor,<br /> // options,配置项参考:https://ld246.com/article/1549638745630#methods<br /> );<br /><br /> // 点击图片放大预览<br /> vditor.addEventListener('click', function (event) {<br /> if (event.target.tagName === 'IMG') {<br /> Vditor.previewImage(event.target, 'zh_CN', vditor.classList.contains('dark') ? 'dark' : 'classic')<br /> }<br /> })<br /> }<br /> }<br />}<br />

  开发文档

  具体开发文档参考:#--%E7%AE%80%E4%BB%8B

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线