Making the address

Demo address

The characteristics of

• Supports simplified Chinese, English, French, and Spanish
• Mobile adaptation
• Comprehensive grammar
• Support image upload
• Documented, feature-rich, and configurable

mavonEditor

Vue based Markdown editor

English Documents

Demo for jsfiddle

Example:

PC

Install mavon-editor

$ npm install mavon-editor --save
Copy the code

How to introduce

index.js:

    // Global registration
    // import with ES6
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main',
        data() {
            return { value: ' '}}})Copy the code

index.html

<div id="main">
    <mavon-editor v-model="value"/>
</div>
Copy the code

Code highlighting

If you don’t need hightlight code highlighting, you should set ishljs to false

Enable code highlighting props

    // ishljs defaults to true
    <mavon-editor :ishljs = "true"></mavon-editor>
Copy the code

To optimize the size of the plug-in, the following files will use the CDNJS outer chain by default as of V2.4.2:

• highlight.js
• github-markdown-css
• katex(v2.4.7)

Code highlighting language resolution files and code highlighting styles in highlight.js will be loaded on demand when used. Github-markdown-css and Katex will only be loaded when mounted

Notice: Optional color schemes and supported languages are exported from highlight.js/9.12.0

Image upload

<template>
    <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor>
</template>
exports default {
    methods: {
        // Bind @imgAdd Event
        $imgAdd(pos, $file){
            Upload the image to the server.
           var formdata = new FormData();
           formdata.append('image', $file);
           axios({
               url: 'server url'.method: 'post'.data: formdata,
               headers: { 'Content-Type': 'multipart/form-data' },
           }).then((url) = > {
               // Replace the returned URL with the original text! [...]. (. / 0) - >! [...]. (url)
               /** * $vm indicates an instance of mavonEditor, which can be obtained in one of the following ways * 1. Get by importing objects: 'import {mavonEditor} from... After '$vm' is introduced as' mavonEditor '* 2. $ref: '
      ,' $vm '=' this.$refs.md '*/$vm.$img2Url(pos, url); })}}}Copy the code

note

• The default size is min-height: 300px, min-width: 300px
• Based on z – index: 1500
• Props: toolbarsFlag: false, subfield: false, defaultOpen: “Preview”

The API documentation

props

 /* By default, all toolbar buttons are enabled, and custom objects are passed in, such as: {bold: true,// italic: true,// italic header: true,// title} Only three function keys */ are displayed
toolbars: {
      bold: true./ / in bold
      italic: true./ / italics
      header: true./ / title
      underline: true./ / the underline
      strikethrough: true./ / in the line
      mark: true./ / tag
      superscript: true./ / Angle on the label
      subscript: true./ / the Angle
      quote: true./ / reference
      ol: true.// Ordered list
      ul: true.// Unordered list
      link: true./ / links
      imagelink: true.// Image link
      code: true.// code
      table: true./ / form
      fullscreen: true.// Full screen editing
      readmodel: true.// Immersive reading
      htmlcode: true.// Display the HTML source code
      help: true./ / help
      1.3.5 / * * /
      undo: true./ / step
      redo: true./ / the next step
      trash: true./ / to empty
      save: true.// Save (trigger the save event in events)
      1.4.2 / * * /
      navigation: true.// Navigate to the directory
      / * 2.1.8 * /
      alignleft: true./ / left alignment
      aligncenter: true./ / in the middle
      alignright: true./ / right alignment
      2.2.1 / * * /
      subfield: true.// Single and double column mode
      preview: true./ / the preview
  }
Copy the code

events