1.4.5 • Published 6 years ago
@wakeio/vue-wysiwyg v1.4.5
A fork of the MYCURE Inc. wysiwyg editor for Vue.js
Install
NPM
$ npm install @wakeio/vue-wysiwygUsage
As a global plugin
import Vue from 'vue';
import wysiwyg from '@wakeio/vue-wysiwyg';
Vue.use(wysiwyg);As a local component
<template>
<div>
<wysiwyg v-model="html"></wysiwyg>
</div>
</template>
<script>
import wysiwyg from '@wakeio/vue-wysiwyg';
export default {
components: {
wysiwyg
},
data () {
return {
html: ''
}
}
}
</script>Props
height - Number - Sets the min-height of the editor container.
<wysiwyg v-model="html" :height="500"></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>
<wysiwyg v-model="html" :hide="hide"></wysiwyg>
</div>
</template>
<script>
import wysiwyg from '@wakeio/vue-wysiwyg';
export default {
components: {
wysiwyg
},
data () {
return {
html: '',
hide: {
strikethrough: true,
table: true
}
}
}
}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 |