From 5373f6b4e7bcc8ccb006a7c21794634899ae2635 Mon Sep 17 00:00:00 2001 From: hvlads Date: Sat, 12 Oct 2024 17:45:13 +0300 Subject: [PATCH 1/2] fix: sync CKEditor content with textarea for form validation (#251) --- django_ckeditor_5/package-lock.json | 17 ++++++++++++++++- django_ckeditor_5/package.json | 5 +++-- .../static/django_ckeditor_5/app.js | 6 +++++- example/blog/articles/forms.py | 2 +- .../templates/articles/article_detail.html | 12 +++++++----- 5 files changed, 32 insertions(+), 10 deletions(-) diff --git a/django_ckeditor_5/package-lock.json b/django_ckeditor_5/package-lock.json index 6a973bd..dc5cd93 100644 --- a/django_ckeditor_5/package-lock.json +++ b/django_ckeditor_5/package-lock.json @@ -45,7 +45,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", @@ -8178,6 +8179,20 @@ "node": ">=10" } }, + "node_modules/@pikulinpw/ckeditor5-fullscreen": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@pikulinpw/ckeditor5-fullscreen/-/ckeditor5-fullscreen-1.0.1.tgz", + "integrity": "sha512-11ojcOQOJWOYaI1+CpM78JYduQsOedZkZLGVX/HFsDRuMLFSfQmhPYrwG+8R2YuinhS3RxnDK5Z9SjrqkQV8KQ==", + "license": "MIT", + "dependencies": { + "@ckeditor/ckeditor5-core": ">=27.1.0", + "@ckeditor/ckeditor5-ui": ">=27.1.0" + }, + "peerDependencies": { + "@ckeditor/ckeditor5-core": ">=27.1.0", + "@ckeditor/ckeditor5-ui": ">=27.1.0" + } + }, "node_modules/@trysound/sax": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", diff --git a/django_ckeditor_5/package.json b/django_ckeditor_5/package.json index 84b87f1..b026f91 100644 --- 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 index 37fba91..e9b5197 100644 --- 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 index 2522493..1c8b9ce 100644 --- 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 index 57ac238..d8b7d1d 100644 --- a/example/blog/articles/templates/articles/article_detail.html +++ b/example/blog/articles/templates/articles/article_detail.html @@ -21,9 +21,11 @@

{{ object.title }}

{% endfor %} -
- {% csrf_token %} - {{ form.text }} - -
+
+ {% csrf_token %} + + {{ form.author }} + {{ form.text }} + +
{% endblock %} \ No newline at end of file From 41c8a65cc8760efdaf088240d5a85b2a9530c3bf Mon Sep 17 00:00:00 2001 From: hvlads Date: Sat, 12 Oct 2024 17:47:32 +0300 Subject: [PATCH 2/2] fix code style --- example/blog/articles/forms.py | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/example/blog/articles/forms.py b/example/blog/articles/forms.py index 1c8b9ce..6c9a457 100644 --- a/example/blog/articles/forms.py +++ b/example/blog/articles/forms.py @@ -17,7 +17,11 @@ class Meta: fields = ("author", "text") widgets = { "text": CKEditor5Widget( - attrs={"class": "django_ckeditor_5", "name": "message", "required": True}, + attrs={ + "class": "django_ckeditor_5", + "name": "message", + "required": True, + }, config_name="comment", ), }