基於vditor之markdown編輯器組件，vditor本體與其樣式已打包至w-vditor-vue，故使用時不需再由外部引入vditor之js與css。 但vditor於執行期仍會以script或link動態下載lute(markdown引擎)、i18n語系、icons圖示、content-theme樣式等資源， 並於內容含公式或圖表語法時另外下載katex、mermaid、echarts等渲染器，預設來源為「https://unpkg.com/vditor@[版本]」。 內網或無法連外時，可將node_modules/vditor/dist複製至自架站台，再通過settings.cdn指向該dist之上一層目錄， 例如settings.cdn給予'/static/vditor'，vditor即會改由'/static/vditor/dist/js/lute/lute.min.js'取得資源。 另工具列export之PDF子項已固定移除，僅保留Markdown與HTML，因PDF匯出會於iframe內重建vditor環境， 額外由settings.cdn取得dist/index.css、dist/method.min.js、js/i18n/zh_CN.js與hljs樣式共4項資源。
Props
| Name | Type | Default value | Required? | Description |
|---|---|---|---|---|
pathItems |
Array | ['base:w-vditor-vue'] |
No | 輸入w-vditor-vue組件js檔案位置字串陣列，vditor與其css皆已打包於w-vditor-vue內故無須另行載入，預設['base:w-vditor-vue'] |
value |
String | '' |
No | 輸入markdown字串，可使用v-model雙向綁定，預設為'' |
height |
Number | 400 |
No | 輸入編輯器高度數字，單位為px，預設為400 |
settings |
Object | {} |
No | 輸入vditor設定物件，會覆蓋組件內建預設值，內建預設值與各設定項詳見w-vditor-vue原始碼與vditor官方文件 |
settings.mode |
String | 'wysiwyg' |
No | 輸入編輯模式字串，可選'sv'(雙欄位)、'ir'(即時渲染)、'wysiwyg'(所見即所得)，預設為'wysiwyg' |
settings.lang |
String | 'zh_TW' |
No | 輸入語系字串，可選'zh_CN'、'zh_TW'、'en_US'、'ja_JP'、'ko_KR'、'ru_RU'、'sv_SE'、'fr_FR'、'pt_BR'，預設為'zh_TW' |
settings.theme |
String | 'classic' |
No | 輸入編輯器主題字串，可選'classic'、'dark'，預設為'classic' |
settings.cdn |
String | 'https://unpkg.com/vditor@[版本]' |
No | 輸入vditor執行期動態載入資源(lute、i18n、icons、katex等)之來源位置字串，該位置之下需有dist資料夾，預設為vditor內建之unpkg位置 |
settings.i18n |
Object | null |
No | 輸入自訂語系物件，給予後vditor將不再下載i18n語系檔，供內網部署時減少依賴，預設為null代表由settings.cdn下載對應settings.lang之語系檔 |
settings.icon |
String | 'ant' |
No | 輸入工具列圖示組字串，可選'ant'、'material'，圖示檔由settings.cdn下載，預設為'ant' |
settings.toolbar |
Array | ['詳見w-vditor-vue原始碼'] |
No | 輸入工具列項目陣列，預設詳見w-vditor-vue原始碼處def_settings->toolbar |
settings.placeholder |
String | '' |
No | 輸入編輯器無內容時顯示之提示字串，預設為'' |
keyHint |
String|Array | '' |
No | 輸入打字時調用提示區之完整觸發字串或其陣列，例如給予'/ht'則輸入「/ht」即顯示提示區，亦可給予'@'、'/ht'等任意字串，或給予['/ht','/kw']陣列註冊多組，給予''則不啟用提示區，預設為''。觸發字串須位於行首或其前方為空白字元方會生效，且點選提示項目後該觸發字串會由內容中移除 |
hintTimeDetect |
Number | 100 |
No | 輸入偵測提示區之debounce時間數字，單位為ms，預設100。因vditor之編輯回調options.input為debounce機制，打字時每次按鍵皆重新計時，停止打字後才觸發，而提示區偵測與value回拋皆由該回調驅動，故此值即為打完keyHint後至提示區出現之延遲，亦為v-model同步之延遲；vditor原生預設為800ms，另因其同時決定undo還原點之合併粒度，給予過小值會使undo變得瑣碎 |
hintBorderRadius |
Number | 4 |
No | 輸入提示窗框圓角度數字，單位為px，預設4 |
hintBackgroundColor |
String | '#fff' |
No | 輸入提示窗背景顏色字串，預設'#fff' |
hintShadow |
Boolean | true |
No | 輸入提示窗是否顯示陰影布林值，預設true |
hintShadowStyle |
String | '0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)' |
No | 輸入提示窗陰影樣式字串，預設'0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)' |
cmpZIndex |
Number | 3000 |
No | 輸入提示窗使用z-index數字，預設3000 |
editable |
Boolean | true |
No | 輸入是否為編輯模式布林值，給予false則編輯器為唯讀，預設true |
Events
| Name | Payload Type | Description |
|---|---|---|
input |
String | 當使用者於編輯器內輸入文字，或由提示區點選插入內容時發射，帶出當前markdown字串，供v-model接收 |
- Description:
基於vditor之markdown編輯器組件，vditor本體與其樣式已打包至w-vditor-vue，故使用時不需再由外部引入vditor之js與css。 但vditor於執行期仍會以script或link動態下載lute(markdown引擎)、i18n語系、icons圖示、content-theme樣式等資源， 並於內容含公式或圖表語法時另外下載katex、mermaid、echarts等渲染器，預設來源為「https://unpkg.com/vditor@[版本]」。 內網或無法連外時，可將node_modules/vditor/dist複製至自架站台，再通過settings.cdn指向該dist之上一層目錄， 例如settings.cdn給予'/static/vditor'，vditor即會改由'/static/vditor/dist/js/lute/lute.min.js'取得資源。 另工具列export之PDF子項已固定移除，僅保留Markdown與HTML，因PDF匯出會於iframe內重建vditor環境， 額外由settings.cdn取得dist/index.css、dist/method.min.js、js/i18n/zh_CN.js與hljs樣式共4項資源。