How to extend Editor?

Okeanij

I try to extend QEditor to add some functionality: some buttons definitions.

Just little code that as I think can’t broke component.

All works as expected exept items with popover like fonts or sizes.
When clicking popover - goes exception.

Mabe need to make some aditional initialization to solve it?

Okeanij

The second try by wrap.

import {QEditor} from "quasar-framework/src/components/editor";
import ImageUploader from "ImageUploader";

 export default {
 name: "MyEditor",
 components: {ImageUploader},
 props: QEditor.props,
 methods: {
    uploadImages() {
         this.$refs.imageUploader.showDialog();
    }
 },
 render(h) {
    let props =  Object.assign({},this.$props);

    if(!props.definitions)
       props.definitions = {};

       props.definitions["addImages"] = {icon: 'camera_enhance', tip: 'Добавить изображения', handler: this.uploadImages}

    let editor = h(QEditor,{props: props});
    let imageUploader = h(ImageUploader, { ref: "imageUploader", props: { htmlEditor: editor}});

    return h('div', [editor, imageUploader]);
  }
}

Faild with the same error.

s.molinari

Doesn’t this work for your use case? https://quasar-framework.org/components/editor---wysiwyg.html#Overriding-amp-extending-default-toolbar-buttons-definitions

If not, what is it you are trying to add?

Scott

Okeanij

I just want to make editor with my custom button “images uploader” reusable.
Only 2 functions add:

Add image upload dialog
Add button to open dialog

And the 3 try… don’t understand why error (the same).

<template>
  <div>
      <q-editor ref="editor" v-bind="$props"
         :definitions="{
        addImages: {icon: 'camera_enhance', tip: 'Добавить изображения', handler: uploadImages},
      }"   />
      <ImageUploader ref="imageUploader" :htmlEditor="editor" />
  </div>
</template>

<script>
import {QEditor} from "quasar-framework/src/components/editor";
import ImageUploader from "ImageUploader";

export default {
   name: "MyEditor1",
   components: {ImageUploader, QEditor},
   props: QEditor.props,
   data: function () {
    return {
      editor: null
    }
  },
  methods: {
     uploadImages() {
       this.$refs.imageUploader.showDialog();
      }
   },
   mounted() {
      this.editor = this.$refs.editor;
    }
</script>

Okeanij

Solved.

Need to use

 import {QEditor} from "quasar";

instead of

 import {QEditor} from "quasar-framework/src/components/editor";

No More Posting New Topics!

How to extend Editor?