fix: sync CKEditor content with textarea for form validation (#251)

django_ckeditor_5/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "webpack --mode development",
-    "prod": "webpack --mode production",
+    "prod": "webpack --mode production"
   },
   "author": "",
   "license": "BSD-3-Clause",
@@ -47,7 +47,8 @@
     "@ckeditor/ckeditor5-theme-lark": "^43.2.0",
     "@ckeditor/ckeditor5-ui": "^43.2.0",
     "@ckeditor/ckeditor5-upload": "^43.2.0",
-    "@ckeditor/ckeditor5-word-count": "^43.2.0"
+    "@ckeditor/ckeditor5-word-count": "^43.2.0",
+    "@pikulinpw/ckeditor5-fullscreen": "^1.0.1"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-core": "^43.2.0",

django_ckeditor_5/static/django_ckeditor_5/app.js

@@ -99,6 +99,10 @@ function createEditors(element = document.body) {
             editorEl,
             config
         ).then(editor => {
+            const textarea = document.querySelector(`#${editorEl.id}`);
+            editor.model.document.on('change:data', () => {
+                textarea.value = editor.getData();
+            });
             if (editor.plugins.has('WordCount')) {
                 const wordCountPlugin = editor.plugins.get('WordCount');
                 const wordCountWrapper = element.querySelector(`#${script_id}-word-count`);
@@ -156,7 +160,7 @@ document.addEventListener("DOMContentLoaded", () => {
     createEditors();
 
     if (typeof django === "object" && django.jQuery) {
-        django.jQuery(document).on("formset:added", () => {createEditors()});
+        django.jQuery(document).on("formset:added", () => {createEditors();});
     }
 
     const observer = new MutationObserver((mutations) => {

example/blog/articles/forms.py

@@ -17,7 +17,11 @@ class Meta:
         fields = ("author", "text")
         widgets = {
             "text": CKEditor5Widget(
-                attrs={"class": "django_ckeditor_5"},
+                attrs={
+                    "class": "django_ckeditor_5",
+                    "name": "message",
+                    "required": True,
+                },
                 config_name="comment",
             ),
         }

example/blog/articles/templates/articles/article_detail.html

@@ -21,9 +21,11 @@ <h1>{{ object.title }}</h1>
             {% endfor %}
         </div>
     </div>
-    <form method="POST">
-        {% csrf_token %}
-        {{ form.text }}
-        <button type="submit">Submit comment</button>
-    </form>
+   <form method="POST">
+    {% csrf_token %}
+    <label for="{{ form.author.id_for_label }}">Author</label>
+    {{ form.author }}
+    {{ form.text }}
+    <button type="submit">Submit comment</button>
+</form>
 {% endblock %}