How to extend Editor?



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

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

    0_1546446523817_Screenshot_20190102_192443.png

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

    0_1546446528713_Screenshot_20190102_192634.png

    Mabe need to make some aditional initialization to solve it?



  • 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.



  • 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



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

    1. Add image upload dialog
    2. 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>


  • Solved.

    Need to use

     import {QEditor} from "quasar";
    

    instead of

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

Log in to reply