一个用 Vue 构建的简单可定制的 Markdown 编辑器。

特征：

• 编辑器、实时、预览模式。
• 黑暗和光明主题。
• 全屏编辑器。
• 行号。
• 自动滚屏。

安装和下载：

# Yarn
$ yarn add simple-m-editor

# NPM
$ npm i simple-m-editor --save

如何使用它：

1.导入简单的markdown编辑器。

import mEditor from 'simple-m-editor'
import 'simple-m-editor/dist/simple-m-editor.css'

2. 将编辑器添加到模板中。

<template>
<div>
  <m-editor
    v-model="text"
    @on-change="handleChange"
  />
  <div class="m-editor-preview" v-html="markdownContent"></div>
</div>
</template>

export default {
  component: {
    mEditor
  },
  data () {
    return {
      text: '',
      markdownContent: ''
    }
  },
  methods: {
    handleChange(data) {
      this.markdownContent = data.htmlContent
    }
  }
}

3.默认编辑器的道具。

value: {
  type: String,
  default: ''
},
mode: {
  default: 'live',
  type: String,
  validator: (value) => {
    return ['live', 'preview', 'edit'].indexOf(value) !== -1
  }
},
placeholder: {
  default: '',
  type: String
},
fullScreen: {
  default: false,
  type: Boolean
},
showLineNum: {
  default: true,
  type: Boolean
},
autoScroll: {
  default: true,
  type: Boolean
},
theme: {
  default: 'light',
  type: String,
  validator: (value) => {
    return ['light', 'dark'].indexOf(value) !== -1
  }
},
debounce: {
  type: Boolean,
  default: false
},
debounceWait: {
  type: Number,
  default: 200
}

4. 事件。

• @on-change:编辑器改变时触发 Object: { content, htmlContent }
• @on-mode-change：编辑器模式为更改模式时触发，[‘live’, ‘edit’, ‘preview’] 之一；
• @on-full-screen-change：编辑器全屏变化时触发