Links
👀

Vue Wysiwyg

A simple wysiwyg editor for Vue.js by MYCURE Inc.
A simple wysiwyg editor for Vue.js by MYCURE Inc.

Demo

Install

NPM

$ npm install @mycure/vue-wysiwyg

Yarn

$ yarn add @mycure/vue-wysiwyg

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/@mycure/vue-wysiwyg/dist/mc-wysiwyg.js"></script>
<script>
Vue.use(McWysiwyg.default);
new Vue({
el: '#app',
});
</script>

Usage

As a global plugin

import Vue from 'vue';
import VueWysiwyg from '@mycure/vue-wysiwyg';
Vue.use(VueWysiwyg);

As a local component

<template>
<div>
<mc-wysiwyg v-model="html"></mc-wysiwyg>
</div>
</template>
<script>
import { McWysiwyg } from '@mycure/vue-wysiwyg';
export default {
components: {
McWysiwyg
},
data () {
return {
html: ''
}
}
}
</script>

Props

height - Number - Sets the min-height of the editor container.

<mc-wysiwyg v-model="html" :height="500"></mc-wysiwyg>
hide - Object - Pass the object property hide to hide certain features in the editor.

Sample

In example below, strikethrough and table will be hidden.
<template>
<div>
<mc-wysiwyg v-model="html" :hide="hide"></mc-wysiwyg>
</div>
</template>
<script>
import { McWysiwyg } from '@mycure/vue-wysiwyg';
export default {
components: {
McWysiwyg
},
data () {
return {
html: '',
hide: {
strikethrough: true,
table: true
}
}
}
}
</script>
hide Properties
property
type
default
bold
Boolean
false
italic
Boolean
false
underline
Boolean
false
strikethrough
Boolean
false
heading
Boolean
false
alignLeft
Boolean
false
alignCenter
Boolean
false
alignRight
Boolean
false
ol
Boolean
false
ul
Boolean
false
url
Boolean
false
table
Boolean
false
indent
Boolean
false
outdent
Boolean
false

Incoming Features

For feature request please create a new issue.
  • Add image
  • Height props
  • Configuration to show/hide features
  • Custom font
  • Paragraph
  • Quote
  • Code
  • Custom HTML
Last modified 1yr ago