前言
Markdown 是一種輕量級(jí)標(biāo)記語言,由于其具備簡(jiǎn)潔的語法和輕量化等優(yōu)點(diǎn),現(xiàn)在越來越多的內(nèi)容網(wǎng)站用它來進(jìn)行文檔的編寫,比如git的readme文檔、騰訊文檔等都支持markdown語法。
我們?cè)谌粘I钪卸喽嗌偕僖矔?huì)跟markdown相關(guān)周邊會(huì)有接觸。今天給大家推薦一款強(qiáng)大的markdown編輯器,可用于桌面,也可嵌入我們的網(wǎng)站用于內(nèi)容創(chuàng)作。
Vditor
一般開源的markdown編輯器都是分屏預(yù)覽,左邊寫內(nèi)容,右邊渲染內(nèi)容。而Vditor可以做到實(shí)時(shí)渲染
當(dāng)然,也支持傳統(tǒng)的分屏預(yù)覽模式
除此之外,還有很多特點(diǎn):
- 支持三種編輯模式:所見即所得(wysiwyg)、即時(shí)渲染(ir)、分屏預(yù)覽(sv)
- 支持大綱、數(shù)學(xué)公式、腦圖、圖表、流程圖、甘特圖、時(shí)序圖、五線譜、多媒體、語音閱讀、標(biāo)題錨點(diǎn)、代碼高亮及復(fù)制、graphviz、PlantUML 渲染
- 內(nèi)置安全過濾、導(dǎo)出、圖片懶加載、任務(wù)列表、多平臺(tái)預(yù)覽、多主題切換、復(fù)制到微信公眾號(hào)/知乎功能
- 實(shí)現(xiàn) CommonMark 和 GFM 規(guī)范,可對(duì) Markdown 進(jìn)行格式化和語法樹查看,并支持10+項(xiàng)配置
- 工具欄包含 36+ 項(xiàng)操作,除支持?jǐn)U展外還可對(duì)每一項(xiàng)中的快捷鍵、提示、提示位置、圖標(biāo)、點(diǎn)擊事件、類名、子工具欄進(jìn)行自定義
- 表情/at/話題等自動(dòng)補(bǔ)全擴(kuò)展
- 可使用拖拽、剪切板粘貼上傳,顯示實(shí)時(shí)上傳進(jìn)度,支持 CORS 跨域上傳
- 實(shí)時(shí)保存內(nèi)容,防止意外丟失
- 錄音支持,用戶可直接發(fā)布語音
- 粘貼 html 自動(dòng)轉(zhuǎn)換為 Markdown,如粘貼中包含外鏈圖片可通過指定接口上傳到服務(wù)器
- 支持主窗口大小拖拽、字符計(jì)數(shù)
- 多主題支持,內(nèi)置黑白綠三套主題
- 多語言支持,內(nèi)置中、英、韓文本地化
- 支持主流瀏覽器,對(duì)移動(dòng)端友好
vue項(xiàng)目中使用
- 安裝依賴
npm install vditor --save
- 實(shí)際開發(fā)
<template>
<div id="vditor" class="editor"></div>
</template>
import Vditor from 'vditor'
import "~vditor/src/assets/scss/index"
export default {
created() {
// 可寫編輯器
initEdit();
// 預(yù)覽模式
initPriview();
},
method: {
initEdit() {
window.vditor = new Vditor('vditor', {
// config,配置項(xiàng)參考:https://ld246.com/article/1549638745630#options
}
},
initPriview() {
let vditor = document.getElementById('vditor');
Vditor.preview(vditor,
// options,配置項(xiàng)參考:https://ld246.com/article/1549638745630#methods
);
// 點(diǎn)擊圖片放大預(yù)覽
vditor.addEventListener('click', function (event) {
if (event.target.tagName === 'IMG') {
Vditor.previewImage(event.target, 'zh_CN', vditor.classList.contains('dark') ? 'dark' : 'classic')
}
})
}
}
}
開發(fā)文檔
具體開發(fā)文檔參考:
https://ld246.com/article/1549638745630#--%E7%AE%80%E4%BB%8B
原文鏈接:記憶旅途






