Vue 的简单可定制 Markdown 编辑器 - simple-m-editor

Vue 的简单可定制 Markdown 编辑器 - simple-m-editor
插件名称 simple-m-editor
发布时间 2021年9月14日
插件作者 hellomrbigshot

一个用 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:编辑器全屏变化时触发