Comment on page
👀
Vue Wysiwyg
A simple wysiwyg editor for Vue.js by MYCURE Inc.
$ npm install @mycure/vue-wysiwyg
$ yarn add @mycure/vue-wysiwyg
<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>
import Vue from 'vue';
import VueWysiwyg from '@mycure/vue-wysiwyg';
Vue.use(VueWysiwyg);
<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>
<mc-wysiwyg v-model="html" :height="500"></mc-wysiwyg>
hide - Object - Pass the object property hide to hide certain features in the editor.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 Propertiesproperty | 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 |
- Add image
- Height props
- Configuration to show/hide features
- Custom font
- Paragraph
- Quote
- Code
- Custom HTML
Last modified 1yr ago