09
AugMarkdown editors are simple and user-friendly text-to-HTML conversion tools for developers & web content writers. Hellomrbigshot introduced a simple and elegant markdown editor made with Vue js, that you can easily utilize in your project.
You can install it via npm or yarn.
Yarn
yarn add simple-m-editor
Npm
npm install --save simple-m-editor
Next, You have to append the class “m-editor-preview” to your element to use the same style as the editor shows.
<template>
<div>
<m-editor
v-model="text"
@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
}
}
}
name | type | default | description |
---|---|---|---|
value | String | - | value |
placeholder | String | - | placeholder |
mode | live | String | 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 scroll or not |
name | params | description |
---|---|---|
onChange | Object: { content, htmlContent } | change event |
If you want to dig more about this package you can visit its documentation on Github.
Published at : 09-08-2021
I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.
Launch project