Uncaught TypeError: Cannot read property 'ops' of undefined

[jackbarham]

Hello, I'm getting an error as soon as I install the plugin. I've done everything according to your README setup (with no extra configuration) and I get this error when trying to load a page with <quill :content.sync="content"></quill> module on it.

The error is:

index.js:35150 Uncaught TypeError: Cannot read property 'ops' of undefined

Which is referring to:

Vue.filter('quill', function(value) {
    return render(value.ops);
});

Any idea's what might be causing this?

[BrockReece]

Hi Jack,

I would guess it is probably an issue with the initial value of "content" in your parent component. I know this isn't in the readme but it would be useful to initialise this as a valid quill delta if you are using the component and the custom quill filter.

data() {
    return {
        content: {
            ops: [],
        },
    },
} 

I will update the readme to reflect this advice.

Cheers
Brock

[jackbarham]

Thanks Brock, you guessed right. It's working now :)

[BrockReece]

Good to hear.
I have updated the readme which should help others, so thanks for that :)

Cheers
Brock

[timeswind]

I think you should also update the readme to tell others how to set up the editor when setting the option="html"

[jackbarham]

I know this is nothing to do with the current issue (happy to move comment if required), but I'm struggling to get the toolbar to display. The editor works and I can get it to sync with content however there is no styling and I don't quite understand how custom formats work?

Do you have a working example I can take a look at?

This looks like it could be a an awesome plugin (especially for what I need), but being fairly new to Vue / Javascript the doc's are not helping me.

Thanks for putting this together and your swift response :)

[timeswind]

you have to import the "quill.snow.css" to display the toolbar
//cdn.quilljs.com/0.20.1/quill.snow.css

[BrockReece]

@jackbarham For the toolbar you will probably just need to add the css, I will add this to the docs.

@timeswind Thanks, I will make some changes now.

Thank you both for your feedback it is all very welcome.

[jackbarham]

Thanks for putting this together @BrockReece - A decent Vue.js based Editor is very much required right now.

[jackbarham]

Finally. A very simple demo would be with a few custom formats would be really helpful. Thanks again.

[BrockReece]

Agreed, maybe I should spend a bit of time polishing up the docs and including a couple of examples.

[timeswind]

@jackbarham
try this

      cFormats: [
        {
          name: 'grey',
          options: {
            tag: 'a',
            style: 'color',
            defult: 'rgb(170, 170, 170)'
          }
        }
      ]

<quill :content.sync="content" :formats="cFormats"></quill>

in Quill.vue

 this.editor.insertText(0, 'Hello', 'grey')

[BrockReece]

@timeswind Nice example. I have added some example components to the repo, one of them expands on your idea by showing how to overload the toolbar to include a button for toggling the custom format.

[timeswind]

@BrockReece I think the most confusing step is for others is setting the attribute value in custom formats.

      cFormats: [
        {
          name: 'grey',
          options: {
            tag: 'a',
            style: 'color',
            defult: 'rgb(170, 170, 170)'
          }
        }
      ]

style: 'color', defult: 'rgb(170, 170, 170)'
I look through the quill.js file several times and finally find a right way to set the color of the text in custom format

[BrockReece]

Thanks @timeswind, I really appreciate the feedback.

I guess you are using the html output? Setting the attribute is very useful for deltas.

Maybe I should include something like this in the html example? Though I have just tried with your code above and it doesn't seem to work.

[timeswind]

I mean people may not know how to write custom formats.
For example, for me, I am confused about the following example code you provide:

                formats: {
                    {
                        name: 'custom',
                        options: {
                            attribute: 'custom',
                        },
                    },
                },

what is attribute?is it a class name ? or an attribute tag in DOM
like

<p custom></p>

or I can replace the attribute: 'custom'with fontSize:'30px'

[BrockReece]

Ah I see, sorry I misunderstood.

The attribute key can be used for meta data in a delta object. So the resulting delta would look something like...

{
    ops: [
        {
            attributes: {
                custom: true,
            },
            insert: "Hello World"
        },
    ],
}

I would love to link to the official documentation that Quill provide but, as you hinted to in an earlier message, it doesn't really exist. :( Hopefully the release of v1.0 will provide better documentation.

I will look at adding more custom formats to that example and hopefully cover a few more permutations.

[jackbarham]

Thanks for doing all this @BrockReece. I think this is the only editor that doesn't reply on Bootstrap, jQuery, etc with a Vue.js wrapper (and it's wrapping a decent editor too). If you can get this right with good docs/example this could be the 'go to' editor for Vuers - It will be worth spending some time on it.

I knocked up a quick Vue.js component style guide while I was learning Vue. I'm currently rebuilding it with more elements and better structure. I'd love to be able to include this as the text editor over time :)

[BrockReece]

@jackbarham, thanks, I will spend a bit of time on it over the next few days and let you know.

I am really liking that style guide btw.
I too am building a load of standard web components, give me a shout if you want some help.

[BrockReece]

Sorry man, that email address is bouncing.
You can reach me at brockreece@gmail.com though

[jackbarham]

Sent

[lukechapman]

@BrockReece @jackbarham I have a rookie question: after retrieving some html from an ajax request, how do you apply it to the component?

[BrockReece]

Hi @lukechapman.

Something like this should work.
Using the v-if means that the quill component will only initialise when the ajax data is ready.

<quill v-if="ajaxData" :content.sync="ajaxData" output="html"></quill>

I hope this helps.
Brock

[lukechapman]

@BrockReece perfect! that was it, thanks a bunch

[BrockReece]

No problem