Markdown插件 mavon-editor的使用以及在nuxt上的安装部署

mavon-editor是基于Vue的markdown编辑器。
最近打算搭建一个自己的个人博客，需要将md文件转换成html并渲染进页面，面向百度找了一个晚上，因为暂时只需要展示博客不需要编辑博客的功能，所以一开始是打算用marked加highlight.js完成的，但是在使用的过程中出现了样式很丑啊以及解析以后的html结构也不太符合当初的构思的问题，所以最后还是改用mavon-editor解决了。

安装及配置

• Install mavon-editor (安装)

$ npm install mavon-editor --save

在vue的环境下

// 全局注册 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>

在nuxt.js 中

// 在plugins下新建 vue-mavon-editor.js
import Vue from 'vue';
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
 
Vue.use(mavonEditor);

// 然后在nuxt.config.js 中添加plugins配置
plugins: [
    { src: '@/plugins/vue-mavon-editor', ssr: false }
  ],

// 在页面或者组件中引入 
<template>
   <no-ssr>
     <mavon-editor v-model="articleContent"/>
   </no-ssr>
</template>

• 当你只需要将md文件转成html渲染进页面并不需要编辑时

<no-ssr>
  <mavon-editor
    :subfield = "false" //true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
    :defaultOpen = "'preview'" //edit： 默认展示编辑区域 ， preview： 默认展示预览区域 , 其他 = edit
    :toolbarsFlag = "false" //工具栏是否显示
    :editable="false" //是否允许编辑
    :scrollStyle="true" //开启滚动条样式(暂时仅支持chrome)
    :ishljs = "true" //代码高亮
    v-model="articleContent"/>
</no-ssr>

API 文档

/*
默认工具栏按钮全部开启, 传入自定义对象
例如: {
bold: true, // 粗体
italic: true,// 斜体
header: true,// 标题
}
此时, 仅仅显示此三个功能键
/
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, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示html源码
help: true, // 帮助
/ 1.3.5 /
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件）
/ 1.4.2 /
navigation: true, // 导航目录
/ 2.1.8 /
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐
/ 2.2.1 */
subfield: true, // 单双栏模式
preview: true, // 预览
}