騰訊開源了一款 Markdown 編輯器,易擴展、功能全,很好用!
點擊關(guān)注公眾號，Java干貨 及時送達 ??
介紹
Cherry Markdown Editor 是一款 Javascript Markdown 編輯器，具有開箱即用、輕量簡潔、易于擴展等特點. 它可以運行在瀏覽器或服務(wù)端(NodeJs).
開箱即用
開發(fā)者可以使用非常簡單的方式調(diào)用并實例化 Cherry Markdown 編輯器，實例化的編輯器默認支持大部分常用的 markdown 語法（如標題、目錄、流程圖、公式等）。
易于拓展
當 Cherry Markdown 編輯器支持的語法不滿足開發(fā)者需求時，可以快速的進行二次開發(fā)或功能擴展。同時，CherryMarkdown 編輯器應該由純 JavaScript 實現(xiàn)，不應該依賴 angular、vue、react 等框架技術(shù)，框架只提供容器環(huán)境即可。
基于 Spring Boot + MyBatis Plus + Vue 3.2 + Vite + Element Plus 實現(xiàn)的前后端分離博客，包含后臺管理系統(tǒng)，支持文章、分類、標簽管理、儀表盤等功能。
- GitHub 地址：https://github.com/weiwosuoai/WeBlog
- Gitee 地址：https://gitee.com/AllenJiang/WeBlog
特性
語法特性
- 圖片縮放、對齊、引用
- 根據(jù)表格內(nèi)容生成圖表
- 字體顏色、字體大小
- 字體背景顏色、上標、下標
- checklist
- 音視頻
多種模式
- 雙欄編輯預覽模式（支持同步滾動）
- 純預覽模式
- 無工具欄模式（極簡編輯模式）
- 移動端預覽模式
功能特性
- 復制 Html 粘貼成 MD 語法
- 經(jīng)典換行&常規(guī)換行
- 多光標編輯
- 圖片尺寸
- 導出長圖、pdf
- float toolbar 在新行行首支持快速工具欄
- bubble toolbar 選中文字時聯(lián)想出快速工具欄
功能截圖
列表
代碼塊
公式
畫圖
畫圖
安裝
通過 yarn
yarn add cherry-markdown
通過 npm
npm install cherry-markdown --save
如果需要開啟 mermaid 畫圖、表格自動轉(zhuǎn)圖表功能，需要同時添加mermaid 與echarts包。
基于 Spring Boot + MyBatis Plus + Vue 3.2 + Vite + Element Plus 實現(xiàn)的前后端分離博客，包含后臺管理系統(tǒng)，支持文章、分類、標簽管理、儀表盤等功能。
- GitHub 地址：https://github.com/weiwosuoai/WeBlog
- Gitee 地址：https://gitee.com/AllenJiang/WeBlog
目前Cherry推薦的插件版本為[email protected]、[email protected]
# 安裝mermaid依賴開啟mermaid畫圖功能
yarn add [email protected]
# 安裝echarts依賴開啟表格自動轉(zhuǎn)圖表功能
yarn add [email protected]
開源地址
- https://github.com/Tencent/cherry-markdown
分享一下我寫的《10萬字Springboot經(jīng)典學習筆記》中，點擊下面小卡片，進入【Java開發(fā)寶典】，回復：筆記，即可免費獲取。
點贊是最大的支持