Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
WYSIWYG Editor
Quasar comes with a WYSIWYG editor component.
To use it, we write the following:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-editor v-model="editor" min-height="5rem"></q-editor>
<q-card flat bordered>
<q-card-section>
<pre style="white-space: pre-line;">{{ editor }}</pre>
</q-card-section>
</q-card>
<q-card flat bordered>
<q-card-section v-html="editor"></q-card-section>
</q-card>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
editor: ""
}
});
</script>
</body>
</html>
We have the editor reactive property which is bound to the q-editor ‘s input value with v-model .
Then when we type something into the editor box and change the styles, they’ll be reflected below the editor.
editor is an HTML string with the styles, so we can use the v-html directive to display the styled content.
We can change how the buttons are displayed.
For instance, we can change the label of the bold button by writing:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-editor
v-model="editor"
min-height="5rem"
:definitions="{
bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
}"
></q-editor>
<q-card flat bordered>
<q-card-section>
<pre style="white-space: pre-line;">{{ editor }}</pre>
</q-card-section>
</q-card>
<q-card flat bordered>
<q-card-section v-html="editor"></q-card-section>
</q-card>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
editor: ""
}
});
</script>
</body>
</html>
We add the definitions prop to change the bold button with the object.
label is displayed in the button.
title is displayed when we hover over the button.
Also, we can add our own button that runs a method when we click it by writing:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<q-editor
v-model="editor"
min-height="5rem"
:definitions="{
save: {
tip: 'Save your work',
icon: 'save',
label: 'Save',
handler: saveWork
},
}"
:toolbar="[
['bold', 'italic', 'strike', 'underline'],
['upload', 'save']
]"
></q-editor>
<q-card flat bordered>
<q-card-section>
<pre style="white-space: pre-line;">{{ editor }}</pre>
</q-card-section>
</q-card>
<q-card flat bordered>
<q-card-section v-html="editor"></q-card-section>
</q-card>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
editor: ""
},
methods: {
saveWork() {
console.log("saved");
}
}
});
</script>
</body>
</html>
We add the save button in the defintitions object.
handler is set to the saveWork method so that it runs when we click it.
Then to add it to the toolbar, we put it in the toolbar prop.
Conclusion
Quasar comes with a WYSIWYG editor that we can add to our Vue app easily.
