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

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

2018-10-1410 min read

目次

  1. 概要
  2. mavoneditor
  3. セットアップ
  4. カスタマイズ
  5. 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;
}
Tags
javascript(109)
linux(54)
node.js(53)
amazon%20aws(47)
typescript(44)
%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0(36)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86(30)
html5(29)
php(24)
centos(24)
python(22)
%E7%AB%B6%E6%8A%80%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0(21)
mac(21)
mysql(20)
canvas(19)
opencv(17)
%E9%9B%91%E8%AB%87(16)
docker(16)
wordpress(15)
atcoder(14)
apache(12)
%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92(12)
%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9(12)
amazon%20s3(12)
red%20hat(12)
prisma(12)
ubuntu(11)
github(10)
git(10)
vue.js(10)
%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86100%E6%9C%AC%E3%83%8E%E3%83%83%E3%82%AF(10)
mariadb(10)
react(9)
aws%20cdk(9)
css3(8)
%E5%8F%AF%E8%A6%96%E5%8C%96(8)
%E5%B0%8F%E3%83%8D%E3%82%BF(8)
nestjs(8)
amazon%20lightsail(7)
next.js(7)
%E3%83%96%E3%83%AD%E3%82%B0(6)
cms(6)
oracle(6)
perl(6)
gitlab(6)
iam(5)
amazon%20ec2(5)
%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93(5)
aws%20amplify(5)
curl(4)
Author
githubzennqiita
ただの備忘録です。

※外部送信に関する公表事項