Vditor 是一款瀏覽器端的 Markdown 編輯器，使用 TypeScript 實(shí)現(xiàn)。下一代的 Markdown 編輯器，為未來(lái)而構(gòu)建！需要的朋友可下載試試！

背景

我們?cè)陂_(kāi)發(fā) Sym 的初期是直接使用 WYSIWYG 富文本編輯器的。那時(shí)候基于 HTML 的編輯器非常流行，項(xiàng)目中引用起來(lái)也很方便，也符合用戶(hù)當(dāng)時(shí)的使用習(xí)慣。

后來(lái)，Markdown 的崛起逐步改變了大家的排版方式。再加上我們其他幾個(gè)項(xiàng)目都是面向程序員用戶(hù)的，所以遷移到 md 上也是大勢(shì)所趨。我們選擇了 CodeMirror，這是一款優(yōu)秀的編輯器，它對(duì)開(kāi)發(fā)者提供了豐富的編程接口，對(duì)各種瀏覽器的兼容性也比較好。

再后來(lái)，隨著我們項(xiàng)目業(yè)務(wù)需求方面的沉淀，使用 CodeMirror 有時(shí)候會(huì)感到比較“笨重”。比如要實(shí)現(xiàn) @自動(dòng)完成用戶(hù)名列表、插入 Emoji、上傳文件等就需要比較深入的二次開(kāi)發(fā)，而這些業(yè)務(wù)需求恰恰是很多項(xiàng)目場(chǎng)景共有且必備的。

終于，我們決定開(kāi)始在 Sym 中自己實(shí)現(xiàn)編輯器。隨著幾個(gè)版本的迭代，Sym 的編輯器也日趨成熟。在我們運(yùn)營(yíng)的社區(qū)黑客派上陸續(xù)有人問(wèn)我們是否能將編輯器單獨(dú)抽離出來(lái)提供給大家使用。與此同時(shí)，我們的前端主程 V 同學(xué)對(duì)于維護(hù)分散在各個(gè)項(xiàng)目中的編輯器也感到有點(diǎn)力不從心，外加她最近在學(xué) TypeScript 正好需要練手實(shí)踐，所以就決定使用 ts 來(lái)實(shí)現(xiàn)一個(gè)全新的瀏覽器端 md 編輯器。

于是，Vditor 就這樣誕生了。

功能

插入原生 Emoji、設(shè)置常用表情列表

自定義工具欄按鈕、提示、插入文案及快捷鍵

可使用拖拽、剪切板粘貼上傳，顯示實(shí)時(shí)上傳進(jìn)度

支持 CORS 跨域上傳

內(nèi)容保存本地存儲(chǔ)，防止意外丟失

錄音支持，用戶(hù)可直接發(fā)布語(yǔ)音

粘貼 HTML 自動(dòng)轉(zhuǎn)換為 Markdown

提供實(shí)時(shí)預(yù)覽、滾動(dòng)同步定位

支持主窗口大小拖拽、字符計(jì)數(shù)

多主題支持、內(nèi)置黑白兩套

多語(yǔ)言支持、內(nèi)置中英文

支持主流瀏覽器和移動(dòng)端

使用方法

CommonJS
安裝依賴(lài)
npm install vditor --save

在代碼中引入

import Vditor from 'vditor'
@import "~vditor/dist/index.classic.css" // 或者使用 index.dark.css

初始化對(duì)象

const vditor = new Vditor(id, {Options...})
vditor.focus()
HTML script

在 HTML 中插入 css 和 js，0.1.7 為 vditor 版本號(hào)。

<!-- 可使用 index.dark.css 或 index.classic.css -->
<link rel="stylesheet" href="https://vditor.b3log.org/0.1.7/index.classic.css" />
<script src="http://vditor.b3log.org/0.1.7/index.min.js"></script>

初始化對(duì)象

const vditor = new Vditor(id, {Options...})
vditor.focus()