Developing Vue Apps with the Quasar Library — Editor Tokens and Expansion Items - The Web Dev (2025)

Table of Contents

Add Our Own Editor Features Expansion Item Conclusion Related Posts By John Au-Yeung

Add Our Own Editor Features

We can add our own features to the Quasar WYSIWYG editor.

To add our own dropdown that lets us add preset text, we can write:

<!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" ref="editor" toolbar-text-color="white" toolbar-toggle-color="yellow-8" toolbar-bg="primary" :toolbar="[ ['token'], ['bold', 'italic', 'underline'], [{ label: $q.lang.editor.formatting, icon: $q.iconSet.editor.formatting, list: 'no-icons', options: ['p', 'h3', 'h4', 'h5', 'h6', 'code'] }] ]" > <template v-slot:token> <q-btn-dropdown dense no-caps ref="token" no-wrap unelevated color="white" text-color="primary" label="Token" size="sm" > <q-list dense> <q-item tag="label" clickable @click="add('email')"> <q-item-section side> <q-icon name="mail" /> </q-item-section> <q-item-section>Email</q-item-section> </q-item> <q-item tag="label" clickable @click="add('title')"> <q-item-section side> <q-icon name="title" /> </q-item-section> <q-item-section>Title</q-item-section> </q-item> </q-list> </q-btn-dropdown> </template> </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: { add(name) { const edit = this.$refs.editor; this.$refs.token.hide(); edit.caret.restore(); edit.runCmd( "insertHTML", `&nbsp;<div class="editor_token row inline items-center" contenteditable="false">&nbsp;<span>${name}</span>&nbsp;<i class="q-icon material-icons cursor-pointer" onclick="this.parentNode.parentNode.removeChild(this.parentNode)">close</i></div>&nbsp;` ); edit.focus(); } } }); </script> </body></html>

We populate the token slot with a dropdown.

Then dropdown options run the add method.

The method calls runCmd to add our own HTML into the editor box.

It’ll also be added to the editor reactive property that we bound to the editor.

The insertHTML command inserts HTML into our editor.

Expansion Item

The q-expansion-item component lets us display more items when we click on it.

To use it, we write:

<!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-expansion-item v-model="expanded" icon="perm_identity" label="Settings" caption="James" > <q-card> <q-card-section> Lorem ipsum dolor sit amet </q-card-section> </q-card> </q-expansion-item> </q-layout> </div> <script> new Vue({ el: "#q-app", data: { expanded: false } }); </script> </body></html>

We add the q-expansion-item component with the v-model directive to bind to its open state.

icon has the name of the icon displayed on the left,.

label has the label displayed on the top.

caption is displayed below the label and it’s smaller than it.

When we click on it, the text in the q-card will be toggled on and off.

Conclusion

We can add extra editor features to the Quasar WYSIWYG editor.

Also, we can add a component to toggle more content into our Vue app with the q-expansion-item component.

Developing Vue Apps with the Quasar Library — Layouts
Quasar is a popular Vue UI library for developing good looking Vue apps. In this…
Developing Vue Apps with the Quasar Library — Dialog Box
Quasar is a popular Vue UI library for developing good looking Vue apps. In this…
Developing Vue Apps with the Quasar Library — WYSIWYG Editor
Quasar is a popular Vue UI library for developing good looking Vue apps. In this…

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

View Archive →