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

hvlads · Oct 12, 2024 · 5373f6b · 5373f6b
1 parent 25e4c37
commit 5373f6b
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 10 deletions.
diff --git a/django_ckeditor_5/package-lock.json b/django_ckeditor_5/package-lock.json
diff --git a/django_ckeditor_5/package.json b/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",

diff --git a/django_ckeditor_5/static/django_ckeditor_5/app.js b/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) => {

diff --git a/example/blog/articles/forms.py b/example/blog/articles/forms.py
@@ -17,7 +17,7 @@ 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",
             ),
         }

diff --git a/example/blog/articles/templates/articles/article_detail.html b/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 %}