前端：開源免費(fèi)的瀏覽器端Markdown編輯器——Vditor上手體驗(yàn)
作者：郝光明
Vditor是一款專業(yè)的瀏覽器端Markdown編輯器，其支持所見即所得、即時(shí)渲染以及分屏預(yù)覽模式，類似于Typora。Vditor采用TypeScript實(shí)現(xiàn)，可支持原生JavaScript、Vue、React和Angular等多種框架。
一、編輯器簡介
Vditor是一款專業(yè)的瀏覽器端Markdown編輯器，其支持所見即所得、即時(shí)渲染以及分屏預(yù)覽模式，類似于Typora。Vditor采用TypeScript實(shí)現(xiàn)，可支持原生JavaScript、Vue、React和Angular等多種框架。此外，Vditor提供桌面版，支持Windows、Linux、MacOS，同時(shí)也支持瀏覽器擴(kuò)展、安卓和iOS版本。無論是在哪個(gè)平臺(tái)上使用，Vditor都能夠提供高效、優(yōu)質(zhì)的Markdown編輯體驗(yàn)。
官網(wǎng)：https://b3log.org/vditor/
GitHub：https://github.com/Vanessa219/vditor
桌面版下載：https://b3log.org/siyuan/download.html
二、功能特性
三、編輯器模式初始化設(shè)定
2.1 所見即所得模式
即所得模式對(duì)不熟悉 Markdown 的用戶較為友好，熟悉 Markdown 的話也可以無縫使用。
new Vditor('vditor', {
"height": 360,
"cache": {
"enable": false
},
"value": "## 所見即所得（WYSIWYG）\n所見即所得模式對(duì)不熟悉 Markdown 的用戶較為友好，熟悉 Markdown 的話也可以無縫使用。 ",
"mode": "wysiwyg"
})
2.2 即時(shí)渲染模式
對(duì)熟悉 Typora 的用戶應(yīng)該不會(huì)感到陌生，理論上這是最優(yōu)雅的 Markdown 編輯方式。
new Vditor('vditor', {
"height": 360,
"cache": {
"enable": false
},
"value": "## 即時(shí)渲染（IR）\n即時(shí)渲染模式對(duì)熟悉 Typora 的用戶應(yīng)該不會(huì)感到陌生，理論上這是最優(yōu)雅的 Markdown 編輯方式。",
"mode": "ir"
})
2.3 分屏預(yù)覽（SV）
該模式目前沒有發(fā)現(xiàn)具體的使用場(chǎng)景。
new Vditor('vditor', {
"height": 360,
"cache": {
"enable": false
},
"value": "## 分屏預(yù)覽（SV）\n傳統(tǒng)的分屏預(yù)覽模式適合大屏下的 Markdown 編輯。",
"mode": "sv",
"preview": {
"mode": "editor"
}
})
2.4 分屏預(yù)覽模式
分屏預(yù)覽（SV）\n傳統(tǒng)的分屏預(yù)覽模式適合大屏下的 Markdown 編輯
new Vditor('vditor', {
"height": 360,
"cache": {
"enable": false
},
"value": "## 分屏預(yù)覽（SV）\n傳統(tǒng)的分屏預(yù)覽模式適合大屏下的 Markdown 編輯。",
"mode": "sv",
"preview": {
"mode": "both"
}
})
四、案例代碼
直接采用最原始的html提供完整的示例代碼，直接可以運(yùn)行。
<html>
<head>
<title>vditor編輯器</title>
<link rel="stylesheet" />
<script src="https://unpkg.com/vditor/dist/index.min.js"></script>
</head>
<body>
<input type="button" onclick="getContent()" value="確定" />
<div id="content">
</div>
<script>
var vditor = null;
window.onload = function() {
vditor = new Vditor(document.getElementById('content'), {
cache: {
enable: false
},
"mode": "sv",
"preview": {
"mode": "both"
}
});
}
// 測(cè)試數(shù)據(jù)填充
function getContent() {
vditor.setValue("## 測(cè)試 \n ### 二級(jí)標(biāo)題 ");
}
</script>
</body>
</html>
參考資料：https://b3log.org/vditor/
責(zé)任編輯：武曉燕
來源：
小明互聯(lián)網(wǎng)技術(shù)分享社區(qū)
