q-editor color font



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



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



  • 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)
      }
    
    

    Color_QEditor.png


Log in to reply