Search code examples
javascriptc#asp.netquill

JavaScript QuillJS - Get and Set of Contents

Been browsing through SO for some time trying to find a solution to my problem but cannot find one that works.

I am using the Quill editor to give some rich text capability to my site. There is some good documentation available but i'm having trouble using it properly.

For instance. I have a div with ID 'Editor' which is turned into a Quil instance. There is a button which calls a function OnClick

    function GetEditorContents() {
        var quill = new Quill('#Editor');
        MyContent = JSON.stringify(quill.getContents());

        // Pass the Quill Delta to a HiddenField value that I can then retreive on Code Behind. 
        var HiddenFieldContent = document.getElementById('<%= HFContent.ClientID%>');
        HiddenFieldContent.value = MyContent;
    }

This will give me a value of something like this. {"ops":[{"insert":"Test\n"}]}

As far as I can tell, it's adding the "ops" and "insert" and then what I wrote was "Test" and it even adds a new line on the end for me. This I can save into my database with no issues.

The problem I now have is when I come back to this page and read from the database, if there is content available I would like it reloaded into the Quill editor. There is another Quill function for this (SetContents) and this is what I am struggling with.

So far I have tried this, where the value is being produced on an anchor tag click using a data-attribuite called 'content'

            var quill = new Quill('#Editor');
            var MyContent = $(e.relatedTarget).data('content');
            quill.setContents(MyContent);

This however does not work. In my text editor I only get the first part of the JSON data string which is "{".

I have tried JSON.parse(MyContent) but this produces an error.

Uncaught SyntaxError: Unexpected token u in JSON at position 0

If I manipulate my string from the database (basically remove most of the JSON data structure) and use another method of inserting the data, it works fine. But this is not the intended behaviour I wanted especially as Quill suggests it has a really good API. There must be something i'm missing?

quill.setContents([
    { insert: $(e.relatedTarget).data('content') },
    { insert: '\n' }
]);

For reference, here is their reference. https://quilljs.com/docs/api

Solution

  • After testing more things and spending far too long on this, I decided to go back to the basics and inspect some of the markup on the page that was rendered. It turns out that I was using a double-quote in my data-attribute. For example data-country="Austria", where i nedeed to simply use a single quote. For example data-country='Austria'. This meant I could load the entire Delta string into my attribute.