Vue中使用markdown

我不是女神ヾ 2024-04-17 16:27 49阅读 0赞

###  使用mavonEditor ###

mavonEditor既可作为编辑使用，也可作为解析使用  
API：[https://github.com/hinesboy/mavonEditor][https_github.com_hinesboy_mavonEditor]  
刚开始做的时候可以想到用mavonEditor作为编辑器使用，v-model中绑定数据，可以提交到数据库中，但就是没想到怎么去把数据库中的数据取出来再进行解析，感觉看官方API也是一头雾水，网上怎么也搜不到相关内容，于是还是沉下心来看API，总算是想到还可以用此来解析。

引入

npm install mavon-editor --save
    // 全局注册
        // import with ES6
        import Vue from 'vue'
        import mavonEditor from 'mavon-editor'
        import 'mavon-editor/dist/css/index.css'
        // use
        Vue.use(mavonEditor)

*  作为编辑器使用

<mavon-editor v-model="context" :toolbars="toolbars" @keydown="" />
    data(){
      return {
          context: ' ',//输入的数据
          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 // 导航目录
                }
      }
    }

*  从数据库中获取刚刚存入的markdown文字解析到页面来

<mavon-editor
          class="md"
         :value="articleDetail.context"//获取数据
         :subfield = "prop.subfield"
         :defaultOpen = "prop.defaultOpen"
         :toolbarsFlag = "prop.toolbarsFlag"
         :editable="prop.editable"
         :scrollStyle="prop.scrollStyle"
      ></mavon-editor>
    
        computed: {
            prop () {
              let data = {
                subfield: false,// 单双栏模式
                defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
                editable: false,
                toolbarsFlag: false,
                scrollStyle: true
              }
              return data
            }
          },

作者：noyanse  
链接：https://www.jianshu.com/p/aca26ec75ec3  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[https_github.com_hinesboy_mavonEditor]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Fhinesboy%2FmavonEditor