Editor Plugin get/set works different than render?

washuit-iamm

I am working on the Quill plugin, I have the simple idea to save/retrieve the delta json.

My code looks like so:

    get: function (conf) {
      var quillDelta = conf._quill.getContents();
      return JSON.stringify(quillDelta);
    },
 
    set: function (conf, val) {
      conf._quill.setContents(JSON.parse(val));
    },

This works great. When I set breakpoints I see JSON. And the Editor shows my Quill field with formatted code and everything.

However... my render function does not seem to work the same way. The following JSON is what's logged to my console, and in fact this is what the JSON looks like in my database.

"{"ops":[{"insert":"Hello "},{"attributes":{"background":"#e60000"},"insert":"World"},{"insert":"\n"}]}"

My render function:

{
    data: 'FieldDefinition.Content',
    render: function (data, type, row) {
        const container = document.createElement('div');
        const quill = new Quill(container, {
            readOnly: true,
        });
        quill.setContents(data);
        return container.innerHTML
    }
},

I have tried JSON.parse(data) as well, which would mirror the way the plugin works but that fails. Even better solution would be if the JSON was not escaped in such a way in my database. I assume Chrome is escaping it like that when it sends the data as form encoded?

allan

Are you using our server-side libraries? You'll need to set ->xss(false) for the field in question, otherwise it will encode HTML entities, which is not what you want with this.

Allan

washuit-iamm

@allan This worked great! This is my final solution, hopefully this helps someone:

Edit the editor quill plugin and make the following changes to get/set:

    get: function (conf) {
      var quillDelta = conf._quill.getContents();
      return JSON.stringify(quillDelta);
    },
 
    set: function (conf, val) {
      if (val)
        conf._quill.setContents(JSON.parse(val));
    },

For displaying quill content in your rows, it is recommended to use a read-only quill instance:

{
    data: 'Whatever',
    render: function (data, type, row) {
        if (!data)
        {
            return;
        }

        const container = document.createElement('div');
        const quill = new Quill(container, {
            readOnly: true,
        });
        quill.setContents(JSON.parse(data));
        return container.innerHTML
    }
},

This is because Quill speaks the "Delta" format which is just a fancy name for some JSON that formats text.

allan

Nice one - thanks for sharing this with us.

Allan