Как опубликовать содержимое редактора Quill в форме?

Вы можете проверить соответствующее обсуждение https://github.com/quilljs/quill/issues/87 < / а>

var myEditor = document.querySelector('#editor')
var html = myEditor.children[0].innerHTML

<form method="post" id="identifier">

<div id="quillArea"></div>

<textarea name="text" style="display:none" id="hiddenArea"></textarea>
<input type="submit" value="Save" />

</form>

Если вы дадите форме идентификатор, то с помощью jQuery вы сможете сделать следующее:

var quill = new Quill ({...}) //definition of the quill

$("#identifier").on("submit",function(){
$("#hiddenArea").val($("#quillArea").html());
})

Вместо HTML вы можете использовать quill.getContents () для получения дельты.

Вот код, который я использовал для этого:

$(document).ready(function(){
  $("#theform").on("submit", function () {
    var hvalue = $('.ql-editor').html();
    $(this).append("<textarea name='content' style='display:none'>"+hvalue+"</textarea>");
   });
});

По сути, он добавляет скрытое текстовое поле в вашу форму и копирует в него содержимое контейнера «ql-editor» (это автоматически выполняется редактором Quill Editor в контейнере div). Текстовое поле будет отправлено вместе с формой. Вам необходимо изменить идентификаторы, используемые в коде, на идентификаторы тегов вашего контейнера.

Решение, которое я придумал, заключалось в создании класса-оболочки.

class QuillWrapper {

    /**
     * @param targetDivId { string } The id of the div the editor will be in.
     * @param targetInputId { string } The id of the hidden input
     * @param quillOptions { any } The options for quill
     */
    constructor(targetDivId, targetInputId, quillOptions) {

        //Validate target div existence
        this.targetDiv = document.getElementById(targetDivId);
        if (!this.targetDiv) throw "Target div id was invalid";

        //Validate target input existence
        this.targetInput = document.getElementById(targetInputId);
        if (!this.targetInput) throw "Target input id was invalid";

        //Init Quill
        this.quill = new Quill("#" + targetDivId, quillOptions);

        //Bind the two containers together by listening to the on-change event
        this.quill.on('text-change',
            () => {
                this.targetInput.value = this.targetDiv.children[0].innerHTML;
            });
    }
}

Просто включите класс где-нибудь на своей странице, а затем используйте следующее для его инициализации:

    let scopeEditor = new QuillWrapper("ScopeEditor", "Scope", { theme: "snow" });

Ваш html будет выглядеть примерно так:

<div class="form-group">
     <label asp-for="Scope" class="control-label col-md-2"></label>  
     <div id="ScopeEditor"></div>
     <input type="hidden" asp-for="Scope" class="form-control" />
</div>

Я делаю это:

var quill = new Quill('.quill-textarea', {
            placeholder: 'Enter Detail',
            theme: 'snow',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    [{ 'indent': '-1'}, { 'indent': '+1' }]
                ]
            }
        });

        quill.on('text-change', function(delta, oldDelta, source) {
            console.log(quill.container.firstChild.innerHTML)
            $('#detail').val(quill.container.firstChild.innerHTML);
        });

Где-то в форме:

<div class="quill-textarea"></div>
<textarea style="display: none" id="detail" name="detail"></textarea>

Я знаю, что эта проблема уже решена, но я хотел бы добавить немного дополнительной информации. Чтобы получить данные, представленные в Quill, вам не нужен jQuery или другие уловки. Рекомендую посмотреть на этот ответ:

https://stackoverflow.com/a/42541886/2910546

Здесь также стоит отметить: вопрос автора задавали как минимум 2 года назад. Итак, сегодня, я считаю, что это наиболее эффективный способ ответить на вопрос.

Для получения дополнительной информации о Quill, с примерами тематических исследований и распространенными вопросами с ответами, пожалуйста, перейдите по следующей ссылке:

https://github.com/loagit/Quill-Examples-and-FAQ

Решено здесь

Как сохранить значения Quill.js в базе данных Laravel 5.6

Добавьте скрытый ввод:

<input type="hidden" name="body"/>

Js-код:

var form = document.getElementById("FormId"); // get form by ID

form.onsubmit = function() { // onsubmit do this first
                             var name = document.querySelector('input[name=body]'); // set name input var
                             name.value = JSON.stringify(quill.getContents()); // populate name input with quill data
                             return true; // submit form
                           }
To set contents to quill do this :

quill.setContents({!! $post->body !!});

это то, что я использую, все, что вам нужно сделать, это указать атрибут data-name для тега редактора. это создаст скрытый ввод как родственный элемент тегу вашего редактора и поместит внутрь HTML-содержимое. вы можете получить другие форматы вашего содержимого, я оставил неиспользуемые переменные, если вам нужно знать, как их получить.

html:

<div class="field editor" data-name="experience"></div>

js:

let quill_element = document.querySelector('.editor')
let quill = new Quill(quill_element, {
    modules: {
        toolbar: '#toolbar'
    },
    placeholder: document.querySelector('.editor').getAttribute('data-placeholder'),
    theme: 'bubble',
});

let hiddenInput = document.createElement('input');
hiddenInput.type = 'hidden';
hiddenInput.name = quill_element.getAttribute('data-name');
quill_element.parentElement.appendChild(hiddenInput);

quill.on('text-change', function () {
    let justHtml = quill.root.innerHTML;
    hiddenInput.value = justHtml;
    // other formats if you like to use..
    var delta = editor.getContents();
    var text = editor.getText();
});

Попробуй это:

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor', {
        modules: {
            toolbar: [
                ['bold', 'italic'],
                ['link', 'blockquote', 'code-block', 'image'],
                [{
                    list: 'ordered'
                }, {
                    list: 'bullet'
                }]
            ]
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
    });

    $("#form").submit(function() {
        $("#description").val(quill.getContents());
    });
</script>

Это сработало для меня:

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
    var quill = new Quill('#editor', {
        modules: {
            toolbar: [
                ['bold', 'italic'],
                ['link', 'blockquote', 'code-block', 'image'],
                [{
                    list: 'ordered'
                }, {
                    list: 'bullet'
                }]
            ]
        },
        placeholder: 'Compose an epic...',
        theme: 'snow'
    });

    $("#form").submit(function() {
        $("#description").val(quill.getContents());
    });
</script>

это решение отлично работает для меня:

    <script type="text/javascript">
    $(document).ready(function(){
      $("#emailForm").on("submit", function () {
        var hvalue = $('.editor').text();
        $(this).append("<textarea name='message' style='display:none'>"+hvalue+"</textarea>");
       });
    });
    </script>