Unable to load Quill

kthorngren

Wanted to see if Quill would better serve my needs than CKEditor and TinyMCE. But I'm not able to get it loaded, seeing the following:

Uncaught TypeError: conf._quill.addModule is not a function
    at e.create (editor.quill.js:224)
    at e.Field._typeFn (dataTables.editor.min.js:22)
    at e.Field (dataTables.editor.min.js:12)
    at e.add (dataTables.editor.min.js:36)
    at e.add (dataTables.editor.min.js:35)
    at e._constructor (dataTables.editor.min.js:66)
    at new e (dataTables.editor.min.js:8)
    at HTMLDocument.<anonymous> (instructions:229)
    at j (jquery-3.1.0.min.js:2)
    at k (jquery-3.1.0.min.js:2)

Here is my specific Quill config:

<!-- quill plugin -->
<link href="//cdn.quilljs.com/1.2.2/quill.snow.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="static/css/editor.quill.css">
<!-- quill plugin -->
<script src="//cdn.quilljs.com/1.2.2/quill.min.js"></script>
<script type="text/javascript" src="static/js/editor.quill.js"></script>

    editor = new $.fn.dataTable.Editor( {
        ajax:  '/manage_instructions',
        table: '#edit-table',
        fields: [
            { label: 'pkid:', name: 'main.pkid', type: 'hidden' },
            { label: 'Web Page:', name: 'main.name' },
            { label: 'Instructions:', name: 'main.instructions', type: 'quill',
             },
        ]
    } );

I can successfully use one of the other two editors by commenting the quill JS and CSS and uncommenting one of the others and change the field type.

Was going to try it on live.datatables.net but not sure if there is a path to load quill. BTW, I just downloaded the quill plugin and CSS from quill plugin page.

Kevin

allan

Its a compatiblity issue. They changed their API for v1 causing the problem. I've not got around to updating the Editor site yet, but try this as the integration plug-in:

(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables', 'datatables-editor'], factory );
    }
    else if ( typeof exports === 'object' ) {
        // Node / CommonJS
        module.exports = function ($, dt) {
            if ( ! $ ) { $ = require('jquery'); }
            factory( $, dt || $.fn.dataTable || require('datatables') );
        };
    }
    else if ( jQuery ) {
        // Browser standard
        factory( jQuery, jQuery.fn.dataTable );
    }
}(function( $, DataTable ) {
'use strict';


if ( ! DataTable.ext.editorFields ) {
    DataTable.ext.editorFields = {};
}

var _fieldTypes = DataTable.Editor ?
    DataTable.Editor.fieldTypes :
    DataTable.ext.editorFields;


// Default toolbar, as Quill doesn't provide one
var defaultToolbar =
    '<div id="toolbar-toolbar" class="toolbar">'+
        '<span class="ql-formats">'+
            '<select class="ql-font">'+
                '<option selected=""></option>'+
                '<option value="serif"></option>'+
                '<option value="monospace"></option>'+
            '</select>'+
            '<select class="ql-size">'+
                '<option value="small"></option>'+
                '<option selected=""></option>'+
                '<option value="large"></option>'+
                '<option value="huge"></option>'+
            '</select>'+
        '</span>'+
        '<span class="ql-formats">'+
        '<button class="ql-bold"></button>'+
        '<button class="ql-italic"></button>'+
        '<button class="ql-underline"></button>'+
        '<button class="ql-strike"></button>'+
        '</span>'+
        '<span class="ql-formats">'+
        '<select class="ql-color"></select>'+
        '<select class="ql-background"></select>'+
        '</span>'+
        '<span class="ql-formats">'+
            '<button class="ql-list" value="ordered"></button>'+
            '<button class="ql-list" value="bullet"></button>'+
            '<select class="ql-align">'+
                '<option selected=""></option>'+
                '<option value="center"></option>'+
                '<option value="right"></option>'+
                '<option value="justify"></option>'+
            '</select>'+
        '</span>'+
        '<span class="ql-formats">'+
        '<button class="ql-link"></button>'+
        '</span>'+
    '</div>';


_fieldTypes.quill = {
    create: function ( conf ) {
        var safeId = DataTable.Editor.safeId( conf.id );
        var input = $(
            '<div id="'+safeId+'" class="quill-wrapper">'+
                (conf.toolbarHtml || defaultToolbar)+
                '<div class="editor"></div>'+
            '</div>'
        );

        conf._quill = new Quill( input.find('.editor')[0], $.extend( true, {
            theme: 'snow',
            modules: {
                toolbar: {
                    container: $('div.toolbar', input)[0]
                }
            }
        }, conf.opts ) );

        return input;
    },
 
    get: function ( conf ) {
        return conf._quill.getText();
    },
 
    set: function ( conf, val ) {
        conf._quill.setText( val !== null ? val : '' );
    },
 
    enable: function ( conf ) {}, // not supported by Quill
 
    disable: function ( conf ) {}, // not supported by Quill
 
    // Get the Quill instance
    quill: function ( conf ) {
        return conf._quill;
    }
};


}));

Allan

kthorngren

That works, thanks!

Kevin

rf1234

Kevin, do you think Quill is any better than CKEditor and TinyMCE? What would you recommend knowing all three of them?

kthorngren

Hey @rf1234,

I've only been messing around with these editors for a day or so. I want more a plain text editor which Quill seems to be a better fit. Out of the box Quill allows for pure text (no html tags) which I use for some of the tables. However that does mean I need to manually type in the tags if desired. Which for me is not so bad because I can easily add classes to them. For plain text all lines are displayed on one line when the field is being edited, ie, \n does not force a new line in html.

CKEditor seemed to work fine except for one issue. When creating hyperlinks my page would crash. Didn't take the time to troubleshoot. And I never did figure out to customize the toolbar. I found crush123's post but still no luck.

TinyMCE I only loaded to see what it looks like and that it works. Didn't spend any time with it.

Kevin

rf1234

Thanks for the update. Will keep Quill, I guess.

allan

The thing I like most about Quill is that it doesn't use an iframe. The iframe aspect makes the integration really difficult for the other editors. The reason they do that is to make sure that there is no bleed in styles from the host document to the editable content (I haven't actually dug into how Quill handles that).

Allan