How to Enable Markdown Online Editing in Vue Using mavon-editor

First, install the mavon-editor package from npm: npm install mavon-editor --save Then import and register it globally in main.js:

// import mavonEditor
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
Vue.use(mavonEditor);

Create a Vue page that uses the mavon-editor component and bind a data property to v-model:

<template>
  <mavon-editor v-model="value"/>
</template>

<script>
export default {
  name: "mavonEditorDemo",
  data () {
    return {
      value: '公众号:霸道的程序猿'
    }
  }
}
</script>

The component offers many props; key ones include value (initial content), language (supported languages such as zh-CN, en, etc.), fontSize, scrollStyle, boxShadow, transition, toolbarsBackground, previewBackground, subfield (dual‑column vs single‑column), placeholder, editable, codeStyle, toolbarsFlag, navigation, shortCut, autofocus, ishljs (code highlighting), imageFilter, imageClick, tabSize, html, and xssOptions. The documentation lists default values and descriptions for each.

The default toolbar includes buttons such as bold, italic, header, underline, strikethrough, mark, superscript, subscript, quote, ordered list, unordered list, link, image link, code, table, fullscreen, readmodel, htmlcode, help, undo, redo, trash, save, navigation, align left/center/right, subfield, and preview. Custom buttons can be added by inserting a template slot (e.g., left-toolbar-before) with a regular button element and binding a click handler.

Event bindings are provided for actions like change, save, fullScreen, readModel, htmlCode, subfieldToggle, previewToggle, helpToggle, navigationToggle, imgAdd, and imgDel. Each event lists its parameters and a brief description.

To enable code highlighting, set the :ishljs prop to true:

<mavon-editor :ishljs="true"></mavon-editor>

Image uploading can be handled by listening to the imgAdd event, uploading the file to a server, and then calling $vm.$img2Url(pos, url) to replace the placeholder with the returned URL. The example uses axios to post a FormData object.

methods: {
  $imgAdd(pos, $file) {
    var formdata = new FormData();
    formdata.append('image', $file);
    axios({
      url: 'server url',
      method: 'post',
      data: formdata,
      headers: { 'Content-Type': 'multipart/form-data' }
    }).then((url) => {
      $vm.$img2Url(pos, url);
    })
  }
}

The editor also defines a set of keyboard shortcuts, such as F8 to toggle navigation, F9 to switch preview/edit mode, F10 for fullscreen, F11 for reading mode, F12 for single/dual column, Ctrl+S to trigger save, Ctrl+B for bold, Ctrl+I for italic, Ctrl+H for heading, and many others for list, link, code block, image, table, etc.