這個markdown編輯器無敵了

發布時間：2023-07-03 00:30:10 作者：網友整理

前言

Markdown 是一種輕量級標記語言，由于其具備簡潔的語法和輕量化等優點，現在越來越多的內容網站用它來進行文檔的編寫，比如git的readme文檔、騰訊文檔等都支持markdown語法。

我們在日常生活中多多少少也會跟markdown相關周邊會有接觸。今天給大家推薦一款強大的markdown編輯器，可用于桌面，也可嵌入我們的網站用于內容創作。

Vditor

一般開源的markdown編輯器都是分屏預覽，左邊寫內容，右邊渲染內容。而Vditor可以做到實時渲染

當然，也支持傳統的分屏預覽模式

除此之外，還有很多特點：

支持三種編輯模式：所見即所得（wysiwyg）、即時渲染（ir）、分屏預覽（sv）
支持大綱、數學公式、腦圖、圖表、流程圖、甘特圖、時序圖、五線譜、多媒體、語音閱讀、標題錨點、代碼高亮及復制、graphviz、PlantUML 渲染
內置安全過濾、導出、圖片懶加載、任務列表、多平臺預覽、多主題切換、復制到微信公眾號/知乎功能
實現 CommonMark 和 GFM 規范，可對 Markdown 進行格式化和語法樹查看，并支持10+項配置
工具欄包含 36+ 項操作，除支持擴展外還可對每一項中的快捷鍵、提示、提示位置、圖標、點擊事件、類名、子工具欄進行自定義
表情/at/話題等自動補全擴展
可使用拖拽、剪切板粘貼上傳，顯示實時上傳進度，支持 CORS 跨域上傳
實時保存內容，防止意外丟失
錄音支持，用戶可直接發布語音
粘貼 html 自動轉換為 Markdown，如粘貼中包含外鏈圖片可通過指定接口上傳到服務器
支持主窗口大小拖拽、字符計數
多主題支持，內置黑白綠三套主題
多語言支持，內置中、英、韓文本地化
支持主流瀏覽器，對移動端友好

vue項目中使用

安裝依賴

npm install vditor --save

實際開發

<template>
	<div id="vditor" class="editor"></div>
</template>
import Vditor from 'vditor'
import "~vditor/src/assets/scss/index"

export default {
	created() {
		// 可寫編輯器
		initEdit();

		// 預覽模式
		initPriview();
	},
	method: {
		initEdit() {
			window.vditor = new Vditor('vditor', {
        			// config，配置項參考：https://ld246.com/article/1549638745630#options
			}
		},
		initPriview() {
			let vditor = document.getElementById('vditor');
      			Vditor.preview(vditor,
        			// options，配置項參考：https://ld246.com/article/1549638745630#methods
			);

		// 點擊圖片放大預覽
      		vditor.addEventListener('click', function (event) {
        		if (event.target.tagName === 'IMG') {
          			Vditor.previewImage(event.target, 'zh_CN', vditor.classList.contains('dark') ? 'dark' : 'classic')
        			}
      			})
		}
	}
}