vue整合editor.md解决多个editor.md同时共存问题v-model数据绑定vue-editor.md

vue整合editor.md解决多个editor.md同时共存问题v-model数据绑定

点击下载demo

定义editor.md为vue组件

安装 scriptjs

cnpm install --save scriptjs

在components文件夹下面创建一个组件

<template>
  <div class="markdown-editor-box">
    <link rel="stylesheet" href="/editormd/css/editormd.min.css">
    <div :id="editorId"></div>
  </div>
</template>
<script>
function uuid () {
   
  let s = []
  let hexDigits = '0123456789abcdef'
  for (let i = 0; i < 36; i++) {
   
    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
  }
  s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
  s[8] = s[13] = s[18] = s[23] = '-'
  return s.join('')
}

export default {
   
  model: {
   
    prop: 'content',
    event: 'onChangeContent'
  },
  props: {
   
    /**
     * 是否只做展示 真只展示 假则成为编辑器
     */
    show: {
   
      type: Boolean,
      default: false
    },
    /**
     * 标识 当内容改变时会传递标识过去  一般多个编辑器的时候可用用于标识
     */
    tag: {
   
      type: String,
      default: uuid()
    },
    /**
     * 标识 当内容改变时会传递标识过去  一般多个编辑器的时候可用用于标识
     */
    editorId: {
   
      type: String,
      default: uuid()
    },
    /**
     * 内容被改变事件 该事件接受一个参数
     * {
        markdown: editor.getMarkdown(),
        tag: this.tag,
        editorId: this.editorId,
        editor: editor,
        vm: this
      }
     */
    onchange: {
   
      type: Function
    },
    // 编辑器配置
    config: {
   
      type: Object
    },
    /**
     * 初始化加载的内容
     */
    content: {
   
      type: String,
      default: ''
    },
    /**
     * 延迟初始化数据时间，单位毫秒
     */
    delay: {
   
      type: Number,
      default: 0
    }
  },
  data: function () {
   
    return {
   
      editor: null