q-editor color font

[olivierph]

good pm,
i dont see how to add color pickup in the toolbar of q-editor.
is it possible ?

[Sweetyy]

@olivierph i have the same question. Hard to insert it …

[paoloar77]

It’s possible to add a button, up to the editor component and send an execCommand to change the foreColor to the selected text.

vue file:

<q-btn rounded size="sm" color="primary" >
    <q-icon name="colorize" class="cursor-pointer">
        <q-popup-proxy>
            <q-color v-model="mycolor" @change="setcolor"></q-color>
        </q-popup-proxy>
    </q-icon>
</q-btn>
<q-editor
    ref="editor_ref"
    v-model="myvalue"
    .........others props .... >
</q-editor>

In the .ts file:

  public myvalue = ''

  public mounted() {
    this.myvalue = this.value
    this.editor = this.$refs.editor_ref
  }
  public setcolor() {
    document.execCommand('foreColor', false, this.mycolor)
  }