vue3-easymde
Vue3 component wrapper for EasyMDE. Written in Typescript. Build by Rollup.
70,747
| Install | |
|---|---|
npm install vue3-easymde |
|
| Latest Version: | 1.0.1 |
| Vue: | 3 |
| License: | GPL-3.0 |
| Last Updated: | Mar 17, 2023 |
| Links: | npm |
Maintainer: vikingmute
Vue3 EasyMDE Markdown Editor
Vue3 component wrapper for EasyMDE. Written in Typescript. Build by Rollup.
Install
# easymde is a peer dependency, we should install it manually
npm install vue3-easymde easymde --save
Usage
// main.ts
import VueEasymde from 'vue3-easymde'
import "easymde/dist/easymde.min.css"
app.use(VueEasymde)
<html>
<vue-easymde v-model="test" ref="editorInstance"/>
</html>
<script lang="ts" setup>
import { ref } from 'vue'
import { EditorInstance } from 'vue3-easymde'
const test = ref('initial value')
// meanwhile, vue3-easymde also expose particular instance
const editorInstance = ref<EditorInstance | null>(null)
// you can call getMDEInstance method to get easymde instance
if (editorInstance.value) {
console.log(editorInstance.value.getMDEInstance())
}
</script>
Demo
Online Demo
Run Demo locally
git clone https://github.com/vikingmute/vue3-easymde.git
cd vue3-easymde
npm install
npm run dev
# open browser at localhost:3000
Props
import { Options } from 'easymde'
interface EditorProps {
modelValue?: string;
// check all the [config](https://github.com/Ionaru/easy-markdown-editor) here
options?: Options;
}
Events
interface EditorEvents {
(type: 'update:modelValue', value: string): void;
(type: 'change', value: string): void;
(type: 'blur'): void;
}
Methods
interface EditorMethods {
// clear the editor value
clear: () => void;
// get easymde instance
getMDEInstance: () => EasyMDE | null;
}
Related Packages
Version History
| Version | Released | License |
|---|---|---|
| 1.0.1 | GPL-3.0 | |
| 1.0.0 | GPL-3.0 | |
| 0.1.0 | GPL-3.0 |