F-loat / Vue Simplemde
Licence: mit
📝 Vue SimpleMDE - use simplemde with vue.js
Stars: ✭ 730
Projects that are alternatives of or similar to Vue Simplemde
React Md Editor
A simple markdown editor with preview, implemented with React.js and TypeScript.
Stars: ✭ 374 (-48.77%)
Mutual labels: markdown, editor
Marktext
📝A simple and elegant markdown editor, available for Linux, macOS and Windows.
Stars: ✭ 22,894 (+3036.16%)
Mutual labels: markdown, editor
Mua
An open source markdown editor for Android.
Stars: ✭ 318 (-56.44%)
Mutual labels: markdown, editor
Electron Markdownify
📕 A minimal Markdown editor desktop app
Stars: ✭ 700 (-4.11%)
Mutual labels: markdown, editor
Markdowneditor
Lightweight markdown editor written for windows,only one GREEN exe file
Stars: ✭ 403 (-44.79%)
Mutual labels: markdown, editor
React Markdown Editor Lite
a light-weight Markdown editor based on React. 一款轻量的基于React的markdown编辑器
Stars: ✭ 553 (-24.25%)
Mutual labels: markdown, editor
Mavoneditor
mavonEditor - A markdown editor based on Vue that supports a variety of personalized features
Stars: ✭ 5,203 (+612.74%)
Mutual labels: markdown, editor
Phodit
Phodal's markdown/ebook editor with MicroFrontend & Web Components
Stars: ✭ 301 (-58.77%)
Mutual labels: markdown, editor
Django Markdownx
Comprehensive Markdown plugin built for Django
Stars: ✭ 657 (-10%)
Mutual labels: markdown, editor
Text
📑 Collaborative document editing using Markdown
Stars: ✭ 282 (-61.37%)
Mutual labels: markdown, editor
For Editor
for-editor - A markdown editor based on React
Stars: ✭ 358 (-50.96%)
Mutual labels: markdown, editor
Cattaz
Realtime collaborative tool which can run custom applications in a Wiki page
Stars: ✭ 191 (-73.84%)
Mutual labels: markdown, editor
Vditor
♏ 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
Stars: ✭ 3,773 (+416.85%)
Mutual labels: markdown, editor
React Simplemde Editor
React wrapper for simplemde markdown editor
Stars: ✭ 463 (-36.58%)
Mutual labels: markdown, editor
Wp Editor.md
或许这是一个WordPress中最好,最完美的Markdown编辑器
Stars: ✭ 624 (-14.52%)
Mutual labels: markdown, editor
Vue-SimpleMDE
Markdown Editor component for Vue.js. Support only vue2.x.
Use Setup
No longer support Vue1.x, you can modify to use
Install
npm install vue-simplemde --save
Use
- Internal reference in a single component
<template>
<vue-simplemde v-model="content" ref="markdownEditor" />
</template>
<script>
import VueSimplemde from 'vue-simplemde'
export default {
components: {
VueSimplemde
}
}
</script>
<style>
@import '~simplemde/dist/simplemde.min.css';
</style>
- Global reference
import Vue from 'vue'
import VueSimplemde from 'vue-simplemde'
import 'simplemde/dist/simplemde.min.css'
Vue.component('vue-simplemde', VueSimplemde)
Props
property | type | default | describe |
---|---|---|---|
value | String | None | Initial value, v-model binding can be used |
name | String | None | The name of the control. |
preview-class | String | None | Custom preview style class |
autoinit | Boolean | true | Automatic initialization |
highlight | Boolean | false | Is it open to highlight |
sanitize | Boolean | false | HTML that does not render input after opening |
configs | Object | {} | SimpleMDE's config |
previewRender | Function | - | configs.previewRender |
Events
event | describe | arguments |
---|---|---|
input | Triggered when the Input value changes | value |
blur | Triggered when the Input loses focus | value |
initialized | Triggered when initialization is complete | simplemde |
Methods
this.$refs.markdownEditor.simplemde.togglePreview();
Markdown style
e.g. use Github's markdown style
install
$ npm install --save github-markdown-css
use
<template>
<vue-simplemde preview-class="markdown-body" />
</template>
<style>
@import '~simplemde/dist/simplemde.min.css';
@import '~github-markdown-css';
</style>
Highlight
install
$ npm install --save highlight.js
use
<template>
<vue-simplemde :highlight="true" />
</template>
<script>
import hljs from 'highlight.js';
window.hljs = hljs;
</script>
<style>
@import '~simplemde/dist/simplemde.min.css';
@import '~highlight.js/styles/atom-one-dark.css';
/* Highlight theme list: https://github.com/isagalaev/highlight.js/tree/master/src/styles */
</style>
simplemde-theme-base)
Editor Theme (e.g. use simplemde-theme-base theme
install
$ npm install --save simplemde-theme-base
use
<style>
@import '~simplemde-theme-base/dist/simplemde-theme-base.min.css';
/* no need import simplemde.min.css */
</style>
e.g.
Configuration
SimpleMD's config
Examples
Dependencies
Licence
vue-simplemde is open source and released under the MIT Licence.
Copyright (c) 2018 F-loat
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].