3.0.0-beta.0 • Published 8 months ago
simple-m-editor v3.0.0-beta.0
simple-m-editor
A markdown editor with Vue@3
If you want to use it with vue@2.7, you can use simple-m-editor@2.x. If you want to use it with vue@2.6 or older version, you can use simple-m-editor@0.4.
Install
use npm
npm install --save simple-m-editor
use yarn
yarn add simple-m-editor
use pnpm
pnpm i 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
<script setup>
import { MEditor, marked } from 'simple-m-editor'
import 'simple-m-editor/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>
Preview
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
3.0.0-beta.0
8 months ago
2.7.0
8 months ago
1.0.0-beta.2
1 year ago
1.0.0-beta.1
1 year ago
0.4.6
3 years ago
0.4.5
3 years ago
0.4.4
3 years ago
0.4.3
4 years ago
0.4.2
4 years ago
0.4.1
5 years ago
0.4.0
5 years ago
0.3.5
5 years ago
0.3.4
5 years ago
0.3.3
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.9
5 years ago
0.2.8
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.8
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.3
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago