WVditorVue

基於vditor之markdown編輯器組件，vditor本體與其樣式已打包至dist，故使用時不需再由外部引入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項資源。

組件定位為單一編輯者之輸入組件，與原生input相同：載入父層給予之資料並顯示、內容一變更即回拋、依editable鎖定編輯；回拋資料要同步至其他組件或上傳伺服器、上傳期間是否鎖定編輯、多組件共用資料之單向同步，皆由父層負責。多組件或多人同時編輯同一份資料(共編)須父層與組件層皆支援CRDT等協作機制，非僅由編輯器單方處理，本組件目前不支援共編。

Props

Name Type Default value Required? Description
value String '' No 輸入markdown字串，為編輯器內容之唯一來源(settings.value與settings.cache之內容於初始化完成時皆被value取代)，可使用v-model雙向綁定，亦可只給value並於input事件內回寫或不回寫，null與undefined視為''，其他非字串會轉為字串，預設為''。編輯器初始化完成時載入當下之value(含初始化期間父層才給予之資料)並作為復原起點；之後value變更時，若等於組件最後回拋之值或編輯器當前內容則為回寫而不重載(比對時忽略結尾空白與換行符\r\n、\n之差異，開頭空白之增減屬內容變更)，否則以value為準載入：使用者尚未編輯時變更後之內容即成為新的復原起點，已有編輯則保留復原歷史；載入時若編輯區持有焦點，游標不保留。換載另一份文件或需捨棄編輯時，請以key重建組件
height Number 400 No 輸入編輯器高度數字，單位為px，預設為400
settings Object {} No 輸入vditor設定物件，會覆蓋組件內建預設值，內建預設值詳見原始碼處def_settings，各設定項詳見vditor官方文件。settings、height、keyHint、hintTimeDetect皆於建立編輯器時採用，之後變更不生效，需變更時請以key重建組件。其中settings.input由組件接管；settings.after會於編輯器初始化完成且已載入value後呼叫一次，組件於初始化完成前即銷毀時則不呼叫；settings.cache.enable為true時須同時給予settings.cache.id。lute或語系檔無法載入、settings.lang或settings.mode不合法、settings.cache缺id、或初始化完成時處理失敗時，組件會停留於載入圖示
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 ['詳見原始碼'] No 輸入工具列項目陣列，預設詳見原始碼處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變得瑣碎。sv模式之options.input為每次輸入即同步觸發，提示區偵測與v-model同步不受此值影響
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。唯讀期間組件維持編輯區不可編輯、編輯類工具列與復原重做停用，鎖定時編輯區失焦並關閉提示區，編輯區內之按鍵、輸入(含其內之表單控制項)、核取方塊、圖片與內容下方空白處之點擊，以及停用中之工具列按鈕皆不交由vditor處理，使用者無法改動內容。唯讀期間同原生readonly，編輯區仍可以Tab鍵聚焦(內容超出時可捲動，可聚焦其中之連結、核取方塊、表格與程式碼區塊)，滑鼠、觸控等非鍵盤取得之焦點則不保留；焦點位於編輯區內時其按鍵不往外傳遞(頁面於capture階段之監聽仍收得到，並保留Tab移動焦點、捲動、開啟連結、複製等瀏覽器預設行為)。唯讀期間settings.focus、settings.blur(由組件代為呼叫)、settings.select、settings.unSelect、settings.link.click與圖片預覽照常，settings.keydown、settings.esc、settings.ctrlEnter不呼叫；自訂工具列項目不由組件停用，鎖定前已開始之settings.upload上傳與settings.comment評論功能不在唯讀保證內。唯讀期間父層仍可變更value；鎖定前之最後輸入可能於鎖定後才回拋

Events

Name Payload Type Description
input String 編輯器內容變更時發射(使用者輸入、刪除、貼上、工具列操作、復原或重做，或由提示區點選插入內容)，帶出當前markdown字串，供v-model接收；wysiwyg與ir模式多數輸入於停止輸入hintTimeDetect毫秒後發射，sv模式每次輸入即發射；組件銷毀時尚未發射之最後輸入不再回拋

Description:

  • 基於vditor之markdown編輯器組件，vditor本體與其樣式已打包至dist，故使用時不需再由外部引入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項資源。

    組件定位為單一編輯者之輸入組件，與原生input相同：載入父層給予之資料並顯示、內容一變更即回拋、依editable鎖定編輯；回拋資料要同步至其他組件或上傳伺服器、上傳期間是否鎖定編輯、多組件共用資料之單向同步，皆由父層負責。多組件或多人同時編輯同一份資料(共編)須父層與組件層皆支援CRDT等協作機制，非僅由編輯器單方處理，本組件目前不支援共編。

Props

Name Type Default value Required? Description
value String '' No 輸入markdown字串，為編輯器內容之唯一來源(settings.value與settings.cache之內容於初始化完成時皆被value取代)，可使用v-model雙向綁定，亦可只給value並於input事件內回寫或不回寫，null與undefined視為''，其他非字串會轉為字串，預設為''。編輯器初始化完成時載入當下之value(含初始化期間父層才給予之資料)並作為復原起點；之後value變更時，若等於組件最後回拋之值或編輯器當前內容則為回寫而不重載(比對時忽略結尾空白與換行符\r\n、\n之差異，開頭空白之增減屬內容變更)，否則以value為準載入：使用者尚未編輯時變更後之內容即成為新的復原起點，已有編輯則保留復原歷史；載入時若編輯區持有焦點，游標不保留。換載另一份文件或需捨棄編輯時，請以key重建組件
height Number 400 No 輸入編輯器高度數字，單位為px，預設為400
settings Object {} No 輸入vditor設定物件，會覆蓋組件內建預設值，內建預設值詳見原始碼處def_settings，各設定項詳見vditor官方文件。settings、height、keyHint、hintTimeDetect皆於建立編輯器時採用，之後變更不生效，需變更時請以key重建組件。其中settings.input由組件接管；settings.after會於編輯器初始化完成且已載入value後呼叫一次，組件於初始化完成前即銷毀時則不呼叫；settings.cache.enable為true時須同時給予settings.cache.id。lute或語系檔無法載入、settings.lang或settings.mode不合法、settings.cache缺id、或初始化完成時處理失敗時，組件會停留於載入圖示
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 ['詳見原始碼'] No 輸入工具列項目陣列，預設詳見原始碼處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變得瑣碎。sv模式之options.input為每次輸入即同步觸發，提示區偵測與v-model同步不受此值影響
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。唯讀期間組件維持編輯區不可編輯、編輯類工具列與復原重做停用，鎖定時編輯區失焦並關閉提示區，編輯區內之按鍵、輸入(含其內之表單控制項)、核取方塊、圖片與內容下方空白處之點擊，以及停用中之工具列按鈕皆不交由vditor處理，使用者無法改動內容。唯讀期間同原生readonly，編輯區仍可以Tab鍵聚焦(內容超出時可捲動，可聚焦其中之連結、核取方塊、表格與程式碼區塊)，滑鼠、觸控等非鍵盤取得之焦點則不保留；焦點位於編輯區內時其按鍵不往外傳遞(頁面於capture階段之監聽仍收得到，並保留Tab移動焦點、捲動、開啟連結、複製等瀏覽器預設行為)。唯讀期間settings.focus、settings.blur(由組件代為呼叫)、settings.select、settings.unSelect、settings.link.click與圖片預覽照常，settings.keydown、settings.esc、settings.ctrlEnter不呼叫；自訂工具列項目不由組件停用，鎖定前已開始之settings.upload上傳與settings.comment評論功能不在唯讀保證內。唯讀期間父層仍可變更value；鎖定前之最後輸入可能於鎖定後才回拋

Events

Name Payload Type Description
input String 編輯器內容變更時發射(使用者輸入、刪除、貼上、工具列操作、復原或重做，或由提示區點選插入內容)，帶出當前markdown字串，供v-model接收；wysiwyg與ir模式多數輸入於停止輸入hintTimeDetect毫秒後發射，sv模式每次輸入即發射；組件銷毀時尚未發射之最後輸入不再回拋