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

概要

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

mavonEditor

https://github.com/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には以下のようなものがあります。

プロパティ

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

name	type	default value	describe
value	String		Initial value
language	String	zh-CN	Language switch, zh-CN: Simplified Chinese ， en: English ， fr: French, pt-BR: Brazilian Portuguese, ru: Russian
fontSize	String	15px	font-size of edit area
scrollStyle	Boolean	true	Open the scroll bar style(Temp only support chrome)
boxShadow	Boolean	true	css: box-shadow of mavonEditor
subfield	Boolean	true	true: Double columns - Edit preview same screen , Single Columns - otherwise not
defaultOpen	String		edit: default show edit area , preview: default show preview area , other = edit
placeholder	String	Begin editing...	The default prompt text when the textarea is empty
editable	Boolean	true	Edit switch
codeStyle	String	code-github	markdown Style: default github, option hljs color scheme
toolbarsFlag	Boolean	true	Show toolbars
navigation	Boolean	false	Show navigation
ishljs	Boolean	true	highlight code switch
imageFilter	Function	null	Image file filter Function, params is a File Object, you should return Boolean about the test result
imageClick	function	null	Image Click Function
toolbars	Object	As in the following example	toolbars

ツールバー

上記のプロパティの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
  }

イベントメソッド

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

name	params	describe
change	String: value , String: reder	Edit area change callback event (render: Html source code)
save	String: value , String: reder	Ctrl+s and click save button
fullScreen	Boolean: status , String: value	Fullscreen editing toggle callback event(boolean: Fullscreen status)
readModel	Boolean: status , String: value	Reading mode toggle callback event(boolean: Reading mode status)
htmlCode	Boolean: status , String: value	Html code mode toggle callback event(boolean: status)
subfieldToggle	Boolean: status , String: value	Double columns edit mode toggle callback event(boolean: double columns status)
previewToggle	Boolean: status , String: value	Preview & Edit toggle callback event(boolean: preview status)
helpToggle	Boolean: status , String: value	Help-me toggle callback event(boolean: help status)
navigationToggle	Boolean: status , String: value	Navigation mode toggle callback event(boolean: nav status)
imgAdd	String: filename, File: imgfile	Add image file callback event(filename: write in origin md, File: File Object)
imgDel	String: filename	Delete image file callback event(filename: write in origin md)

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

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

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

.markdown-body {
    max-height: 600px;
    height: 600px;
}