QuillJS no funciona con textarea

Solución:

Puede usar Quill con un div y sincronizar el contenido del editor (Delta) con un campo de entrada oculto en el formulario.

Hay un ejemplo de envío de formulario de pluma.

El siguiente ejemplo funciona con jQuery, pero se puede cambiar fácilmente para que se ejecute en javascript simple.

Paso 1:

Agregue una clase a su área de texto, por ejemplo quill-editor:

<textarea name="input" placeholder="Textarea" class="form-control quill-editor">
    <p>Hello World!</p>
    <p>Some initial <strong>bold</strong> text</p>
    <p><br></p>
</textarea>

Paso 2:

Agregue este código javascript después del campo textarea:

$('.quill-editor').each(function(i, el) {
    var el = $(this), id = 'quilleditor-' + i, val = el.val(), editor_height = 200;
    var div = $('<div/>').attr('id', id).css('height', editor_height + 'px').html(val);
    el.addClass('d-none');
    el.parent().append(div);

    var quill = new Quill('#' + id, {
        modules: { toolbar: true },
        theme: 'snow'
    });
    quill.on('text-change', function() {
        el.html(quill.getContents());
    });
});

Le permitirá agregar tantos editores como desee y actualizará su área de texto correspondiente. No se requiere ningún otro código.

Cómo funciona:

$('.quill-editor').each(function(i, el) {
//...
});

por cada clase de editor de plumas que encuentre,

var el = $(this), id = 'quilleditor-' + i, val = el.val(), editor_height = 200;
var div = $('<div/>').attr('id', id).css('height', editor_height + 'px').html(val);
el.hide();
el.parent().append(div);

creará un div después del campo textarea con una identificación única y una altura fija, que será utilizada por la instancia del editor de plumas. el área de texto original se ocultará.

var quill = new Quill('#' + id, {
    modules: { toolbar: true },
    theme: 'snow'
});

se inicia una nueva instancia de Quill,

quill.on('text-change', function() {
    el.html(quill.getContents());
});

cuando se cambie su contenido, el campo textarea se actualizará.

---

---

Utiliza Nuestro Buscador