QEditor is a WYSIWYG (“what you see is what you get”) editor component.
<q-editor v-model="model" />
The tooltips content of QEditor are part of Quasar I18n. If your desired language pack is missing, please provide a PR for it.
v-model which you should bind to a String in your scope, which is essentially HTML code.
||Boolean||Sets editor in readonly mode.|
||Boolean||Sets editor in disable mode.|
||String||CSS unit for minimum height of the input area.|
||String||CSS unit for maximum height of the input area.|
||String||CSS unit for height of the input area.|
||Object||Object with definitions (see next sections).|
||Object||Object with fonts definitions (see next sections).|
||Array||Array of Arrays of Objects/Strings with toolbar commands (see next sections).|
||String||Color (from Quasar Palette) of toolbar commands.|
||String||Text color (from Quasar Palette) of toolbar commands.|
||String||Color (from Quasar Palette) of toolbar commands when in “active” state.|
||String||Toolbar background color (from Quasar Palette).|
||Boolean||Toolbar buttons become of “flat” type.|
||Boolean||Toolbar buttons become of “outline” type.|
||Boolean||Toolbar buttons become of “push” type.|
||Boolean||Toolbar buttons become of “rounded” type.|
||Object||CSS Style in Object format for the input area.|
||Object/Array/String||CSS classes for the input area.|
By default, QEditor offers most if not all the commands you’d need in a WYSIWYG editor: bold, italic, strike, underline, unordered (list), ordered (list), subscript, superscript, link, fullscreen, quote, left (align), center (align), right (align), justify (align), print, outdent, indent, removeFormat, hr, undo, redo, h1 to h6, p (paragraph), code (code paragraph), size-1 to size-7.
Each of these commands are pre-configured with icons with tooltips. However, if you want to override some of their settings you can do so with the help of
definitions Object property.
Example adding your own definition. In this case make sure you don’t overlap the default commands:
<!-- we can later use "save" and "upload" in "toolbar" prop -->
tip: 'Save your work',
tip: 'Upload to cloud',
Notice the handlers. It references methods in your Vue scope
for when toolbar commands using these definitions are clicked/tapped.
Command definitions properties:
||String||Label of button|
||String||Icon of button|
||String||Tooltip of button|
||String||Either this or “handler” is required. One of the commands described at the beginning of this section.|
||Function||Either this or “cmd” is required. Function for when button gets clicked/tapped.|
||Boolean/Function||Is button disabled? If specifying a function, return a Boolean value.|
Another example of adding a definition using a QEditor command:
Example of specifying fonts so that you can later use them as options in the toolbar. These become “commands” themselves, so make sure you don’t overlap any of the default commands.
arial_black: 'Arial Black',
comic_sans: 'Comic Sans MS'
Then in toolbar, you can reference them. The example below creates a dropdown.
options: ['default_font', 'arial', 'arial_black', 'comic_sans']
toolbar property is the place where you configure how your toolbar looks like, based on your own commands and the default ones. It’s an Array of Arrays of Object/Strings. Each sub-array represents a Button Group.
[ // array of button groups
Take a look at the demo and the examples below to see how you can also specify dropdowns. You can make dropdowns as single selection, meaning only one command from its list can have an “active” state.
<!-- Example of a dropdown with text alignment commands -->
options: ['left', 'center', 'right', 'justify']
||Triggered when input area content changes.|
||(v0.17.7+) Emitted when Fullscreen state gets toggled.|
This particular case:
- overrides bold & italic default definitions (label, icon, their tooltips)
- adds a new custom command which basically is same as “italic”
- adds “save”, “upload” & “spellcheck” commands
- adds a disabled button
- adds a custom “Import” button
User can pick only one option from each dropdown.
- First has icon and label changing based on current selection
- Second has fixed label but dynamic icon
- Third has fixed icon but dynamic label