忘れないように記録しとこ

カバの樹

vue.jsのMarkdownライブラリ「mavonEditor」を使ってみた

2019年5月9日

完全版を表示する

mavonEditorとは

 

vue.jsのMarkdownライブラリは色々ありますが、今回ご紹介する「mavonEditor」はGithubのスターが2000を超える人気ライブラリです。

日本語にも対応した高機能のUIが搭載されています。

 

環境

Vue 2.6.10
mavon-editor 2.8.0

インストール

以下のnpm、CDNのどれか一つを使ってインストールします。

npm

npm install mavon-editor --save

CDN

<link rel="stylesheet" href="https://unpkg.com/mavon-editor@2.7.4/dist/css/index.css">
<script src="https://unpkg.com/mavon-editor@2.7.4/dist/mavon-editor.js"></script>

 

Gitは以下のGithubから

https://github.com/hinesboy/mavonEditor

 

導入手順

1. ライブラリの取り込み

npmとCDNでVue.useのやり方が違います。

 

　webpack等

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

new Vue({
   'el': '#app',
}

　WEBページ

Vue.use(window['MavonEditor'])

new Vue({
   el: '#app',
})

 

2. テンプレートを設置

<div id="app">
    <mavon-editor></mavon-editor>
</div>

 

サンプル

 

言語翻訳

基本は中国語ですが、propで言語の変更ができます。

日本語も対応されたようで、ありがたいですね。

<mavon-editor :language="'ja'"></mavon-editor>

 

prop

一覧

名 type  default  説明
value String 初期値
language String zh-CN 言語選択、暂サポートzh-CN：中文简体、en：英語、fr：フランス語、pt-BR：フランス語、de：ドイツ語、ja：日本語
fontSize String 15px 編集エリアの文字サイズ
scrollStyle Boolean true スクロールバーのスタイル（クロム時のみサポート）
boxShadow Boolean true ボックスの影
subfield Boolean true true：二重列 - 同じ画面をプレビュー、単一列を編集 - それ以外の場合はそうではありません
defaultOpen String 編集：デフォルトの表示編集エリア、プレビュー：デフォルトの表示プレビューエリア、その他=編集
placeholder String 开始编辑... textareaが空の場合のデフォルトのプロンプトテキスト
editable Boolean true 編集スイッチ
codeStyle String code-github マークダウンスタイル可选配色方案
toolbarsFlag Boolean true ツールバーを表示
navigation Boolean false ナビゲーションを表示
shortCut Boolean true ショートカットスイッチ
autofocus Boolean true テキスト枠への自動フォーカス
ishljs Boolean true ハイライトコードスイッチ
imageFilter function null 画像ファイルフィルタ関数、paramsはファイルオブジェクトです、あなたはテスト結果についてブール値を返すべきです
imageClick function null 画像クリック機能
tabSize Number \t 1つのタブに相当するスペース数、デフォルトは\ t
toolbars Object 如下例 ツールバー

 

イベント

イベント一覧

名 params 説明
change String: value , String: render 編集領域が変更された再調整メッセージ（render：valueがmarkdown解析を経た後の結果）
save String: value , String: render ctrl + sの再調整メッセージ（保存キー、同様にこの再調整）
fullScreen Boolean: status , String: value 全画面編集のタイミング調整イベント（ブール値：全画面公開型）
readModel Boolean: status , String: value 鎮静式読み取りのチューニングメッセージを切り替える（ブール値：読み取り開始状態）
htmlCode Boolean: status , String: value htmlのソースコードの調整メッセージを確認する（boolean：ソースコードの開封状況）
subfieldToggle Boolean: status , String: value モノラルで編集されたチューニングメッセージの切り替え（ブール：双子オープン状態）
previewToggle Boolean: status , String: value リストの編集中のチューニングメッセージを切り替える（boolean：アカウントの起動状態を表示）
helpToggle Boolean: status , String: value 助けになる調整メッセージを調べます（boolean：助けを必要とする）
navigationToggle Boolean: status , String: value ナビゲーション目的の更新イベントの切り替え（ブール値：ナビゲーション開始状態）
imgAdd String: filename, File: imgfile 画像ファイルに更新イベントを追加（ファイル名：mdに記述されたファイル名、ファイル：ファイルオブジェクト）
imgDel String: filename ページのタイトルを削除する（ファイル名：mdに記載されているファイル名）

 

まとめ

Vue.js製マークダウンライブラリとしては「mavonEditor」が一番高機能だと思います。
実装も簡単ですし、TinyMCEのようなUIもついています。

ぜひ試してみて下さい。

今日はこの辺でー

 

  • B!