
mavonEditor と Vue.js で作るMarkdownエディタのデモ + APIの紹介
2018-10-1410 min read
目次
概要

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;
}
Recommends
New Posts
Hot posts!
Date
Tags
Author