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

Question

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

Рейтинг: 0Ответов: 1Опубликовано: 25.01.2023

шаблон

<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', то все окей

изменил

class AddQuestion(SuccessMessageMixin,CreateView):
model = Questions
template_name = 'blog/add_question.html'
form_class = QuestionForm
success_msg = 'Вопрос упешно добавлен'
success_url = reverse_lazy('home')
context_object_name = 'form'

def get_success_url(self):
    return reverse('question', args=(self.object.id,))

def post(self,request, *args, **kwargs):
    form = QuestionForm(request.POST)
    if form.is_valid():
        print(form.is_valid())
        if request.method == 'POST':

            self.object = form.save(commit=False)
            self.object.author = self.request.user
            self.object.save()
        return super().form_valid(form)

шаблон

    <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> <div id="editor"><p>{{ form.q_text }}</p></div>
            <label>{{form.difficult.label}}:</label> <p>{{ form.difficult }}</p>
        <div class="form-error">{{ form.q_text.errors }}</div>

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

</form>

<script>
    document.getElementById("submit-button").addEventListener("submit", function(){
        var editorData = CKEDITOR.instances.editor.getData();
        document.getElementById("hidden-input").value = editorData;
    });
</script>
<!--    далее скрипт ckeditor-->

django

Источник: Stack Overflow на русском

Answer 1

▲ 0

Можно добавить следующий код 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.

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

Ответы