sme

simple-m-editor

a simple markdown editor with Vue.js

Showing:

Popularity

Downloads/wk

181

GitHub Stars

6

Maintenance

Last Commit

10d ago

Contributors

0

Package

Dependencies

3

License

Type Definitions

Tree-Shakeable

No?

Categories

Readme

simple-m-editor

A markdown editor with Vue.js

GitHub package.json version GitHub

Install

yarn add simple-m-editor

use npm

npm install --save simple-m-editor

Usage with Vue.js

// you can add class "m-editor-preview" to your element to
// use the same style as the editor shows
<template>
<div>
  <m-editor
    v-model="text"
    :debounce="true"
    :debounce-wait="500"
    @on-change="handleChange"
  />
  <div class="m-editor-preview" v-html="markdownContent"></div>
</div>
</template>
import mEditor from 'simple-m-editor'
import 'simple-m-editor/dist/simple-m-editor.css'
export default {
  component: {
    mEditor
  },
  data () {
    return {
      text: '',
      markdownContent: ''
    }
  },
  methods: {
    handleChange(data) {
      this.markdownContent = data.htmlContent
    }
  }
}

Preview

address

Api

props

nametypedefaultdescription
valueStringvalue
placeholderString''placehoder
modeStringliveone of ['live', 'edit', 'preview']
full-screenBooleanfalsefull screen or not
show-line-numBooleantrueshow side line number or not
themeStringlightlight or dark
auto-scrollBooleantrueauto sroll or not
debounceBooleanfalsedebounce render html when edit
debounce-waitNumber200debounce wait time

event

event namedescriptionreturn value
on-changecallback when editor is changedObject: { content, htmlContent }
on-mode-changecallback when editor's mode is changemode, one of ['live', 'edit', 'preview']; oldMode, one of ['live', 'edit', 'preview']
on-full-screen-changecallback when editor's fullscreen changefullscreen status, true or false

Licence

MIT Licence

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100