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

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

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

<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)
        }
    },
})

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
  }

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