vue 项目 引入markdown编辑器

在 vue-cli 引入 markdown 编辑器

最近需要做一个里程碑，，为了熟悉 vue 的使用方法，因此我使用 vue 又重新搭建了自己的个人博客，在博客中的编辑器中我选用了 markdown 编辑器，下面我们看看如何在 vue 项目中引入这个编辑器吧。

首先我们引入

npm install mavon-editor --save

使用方法

我们在vue-lic 里面的 main.js 里面进行这样的配置

// 全局注册
    import Vue from 'vue'
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor)
    new Vue({
        'el': '#main'
    })

在组件里面进行这样的代码：

<mavon-editor v-model="context" :toolbars="toolbars"/>

注： 这个标签里面已经包含了所有的编辑器信息

接下来我们看看 javascript 里面的配置写法

  data(){
    return {
      context: ' ',//输入的数据,
      addOrderVisible: false,
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        /* 1.3.5 */
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true // 导航目录
      }
    }

里面的各个属性都有，根据自己的需要进行改动

运行过后的效果图如下：

那么问题来了，，我也去看了官方的api 但是也一直没有搞懂，我既然能够进行编辑，那么我需要怎么将内容展示出来？？

对，，我找了很多博客，终于发现了展示的方法：

<mavon-editor
                 class="md"
                :value="articleDetail"
                :subfield = "prop.subfield"
                :defaultOpen = "prop.defaultOpen"
                :toolbarsFlag = "prop.toolbarsFlag"
                :editable="prop.editable"
                :scrollStyle="prop.scrollStyle"
                :navigation="prop.navigation"
             ></mavon-editor>

就是这一个标签就可以实现

对应的JavaScript代码如下：

  computed: {
    prop () {
      let data = {
        subfield: false,// 单双栏模式
        defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true,
        navigation: true
      }
      return data
    }
  },

如果你需要在页面上展示更多就只需要在 data 里面添加对应属性就可以了。

数据库敏感词

在做项目的过程中，我发现数据库 post 请求总会有错，也就是说我存入数据库的数据报错了，

找了很多地方也没发现

最后发现因为使用的是 markdown 里面的 content 包含了 单引号，只需要将所有单引号替换就可以了。

vue 组件嵌套

简单是说就是组件里面嵌入其他组件。

其实并不难，我展示一下代码肯定就能明白：

   {
      path: '/',
      name: 'mian',
      component: mian,
      redirect: '/home',
      children: [
        {path: '/home', component: content},
        {path: '/setMsg', component: setMsg},
        {path: '/classification', component: classification},
        {path: '/setMsgBox', component: setMsgBox},
        {path: '/blogPag', component: blogPag}
      ]
    },

‘/’ 这是主路由，也就是主组件
chuldren 下面的就是他的子组件

也就是说你如果要将 子组件 放到主组件里面，路由就可以这么写。