mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介

mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介 CSS
スポンサーリンク

スポンサーリンク

概要


mavonEditor + Vue.js で作るMarkdownエディタについての紹介です。
また、用意されているAPIなどについて少し紹介します。

mavonEditor

hinesboy/mavonEditor
mavonEditor - A markdown editor based on Vue that supports a variety of personalized features - hinesboy/mavonEditor

中国語と英語のドキュメントが用意されています。
またデフォルトの言語も中国語になっています。

セットアップ

基本的には複雑な設定を不要とし、以下のコードで動きます。

HTML

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

JavaScript

Vue.use(window['mavon-editor'])
var app = new Vue({
    el: '#app'
})

カスタマイズ

特に設定も必要なく上記のコードで動きます。
拡張する場合はいくつかのプロパティなどを定義する必要があります。

これは、mavon-editor内に記述されたメソッドをエディタ外部のDOMに吐き出すデモです。

デモ

コード

<div id="app">
    <div class="editor">
        <mavon-editor fontSize="26" language="en" scrollStyle="false" placeholder="Markdown形式で入力してください。" boxShadow="false"  :toolbars="toolbars" v-on:imgAdd="$imgAdd" v-on:change="$change" ></mavon-editor>
    </div>
    <button @click="getMsg">getMsg</button>
    <div>{{ message }}</div>
</div>
Vue.use(window['mavon-editor'])

var app = new Vue({
    el: '#app',
    data() {
        return {
            //mavon-editor
            toolbars: {
                bold: false,
            },
            //other
            message: ''
        }
    },
    methods: {
        $imgAdd(pos, $file) {
            alert('upload image');
        },
        $change(value, reader) {
            this.message = value
        },
        getMsg() {
            console.log(this.message)
        }
    },
})

APIの紹介

用意されているAPIには以下のようなものがあります。

プロパティ

プロパティ一覧。
ここから引用

nametypedefault valuedescribe
valueStringInitial value
languageStringzh-CNLanguage switch, zh-CN: Simplified Chinese , en: English , fr: French, pt-BR: Brazilian Portuguese, ru: Russian
fontSizeString15pxfont-size of edit area
scrollStyleBooleantrueOpen the scroll bar style(Temp only support chrome)
boxShadowBooleantruecss: box-shadow of mavonEditor
subfieldBooleantruetrue: Double columns – Edit preview same screen , Single Columns – otherwise not
defaultOpenStringedit: default show edit area , preview: default show preview area , other = edit
placeholderStringBegin editing…The default prompt text when the textarea is empty
editableBooleantrueEdit switch
codeStyleStringcode-githubmarkdown Style: default github, option
hljs color scheme
toolbarsFlagBooleantrueShow toolbars
navigationBooleanfalseShow navigation
ishljsBooleantruehighlight code switch
imageFilterFunctionnullImage file filter Function, params is a File Object, you should return Boolean about
the test result
imageClickfunctionnullImage Click Function
toolbarsObjectAs in the following exampletoolbars

ツールバー

上記のプロパティのtoolbarsに関しては以下のようなオブジェクトを定義した上で渡す必要があります。

toolbars: {
      bold: true,
      italic: true,
      header: true,
      underline: true,
      strikethrough: true,
      mark: true,
      superscript: true,
      subscript: true,
      quote: true,
      ol: true,
      ul: true,
      link: true,
      imagelink: true,
      code: true,
      table: true,
      fullscreen: true,
      readmodel: true,
      htmlcode: true,
      help: true,
      /* 1.3.5 */
      undo: true,
      redo: true,
      trash: true,
      save: true,
      /* 1.4.2 */
      navigation: true,
      /* 2.1.8 */
      alignleft: true,
      aligncenter: true,
      alignright: true,
      /* 2.2.1 */
      subfield: true,
      preview: true
  }

イベントメソッド

イベントメソッドには次のようなものが用意されています。

nameparamsdescribe
changeString: value , String: rederEdit area change callback event (render: Html source code)
saveString: value , String: rederCtrl+s and click save button
fullScreenBoolean: status , String: valueFullscreen editing toggle callback event(boolean: Fullscreen status)
readModelBoolean: status , String: valueReading mode toggle callback event(boolean: Reading mode status)
htmlCodeBoolean: status , String: valueHtml code mode toggle callback event(boolean: status)
subfieldToggleBoolean: status , String: valueDouble columns edit mode toggle callback event(boolean: double columns status)
previewToggleBoolean: status , String: valuePreview & Edit toggle callback event(boolean: preview status)
helpToggleBoolean: status , String: valueHelp-me toggle callback event(boolean: help status)
navigationToggleBoolean: status , String: valueNavigation mode toggle callback event(boolean: nav status)
imgAddString: filename, File: imgfileAdd image file callback event(filename: write in origin md, File: File Object)
imgDelString: filenameDelete image file callback event(filename: write in origin md)

おまけ : mavonEditorのサイズの固定

デフォルトの状態だと改行した際にウィンドウがでかくなっていきます。

もしかしたら適切なプロパティが用意されているのかもしれませんが、
cssに以下のような属性を適用させたことで、ウィンドウサイズを固定できました。

.markdown-body {
    max-height: 600px;
    height: 600px;
}
CSSHTMLJavaScript
スポンサーリンク
スポンサーリンク
スポンサーリンク
404 Motivation Not Found