quill editor wrapper

gistfile1.js

(function (Quill) {

    var Element = function (tagName, attributes) {
        var element = document.createElement(tagName);
        if (attributes) {
            for (var key in attributes) {
                if (attributes.hasOwnProperty(key)) {
                    element.setAttribute(key, attributes[key]);
                }
            }
        }
        return element;
    };

    var Select = function (name, options, attributes) {
        var select = new Element('select', attributes);
        options.forEach(function (option) {
            var opt = new Element('option', option);
            if (option.title) {
                opt.innerText = option.title;
            }
            select.appendChild(opt);
        });
        return select;
    };

    var ToolbarButton = function (name) {
        var button = new Element('button', {title: name, 'class': 'ql-format-button ql-' + name, type: 'button'});
        button.innerText = name;
        return button;
    };

    var Align = function (name) {
        return new Select('button', [
            {value: 'left', title: 'left', selected: 'selected'},
            {value: 'center', title: 'center'},
            {value: 'right', title: 'right'},
            {value: 'justify', title: 'justify'}
        ], {title: name, 'class': 'ql-' + name});
    };

    var toolHandler = {
        bold: ToolbarButton,
        italic: ToolbarButton,
        underline: ToolbarButton,
        bullet: ToolbarButton,
        list: ToolbarButton,
        link: ToolbarButton,
        align: Align
    };

    var ToolbarGroup = function (tools) {
        var group = new Element('div', {'class': 'ql-format-group'});
        tools.forEach(function (name) {
            if (toolHandler[name]) {
                group.appendChild(new toolHandler[name](name));
            }
        });
        return group;
    };

    var Toolbar = function () {
        var toolbar = new Element('div', {id: 'toolbar_' + new Date().getTime()});
        [].forEach.call(arguments, function (tools) {
            toolbar.appendChild(new ToolbarGroup(tools));
        });
        return toolbar;
    };

    var Hidden = function (container) {
        return new Element('input', {name: container.id, type: 'hidden'});
    };

    var getForm = function (child) {
        var parent = child.parentNode;
        if (parent != null) {
            while (parent != null) {
                if (parent.nodeName && parent.nodeName.toLowerCase() === 'form') {
                    return parent;
                }
                parent = parent.parentNode;
            }
        }
    };

    var handleSubmit = function (quill, form, container) {
        var field = form[container.id];
        if (!field) {
            form.appendChild(field = new Hidden(container));
        }
        field.value = quill.getHTML();
        return true;
    };

    var addSubmitHandler = function (quill, container) {
        var form = getForm(container);
        if (form) {
            form.addEventListener('submit', function () {
                return handleSubmit(quill, form, container);
            }, false);
        }
    };

    var init = function (container) {
        var toolbar = new Toolbar(['bold', 'italic', 'underline'], ['bullet', 'list'], ['align'], ['link']);
        container.parentNode.insertBefore(toolbar, container);
        var quill = new Quill('#' + container.id, {
            modules: {
                'toolbar': {container: '#' + toolbar.id},
                'link-tooltip': true
            }
        });
        addSubmitHandler(quill, container);
    };

    init(document.getElementById('Content'));

})(Quill);