Editor (WYSIWYG)     

QEditor is a WYSIWYG (“what you see is what you get”) editor component.

WARNING
Using v-html on the resulting v-model renders you vulnerable to Cross Site Scripting attacks.
If the content is user generated, be sure to sanitize it either on render or server side.

Installation

Edit /quasar.conf.js:

framework: {
  components: ['QEditor']
}

Basic Usage

<q-editor v-model="model" />

Internationalization

The tooltips content of QEditor are part of Quasar I18n. If your desired language pack is missing, please provide a PR for it.

Vue Properties

Supports v-model which should be binded to a String in your scope, which is essentially HTML code.

Vue Property Type Description
readonly Boolean Sets editor in readonly mode.
disable Boolean Sets editor in disable mode.
min-height String CSS unit for minimum height of the input area.
max-height String CSS unit for maximum height of the input area.
definitions Object Object with definitions (see next sections).
fonts Object Object with fonts definitions (see next sections).
toolbar Array Array of Arrays of Objects/Strings with toolbar commands (see next sections).
toolbar-color String Color (from Quasar Palette) of toolbar commands.
toolbar-text-color String Text color (from Quasar Palette) of toolbar commands.
toolbar-toggle-color String Color (from Quasar Palette) of toolbar commands when in “active” state.
toolbar-bg String Toolbar background color (from Quasar Palette).
toolbar-flat Boolean Toolbar buttons become of “flat” type.
toolbar-outline Boolean Toolbar buttons become of “outline” type.
toolbar-push Boolean Toolbar buttons become of “push” type.
toolbar-rounded Boolean Toolbar buttons become of “rounded” type.
content-style Object CSS Style in Object format for the input area.
content-class Object/Array/String CSS classes for the input area.

Definitions

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.

<!--
  overriding "bold" command to include a label instead of an icon
  and also changing its tooltip
-->
:definitions="{
  bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
}"

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 -->
:definitions="{
  save: {
    tip: 'Save your work',
    icon: 'save',
    label: 'Save',
    handler: saveWork
  },
  upload: {
    tip: 'Upload to cloud',
    icon: 'cloud_upload',
    label: 'Upload',
    handler: uploadIt
  }
}"
<!--
  Notice the handlers. It references methods in your Vue scope
  for when toolbar commands using these definitions are clicked/tapped.
-->

Command definitions properties:

Property Name Type Description
label String Label of button
icon String Icon of button
tip String Tooltip of button
cmd String Either this or “handler” is required. One of the commands described at the beginning of this section.
handler Function Either this or “cmd” is required. Function for when button gets clicked/tapped.
disable Boolean/Function Is button disabled? If specifying a function, return a Boolean value.

Another example of adding a definition using a QEditor command:

:definitions="{
  customItalic: {
    cmd: 'italic',
    icon: 'camera_enhance',
    tip: 'Italic'
  }
}"

Fonts

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.

:fonts="{
  arial: 'Arial',
  arial_black: 'Arial Black',
  comic_sans: 'Comic Sans MS'
}"

Then in toolbar, you can reference them. The example below creates a dropdown.

:toolbar="[
  ...,
  [{
    label: $q.i18n.editor.defaultFont,
    icon: $q.icon.editor.font,
    fixedIcon: true,
    list: 'no-icons',
    options: ['default_font', 'arial', 'arial_black', 'comic_sans']
  }]
]"

Toolbar

The 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
  [ ... ], // button group
  [ ... ], // button group
  ...
]
:toolbar="[
  ['bold', 'italic', 'strike', 'underline'],
  ['token', 'hr', 'link', 'custom_btn'],
  ['print', 'fullscreen']
]"

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 get into “active” state.

<!-- Example of a dropdown with text alignment commands -->
:toolbar="[
  [
    {
      label: $q.i18n.editor.align,
      icon: $q.icon.editor.align,
      fixedLabel: true,
      list: 'only-icons',
      options: ['left', 'center', 'right', 'justify']
    }
  ]
]"

Vue Events

Vue Event Description
@input Triggered when input area content changes.

Examples

Complex Example

<q-editor
  v-model="model"
  :toolbar="[
    ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript'],
    ['token', 'hr', 'link', 'custom_btn'],
    ['print', 'fullscreen'],
    [
      {
        label: $q.i18n.editor.formatting,
        icon: $q.icon.editor.formatting,
        list: 'no-icons',
        options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code']
      },
      {
        label: $q.i18n.editor.fontSize,
        icon: $q.icon.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.i18n.editor.defaultFont,
        icon: $q.icon.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'],
    [
      {
        label: $q.i18n.editor.align,
        icon: $q.icon.editor.align,
        fixedLabel: true,
        list: 'only-icons',
        options: ['left', 'center', 'right', 'justify']
      },
      {
        label: $q.i18n.editor.align,
        icon: $q.icon.editor.align,
        fixedLabel: true,
        options: ['left', 'center', 'right', 'justify']
      }
    ],
    ['undo', 'redo']
  ]"
  :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'
  }"
/>

Overriding & extending default toolbar buttons definitions

This particular case:

<q-editor
  v-model="model"
  :toolbar="[
    ['bold', 'italic'],
    ['customItalic'],
    ['save', 'upload'],
    ['spellcheck'],
    ['disabledButton'],
    ['custom_btn']
  ]"
  :definitions="{
    bold: {cmd: 'bold', label: 'Bold', icon: null, tip: 'My bold tooltip'},
    italic: {cmd: 'italic', icon: 'border_color', tip: 'My italic tooltip'},
    customItalic: {cmd: 'italic', icon: 'camera_enhance', tip: 'Italic'},
    save: {tip: 'Save your work', icon: 'save', label: 'Save', handler: saveWork},
    upload: {tip: 'Upload to cloud', icon: 'cloud_upload', label: 'Upload', handler: upload},
    spellcheck: {tip: 'Run spell-check', icon: 'spellcheck', handler: spellCheck},
    disabledButton: {tip: 'I am disabled...', disable: true, icon: 'cloud_off'}
  }"
>
  <q-btn
    slot="custom_btn"
    dense
    color="secondary"
    icon="import_contacts"
    label="Import"
    @click="importSomething"
  />
</q-editor>

Custom Style

<q-editor
  v-model="model"
  toolbar-text-color="white"
  toolbar-toggle-color="yellow-8"
  toolbar-flat
  toolbar-bg="primary"
  :toolbar="[
    ['bold', 'italic', 'underline'],
    [{
      label: $q.i18n.editor.formatting,
      icon: $q.icon.editor.formatting,
      list: 'no-icons',
      options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code']
    }]
  ]"
/>

Types of dropdowns

<q-editor
  v-model="model"
  :toolbar="[
    [
      {
        label: 'Icons & Label',
        icon: 'filter_1',
        fixedLabel: true,
        fixedIcon: true,
        options: ['bold', 'italic', 'strike', 'underline']
      }
    ],
    [
      {
        label: 'Only label',
        icon: 'filter_2',
        fixedLabel: true,
        fixedIcon: true,
        list: 'no-icons',
        options: ['bold', 'italic', 'strike', 'underline']
      }
    ],
    [
      {
        label: 'Only icons',
        icon: 'filter_3',
        fixedLabel: true,
        fixedIcon: true,
        list: 'only-icons',
        options: ['bold', 'italic', 'strike', 'underline']
      }
    ]
  ]"
/>

User can pick only one option from each dropdown.

<q-editor
  v-model="model"
  :toolbar="[
    [
      {
        label: 'Dynamic label',
        icon: 'help_outline',
        options: ['left', 'center', 'right', 'justify']
      }
    ],
    [
      {
        label: 'Static label',
        fixedLabel: true,
        options: ['left', 'center', 'right', 'justify']
      }
    ],
    [
      {
        label: 'Some label',
        icon: 'account_balance',
        fixedIcon: true,
        options: ['left', 'center', 'right', 'justify']
      }
    ]
  ]"
/>
Autocomplete Search
Last updated: Mon Jul 23 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub