FieldType-Quill-1.6.2 not working

rf1234

Hi Allan,

I downloaded datatables and editor this morning using the download builder https://datatables.net/download/index

I use quill as well. The statement below works with with FieldType-Quill-1.5.6 and Quill 0.20.1. It does not work with FieldType-Quill-1.6.2 and Quill 0.20.1. The new version of FieldType-Quill breaks the toolbar and Quill does not recognize HTML any longer. How can I fix this? How can I fix it and also use the newer versions of Quill (1.x +)? I tried with them as well and it looked even worse.

Please see the attached screen shots as well.

Roland

var contractCredMessageEditor = new $.fn.dataTable.Editor( {
        ajax: {
            url: 'actions.php?action=tblContractCred'
        },        
        table: "#tblContractCred",
        fields: [ {
                name:  "contract.communication",
                type:  "quill",
                opts: {
                    placeholder: 'Please enter your message',
                    theme: 'snow'
                }
            }
        ]        
    } );

rf1234

got it working now with a modified plugin and the latest version of quill
This is the updated version of FieldType-Quill-1.6.2 (please note it does NOT work with older quill versions prior to 1.0. Hence it does not work with the quill version of the download builder!):

/**
 * [Quill](http://quilljs.com/) is a lightweight WYSIWYG editing library that
 * will provides an attractive input where end users and easily edit complex
 * information in a style familiar to all word processor users.
 *
 * Quill is different from the majority of other WYSIWYG libraries in that it
 * does not use iframes. This makes it more approachable for extension
 * developers and easier to style.
 *
 * It also has support for multiple modules such as toolbars, authorship
 * highlighting and multiple cursors. The toolbar module is used by default by
 * this Editor plug-in (see options below). Please see the [Quill
 * documentation](http://quilljs.com/docs/modules/) for more information.
 *
 * @name Quill
 * @summary Quill WYSIWYG editor
 * @requires [Quill](http://quilljs.com)
 * 
 * @depcss //cdn.quilljs.com/latest/quill.snow.css
 * @depjs //cdn.quilljs.com/latest/quill.min.js
 *
 * @scss editor.quill.scss
 *
 * @opt `e-type string`, `e-type node`, `e-type boolean` **`toolbar`**: Show
 *   toolbar (`true` - default) or not (`false`). A custom toolbar can be
 *   defined, per the Quill documentation, by passing the string or node for
 *   the toolbar's HTML to this parameter.
 * @opt `e-type object` **`opts`**: Options passed directly to the Quill
 *   configuration object. Please refer to the [Quill
 *   documentation](http://quilljs.com/docs/configuration/) for the full range
 *   of options.
 *
 * @method **`quill`**: Get the Quill instance used for this field, so you can
 *   add additional modules, or perform other API operations on it directly.
 *
 * @example
 *
 * new $.fn.dataTable.Editor( {
 *   "ajax": "/api/documents",
 *   "table": "#documents",
 *   "fields": [ {
 *       "label": "Description:",
 *       "name": "description",
 *       "type": "quill"
 *     }, 
 *     // additional fields...
 *   ]
 * } );
 */


(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.root.innerHTML;
    },

    set: function ( conf, val ) {
        conf._quill.root.innerHTML = 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;
    }
};


}));

And these are the links required to use the latest quill version with the modified plugin:

<script src="//cdn.quilljs.com/1.2.4/quill.min.js"></script>

<link href="//cdn.quilljs.com/1.2.4/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.2.4/quill.bubble.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.2.4/quill.core.css" rel="stylesheet">

if you would like to use your own toolbar you need to pass "toolbarHtml" (in previous versions of the plugin it was just "toolbar").

allan

Sorry I didn't manage to get back to you about this yesterday. Darn! I forgot to update the Quill version in the download builder.

I have do so now - its using 1.2.4.

Allan