前言
Markdown 是一種輕量級(jí)標(biāo)記語言，由于其具備簡(jiǎn)潔的語法和輕量化等優(yōu)點(diǎn)，現(xiàn)在越來越多的內(nèi)容網(wǎng)站用它來進(jìn)行文檔的編寫，比如git的readme文檔、騰訊文檔等都支持markdown語法。
我們?cè)谌粘Ｉ钪卸喽嗌偕僖矔?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
原文鏈接：記憶旅途
