Markdown 是一种轻量级标记语言,由于其具备简洁的语法和轻量化等优点,现在越来越多的内容网站用它来进行文档的编写,比如git的readme文档、腾讯文档等都支持markdown语法。
我们在日常生活中多多少少也会跟markdown相关周边会有接触。今天给大家推荐一款强大的markdown编辑器,可用于桌面,也可嵌入我们的网站用于内容创作。
一般开源的markdown编辑器都是分屏预览,左边写内容,右边渲染内容。而Vditor可以做到实时渲染
当然,也支持传统的分屏预览模式
除此之外,还有很多特点:
npm install vditor --save
<template>
<div id="vditor" class="editor"></div>
</template>
import Vditor from 'vditor'
import "~vditor/src/assets/scss/index"
export default {
created() {
// 可写编辑器
initEdit();
// 预览模式
initPriview();
},
method: {
initEdit() {
window.vditor = new Vditor('vditor', {
// config,配置项参考:https://ld246.com/article/1549638745630#options
}
},
initPriview() {
let vditor = document.getElementById('vditor');
Vditor.preview(vditor,
// options,配置项参考:https://ld246.com/article/1549638745630#methods
);
// 点击图片放大预览
vditor.addEventListener('click', function (event) {
if (event.target.tagName === 'IMG') {
Vditor.previewImage(event.target, 'zh_CN', vditor.classList.contAIns('dark') ? 'dark' : 'classic')
}
})
}
}
}
具体开发文档参考:
https://ld246.com/article/1549638745630#--%E7%AE%80%E4%BB%8B
原文链接:记忆旅途