Почему CKEeditor не дает возможность отправить форму?

шаблон

<form action="" method="post" enctype="multipart/form-data" >
            <label>{{form.q_name.label}}:</label> <p>{{ form.q_name }}</p>
            <label>{{form.tags.label}}:</label> <p>{{ form.tags }}</p>
            <label>{{form.q_text.label}}:</label> <p id="editor">{{ form.q_text }}</p>
            <label>{{form.difficult.label}}:</label> <p>{{ form.difficult }}</p>

    {% csrf_token %}
    {% if update_button %}
    <p><input type="submit" value="Обновить вопрос"></p>
    {% else%}
    <p><input type="submit" value="Задать вопрос"></p>
    {% endif%}

<script>
        ClassicEditor
                .create( document.querySelector( '#editor' ) )
                .then( editor => {
                        console.log( editor );
                } )
                .catch( error => {
                        console.error( error );
                } );
                </script>
</form>

нажимаю на кнопку "Задать вопрос" и ничего не происходит, но если убрать id='editor', то все окей

Можно добавить следующий код JavaScript для добавления данных из CKEditor в скрытое поле формы. В нём "submit-button" - это id кнопки отправки формы, "editor" - это id CKEditor, а "hidden-input" - это id скрытого поля, куда будут добавлены данные из CKEditor. код добавьте после CKEditor, чтобы он мог получить доступ к данным.

<script>
    document.getElementById("submit-button").addEventListener("click", function(){
        var editorData = CKEDITOR.instances.editor.getData();
        document.getElementById("hidden-input").value = editorData;
    });
</script>

Еще можно использовать "submit" вместо "click" для отправки формы.

<script>
    document.getElementById("submit-button").addEventListener("submit", function(){
        var editorData = CKEDITOR.instances.editor.getData();
        document.getElementById("hidden-input").value = editorData;
    });
</script>

Или использовать updateElement, чтобы сохранить данные в форму

<script>
    CKEDITOR.instances.editor.updateElement();
</script>

Более детально.

Добавьте скрытое поле в форму, используя тег <input type="hidden">

<form>
    <input type="hidden" id="hidden-input" name="hidden-input">
</form>

Используй JavaScript для извлечения данных из CKEditor и добавления их в скрытое поле

<script>
    document.getElementById("submit-button").addEventListener("submit", function(){
        var editorData = CKEDITOR.instances.editor.getData();
        document.getElementById("hidden-input").value = editorData;
    });
</script>

Добавьте кнопку отправки формы, используя тег 

<form>
    <input type="submit" id="submit-button" value="Отправить">
</form>

Важно, чтобы вы добавили токен CSRF в форму и настроили его в вашем проекте Django.

Вернуться на верх