@simple-m-editor/vue

A markdown editor with Vue

Install

// npm
npm install --save @simple-m-editor/vue highlight.js marked marked-highlight

// yarn
yarn add @simple-m-editor/vue highlight.js marked marked-highlight

// pnpm
pnpm add @simple-m-editor/vue highlight.js marked marked-highlight

Usage with Vue.js

// you can add class "m-editor-preview" to your element to
// use the same style as the editor shows
<script setup>
import { MEditor, marked } from '@simple-m-editor/vue'
import '@simple-m-editor/vue/dist/style.css'
const text = ref('')
const markdownContent = ref('')
const handleChange = (data) => {
  markdownContent.value = data.htmlContent
}
</script>
<template>
  <div>
    <m-editor
      v-model="text"
      :debounce-render="true"
      :debounce-render-wait="500"
      @on-change="handleChange"
    />
    <div class="m-editor-preview" v-html="markdownContent"></div>
  </div>
</template>

Api

props

name	type	default	description
value	String		value
placeholder	String	''	placehoder
mode	String	live	one of ['live', 'edit', 'preview']
full-screen	Boolean	false	full screen or not
show-line-num	Boolean	true	show side line number or not
theme	String	light	light or dark
auto-scroll	Boolean	true	auto sroll or not
debounce-render	Boolean	false	debounce render html when edit
debounce-render-wait	Number	200	debounce wait time

event

event name	description	return value
on-change	callback when editor is changed	Object: { content, htmlContent }
on-mode-change	callback when editor's mode is change	mode, one of ['live', 'edit', 'preview']; oldMode, one of ['live', 'edit', 'preview']
on-full-screen-change	callback when editor's fullscreen change	fullscreen status, true or false

Licence

MIT © hellomrbigshot