Vue WYSIWYG Editor
Vue Bootstrap WYSIWYG Editor plugin
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Vue Bootstrap WYSIWYG Editor is a lightweight plugin that enables rich text editing on your website.
Basic Example
<template>
<mdb-wysiwyg>
<p style="text-align: center;"><img
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" class="img-fluid">
</p>
<h1 style="text-align: center;">MDBootstrap</h1>
<p style="text-align: center;">WYSIWYG Editor</p>
<p style="text-align: center;">
<a href="https://mdbootstrap.com" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com</a> ©
2020</p>
<p style="text-align: left;"><b>Features:</b></p>
<ul>
<li>Changing block type</li>
<li>Text formatting (bold, italic, strikethrough, underline)</li>
<li>Setting text color</li>
<li>Text aligning</li>
<li>Inserting links</li>
<li>Inserting pictures</li>
<li>Creating a list (bulled or numbered)</li>
</ul>
<p><b>Options:</b></p>
<ul>
<li>Translations</li>
<li>Using your own color palette</li>
<li>Disabling/enabling tooltips</li>
</ul>
</mdb-wysiwyg>
</template>
<script>
import mdbWysiwyg from 'mdb-wysiwyg'
export default {
name: 'app',
components: {
mdbWysiwyg
}
}
</script>
Translations
Vue Bootstrap WYSIWYG Editor comes with the option that allows you to use custom translations for all text in the editor.
<template>
<mdb-wysiwyg :translations="{
paragraph: 'Paragraph',
heading: 'Heading',
preformatted: 'Preformatted',
bold: 'Bold',
italic: 'Italic',
strikethrough: 'Strikethrough',
underline: 'Underline',
textcolor: 'Color',
alignleft: 'Align Left',
aligncenter: 'Align Center',
alignright: 'Align Right',
alignjustify: 'Align Justify',
insertlink: 'Insert Link',
insertpicture: 'Insert Picture',
bulletlist: 'Ordered List',
numberedlist: 'Numbered List',
enterurl: 'Enter the URL',
imageurl: 'Image URL',
changeview: 'Change view'
}">
<p style="text-align: center;"><img
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" class="img-fluid">
</p>
<h1 style="text-align: center;">MDBootstrap</h1>
<p style="text-align: center;">WYSIWYG Editor</p>
<p style="text-align: center;">
<a href="https://mdbootstrap.com" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com</a> ©
2020</p>
</mdb-wysiwyg>
</template>
<script>
import mdbWysiwyg from 'mdb-wysiwyg'
export default {
name: 'app',
components: {
mdbWysiwyg
}
}
</script>
Custom color palette
By default, Vue Bootstrap WYSIWYG Editor use color palette from MDBootstrap's text colors. If you need to use your custom colors, you can simply customize them to fit your project.
<template>
<mdb-wysiwyg :colors="['#EA3C3B', '#E00065', #FFFFFF', '#000000']">
<p style="text-align: center;"><img
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" class="img-fluid">
</p>
<h1 style="text-align: center;">MDBootstrap</h1>
<p style="text-align: center;">WYSIWYG Editor</p>
<p style="text-align: center;">
<a href="https://mdbootstrap.com" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com</a> ©
2020</p>
</mdb-wysiwyg>
</template>
<script>
import mdbWysiwyg from 'mdb-wysiwyg'
export default {
name: 'app',
components: {
mdbWysiwyg
}
}
</script>
MDB Vue WYSIWYG Editor - API
Download
This plugin requires a purchase.
Buy Vue WYSIWYG Editor plugin
Options
Name | Type | Description |
---|---|---|
tooltips | boolean | Shows Bootstrap Tooltips for the toolbar buttons. |
colors | array | Allows to use custom color palette. See details here. |
translations | object | Allows to overwrite default plugin translations. See details here. |
@getContent |
event | Allows to get the content of the textarea - value is an object with two keys: html and
text |