WYSIWYG editor
Vue Bootstrap 5 WYSIWYG editor plugin
MDBootstrap WYSIWYG Editor is a lightweight plugin that enables rich text editing on your website.
Note: Read the API tab to find all available options and advanced customization
Basic example
MDBootstrap
WYSIWYG Editor
MDBootstrap.com © 2020
Features:
- Changing block type
- Text formatting (bold, italic, strikethrough, underline)
- Setting text color
- Setting color highlight
- Text aligning
- Creating a list (bulled or numbered)
- Increase/Decrease indent
- Inserting links
- Inserting pictures
- Insert horizontal line
- show HTML code
- Undo/Redo
Options:
- Translations
- Using your own color palette
- Disabling/enabling sections
Methods:
- Get HTML code from editor
<template>
<MDBWysiwyg>
<br />
<p style="text-align: center">
<img
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
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>Setting color highlight</li>
<li>Text aligning</li>
<li>Creating a list (bulled or numbered)</li>
<li>Increase/Decrease indent</li>
<li>Inserting links</li>
<li>Inserting pictures</li>
<li>Insert horizontal line</li>
<li>show HTML code</li>
<li>Undo/Redo</li>
</ul>
<p><b>Options:</b></p>
<ul>
<li>Translations</li>
<li>Using your own color palette</li>
<li>Disabling/enabling sections</li>
</ul>
<p><b>Methods:</b></p>
<ul>
<li>Get HTML code from editor</li>
</ul>
</MDBWysiwyg>
</template>
<script>
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
export default {
components: {
MDBWysiwyg
}
};
</script>
<script setup lang="ts">
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>
Translations
MDBootstrap WYSIWYG Editor comes with the option that allows you to use custom translations for all text in the editor.
<template>
<MDBWysiwyg
:translations="{
paragraph: 'Paragraf',
textStyle: 'Styl tekstu',
heading: 'Nagłówek',
preformatted: 'Pre-formatowany',
bold: 'Pogrubienie',
italic: 'Kursywa',
strikethrough: 'Przekreślenie',
underline: 'Podkreślenie',
textcolor: 'Kolor tekstu',
textBackgroundColor: 'Kolor zaznaczenia',
alignLeft: 'Wyśrodkowanie do lewej',
alignCenter: 'Wyśrodkowanie do środka',
alignRight: 'Wyśrodkowane do prawej',
alignJustify: 'Justowanie',
insertLink: 'Wstaw link',
insertPicture: 'Wstaw obraz',
unorderedList: 'Lista punktowa',
orderedList: 'Lista numerowana',
increaseIndent: 'Zwiększ wcięcie',
decreaseIndent: 'Zmniejsz wcięcie',
insertHorizontalRule: 'Wstaw linię poziomą',
showHTML: 'Pokaż kod HTML',
undo: 'Cofnij',
redo: 'Przywróć',
addLinkHead: 'Dodaj Link',
addImageHead: 'Dodaj Obraz',
linkUrlLabel: 'Wpisz adres:',
linkDescription: 'Wpisz opis',
imageUrlLabel: 'Wpisz adres obrazka:',
okButton: 'OK',
cancelButton: 'Anuluj',
moreOptions: 'Pokaż więcej opcji',
}"
>
<br />
<p style="text-align: center">
<img
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
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>
</MDBWysiwyg>
</template>
<script>
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
export default {
components: {
MDBWysiwyg
}
};
</script>
<script setup lang="ts">
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>
Custom colors
By default, MDBootstrap 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.
MDBootstrap
WYSIWYG Editor
MDBootstrap.com © 2020
Default Colors:
- #1266F1 - Primary
- #B23CFD - Secondary
- #00B74A - Success
- #F93154 - Danger
- #FFA900 - Warning
- #39C0ED - Info
- #FBFBFB - Light
- #262626 - Dark
<template>
<MDBWysiwyg :colors="['#3949AB', '#00BCD4', '#7CB342']">
<br />
<p style="text-align: center">
<img
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
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>Default Colors:</b></p>
<ul>
<li><span style="color: #1266f1">#1266F1 - Primary</span></li>
<li><span style="color: #b23cfd">#B23CFD - Secondary</span></li>
<li><span style="color: #00b74a">#00B74A - Success</span></li>
<li><span style="color: #f93154">#F93154 - Danger</span></li>
<li><span style="color: #ffa900">#FFA900 - Warning</span></li>
<li><span style="color: #39c0ed">#39C0ED - Info</span></li>
<li>
<span style="color: #fbfbfb; background-color: rgb(38, 38, 38)"
>#FBFBFB - Light</span
>
</li>
<li><span style="color: #262626">#262626 - Dark</span></li>
</ul>
</MDBWysiwyg>
</template>
<script>
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
export default {
components: {
MDBWysiwyg
}
};
</script>
<script setup lang="ts">
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>
Disable toolbar section
You can disable any section. The full list of sections can be found in the API tab.
<template>
<MDBWysiwyg :formattingSection="false" :justifySection="false">
<br />
<p style="text-align: center">
<img
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
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>
</MDBWysiwyg>
</template>
<script>
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
export default {
components: {
MDBWysiwyg
}
};
</script>
<script setup lang="ts">
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>
Fixed toolbar
You can add fixed property to pin the toolbar to the top
of the screen. This option will be useful when there is a lot of text.
<template>
<MDBWysiwyg :fixed="true" :fixedOffsetTop="58">
<br />
<p style="text-align: center">
<img
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
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>
</MDBWysiwyg>
</template>
<script>
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
export default {
components: {
MDBWysiwyg
}
};
</script>
<script setup lang="ts">
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>
Fixed toolbar offset
Use the fixedOffsetTop option to set the distance from
the top of the screen. This helps to avoid hiding the toolbar behind
the navigation bar or other element on the page.
<template>
<MDBWysiwyg :fixed="true" :fixedOffsetTop="80">
<br />
<p style="text-align: center">
<img
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
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>
</MDBWysiwyg>
</template>
<script>
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
export default {
components: {
MDBWysiwyg
}
};
</script>
<script setup lang="ts">
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>
WYSIWYG editor - API
Import
<script>
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>
Properties
| Name | Type | Default | Description |
|---|---|---|---|
classes
|
String | |
Defines custom classes for component wrapper |
colors
|
Array | |
Defines custom color palette |
fixed
|
Boolean | false |
Set true to scrolls toolbar with the page until it reaches the top, then stays there |
fixedOffsetTop
|
Number | 0 |
Set the distance in pixels from the top edge of the browser |
formattingSection
|
Boolean | true |
Set to false to disable the formatting section |
justifySection
|
Boolean | true |
Set to false to disable the justify section |
listsSection
|
Boolean | true |
Set to false to disable the lists section |
linksSection
|
Boolean | true |
Set to false to disable the links section |
showCodeSection
|
Boolean | true |
Set to false to disable the show code section |
styleSection
|
Boolean | true |
Set to false to disable the styles section |
tag
|
String | 'div' |
Sets tag for component wrapper |
translations
|
Array | |
Defines custom texts |
undoRedoSection
|
Boolean | true |
Set to false to disable the undo-redo section |
Methods
| Name | Description |
|---|---|
getCode
|
Get code in HTML format |
<template>
<MDBBtn color="primary" @click="handleClick">Get Code</MDBBtn>
<MDBWysiwyg ref="wysiwygRef">
<br />
<p style="text-align: center">
<img
src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png"
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>Setting color highlight</li>
<li>Text aligning</li>
<li>Creating a list (bulled or numbered)</li>
<li>Increase/Decrease indent</li>
<li>Inserting links</li>
<li>Inserting pictures</li>
<li>Insert horizontal line</li>
<li>show HTML code</li>
<li>Undo/Redo</li>
</ul>
<p><b>Options:</b></p>
<ul>
<li>Translations</li>
<li>Using your own color palette</li>
<li>Disabling/enabling sections</li>
</ul>
<p><b>Methods:</b></p>
<ul>
<li>Get HTML code from editor</li>
</ul>
</MDBWysiwyg>
</template>
<script>
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
import { MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBWysiwyg,
MDBBtn,
},
setup() {
const wysiwygRef = ref(null);
const handleClick = () => console.log(wysiwygRef.value?.getCode());
return {
wysiwygRef,
handleClick,
};
},
};
</script>
<script setup lang="ts">
import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
import { MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
const wysiwygRef = ref<InstanceType<typeof MDBWysiwyg> | null>(null);
const handleClick = () => console.log(wysiwygRef.value?.getCode());
</script>