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 Features
The WYSIWYG editor that comes with Quasar comes with many features.
We can add them all 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"
:dense="$q.screen.lt.md"
:toolbar="[
[
{
label: $q.lang.editor.align,
icon: $q.iconSet.editor.align,
fixedLabel: true,
list: 'only-icons',
options: ['left', 'center', 'right', 'justify']
},
{
label: $q.lang.editor.align,
icon: $q.iconSet.editor.align,
fixedLabel: true,
options: ['left', 'center', 'right', 'justify']
}
],
['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
['token', 'hr', 'link', 'custom_btn'],
['print', 'fullscreen'],
[
{
label: $q.lang.editor.formatting,
icon: $q.iconSet.editor.formatting,
list: 'no-icons',
options: [
'p',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'code'
]
},
{
label: $q.lang.editor.fontSize,
icon: $q.iconSet.editor.fontSize,
fixedLabel: true,
fixedIcon: true,
list: 'no-icons',
options: [
'size-1',
'size-2',
'size-3',
'size-4',
'size-5',
'size-6',
'size-7'
]
},
{
label: $q.lang.editor.defaultFont,
icon: $q.iconSet.editor.font,
fixedIcon: true,
list: 'no-icons',
options: [
'default_font',
'arial',
'arial_black',
'comic_sans',
'courier_new',
'impact',
'lucida_grande',
'times_new_roman',
'verdana'
]
},
'removeFormat'
],
['quote', 'unordered', 'ordered', 'outdent', 'indent'],
['undo', 'redo'],
['viewsource']
]"
:fonts="{
arial: 'Arial',
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS',
courier_new: 'Courier New',
impact: 'Impact',
lucida_grande: 'Lucida Grande',
times_new_roman: 'Times New Roman',
verdana: 'Verdana'
}"
></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 put all the features in the toolbar prop to add them.
The styles of the editor can be changed.
For instance, we can change the toolbar and editor colors 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"
flat
content-class="bg-amber-3"
toolbar-text-color="white"
toolbar-toggle-color="yellow-2"
toolbar-bg="primary"
:toolbar="[
['bold', 'italic', 'underline'],
[{
label: $q.lang.editor.formatting,
icon: $q.iconSet.editor.formatting,
list: 'no-icons',
options: ['p', 'h3', 'h4', 'h5', 'h6', 'code']
}]
]"
></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>
content-class changes the editor color.
toolbar-text-color changes the toolbar’s text color.
toolbar-toggle-color changes the color when we toggle any buttons.
toolbar-bg is the background color of the toolbar.
Conclusion
We can add many features to Quasar’s editor component and style it our way.
