weixin_34279061
weixin_34279061

推荐一款基于Vue的Markdown编辑器插件——mavonEditor

github地址

演示地址

特点

  • 支持简体中文、英语、法语、西班牙语四种语言
  • 移动端适配
  • 语法拓展全面
  • 支持图片上传
  • 文档丰富、功能丰富且可配置

mavonEditor

基于Vue的markdown编辑器

English Documents

Demo for jsfiddle

example (图片展示)

PC

Install mavon-editor (安装)

$ npm install mavon-editor --save
复制代码

Use (如何引入)

index.js:

    // 全局注册
    // 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: '' }
        }
    })
复制代码

index.html

<div id="main">
    <mavon-editor v-model="value"/>
div>
复制代码

代码高亮

如不需要hightlight代码高亮显示，你应该设置ishljs为false

开启代码高亮props

    // ishljs默认为true
    "true">mavon-editor>
复制代码

为优化插件体积，从v2.4.2起以下文件将默认使用cdnjs外链:

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

代码高亮highlight.js中的语言解析文件和代码高亮样式将在使用时按需加载. github-markdown-css和katex仅会在mounted时加载

Notice: 可选配色方案 和 支持的语言 是从 highlight.js/9.12.0 导出的

图片上传