

<div class="form-group">
     {% if field.uiSettings.labelTemplate %}
            {% include resolvePath( field.uiSettings.labelTemplate) %}
        {% else %}
    <label for="{{key}}">{{ field.name | tr }}
        {% if field.uiSettings.descriptionText %}
            <small id="{{key}}-help" class="{{ field.uiSettings.descriptionTextClasses if field.uiSettings.descriptionTextClasses }} description-label">{{ field.uiSettings.descriptionText | tr }}</small>
        {% endif %}
    </label>
    {% endif %}
    <div id="rich-text-{{key}}">{{data[key] | safe}}</div>
    <input type="hidden" name="{{key}}" value="{{data[key]}}" />
</div>


{% if field.readOnly %}
{% else %}
<script>
if (!window.quills) {
    window.quills = [];
}
window.quills.push(function() {
    var quill{{key}} = new Quill('#rich-text-{{key}}', 
    {% if field.optionalParameters %}
        {{ field.optionalParameters | json | safe }}
    {% else %}
    {
        theme: 'snow'
    }
    {% endif %}
    );
    quill{{key}}.on('text-change', function(delta, oldDelta, source) {
        var input = document.querySelector('input[name={{key}}]');
        input.value = quill{{key}}.container.firstChild.innerHTML;
    });
});
</script>
{% endif %}