Upgrade CKEditoru na verzi 5

mamweb/admin.py

@@ -13,11 +13,11 @@ from django.contrib.flatpages.admin import FlatPageAdmin as FlatPageAdminOld
 from django.contrib.flatpages.admin import FlatpageForm as FlatpageFormOld
  
 from django import forms
-from ckeditor_uploader.widgets import CKEditorUploadingWidget
+from django_ckeditor_5.widgets import CKEditor5Widget
 
 
 class FlatpageForm(FlatpageFormOld):
-	content = forms.CharField(widget=CKEditorUploadingWidget())
+	content = forms.CharField(widget=CKEditor5Widget())
 	class Meta:
 		model = FlatPage # this is not automatically inherited from FlatpageFormOld
 		exclude = []

mamweb/settings_common.py

@@ -110,8 +110,7 @@ INSTALLED_APPS = (
 	'reversion',
 	'django_countries',
 	'solo',
-	'ckeditor',
-	'ckeditor_uploader',
+	'django_ckeditor_5',
 	'taggit',
 	'dal',
 	'dal_select2',
@@ -186,26 +185,98 @@ SUMMERNOTE_CONFIG = {
 	 ]
 }
 
-CKEDITOR_UPLOAD_PATH = "uploads/"
-CKEDITOR_IMAGE_BACKEND = 'pillow'
-#CKEDITOR_JQUERY_URL = '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'
-CKEDITOR_CONFIGS = {
+CKEDITOR_5_CUSTOM_CSS = "css/ckeditor5_fix.css"
+# customColorPalette = [
+# 	{
+# 		'color': 'hsl(4, 90%, 58%)',
+# 		'label': 'Red',
+# 	},
+# 	{
+# 		'color': 'hsl(340, 82%, 52%)',
+# 		'label': 'Pink',
+# 	},
+# 	{
+# 		'color': 'hsl(291, 64%, 42%)',
+# 		'label': 'Purple',
+# 	},
+# 	{
+# 		'color': 'hsl(262, 52%, 47%)',
+# 		'label': 'Deep Purple',
+# 	},
+# 	{
+# 		'color': 'hsl(231, 48%, 48%)',
+# 		'label': 'Indigo',
+# 	},
+# 	{
+# 		'color': 'hsl(207, 90%, 54%)',
+# 		'label': 'Blue',
+# 	},
+# ]
+CKEDITOR_5_FILE_STORAGE = "various.storage.UploadStorage"
+CKEDITOR_5_CONFIGS = {
 	'default': {
-		'entities': False,
-		'toolbar': [
-			['Source', 'ShowBlocks', '-', 'Maximize'],
-			['Bold', 'Italic', 'Subscript', 'Superscript', '-', 'RemoveFormat'],
-			['NumberedList','BulletedList','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
-			['Link', 'Unlink', 'Anchor', '-', 'Image', 'Table', 'HorizontalRule'],
-			['Format'],
-
+		'language': 'cs',
+		'blockToolbar': [
+			'paragraph', 'heading1', 'heading2', 'heading3',
+			'|',
+			'bulletedList', 'numberedList',
+			'|',
+			'blockQuote',
 		],
-#        'toolbar': 'full',
-		'height': '40em',
-		'width': '100%',
-		'toolbarStartupExpanded': False,
-		'allowedContent' : True,
+		'toolbar': ['sourceEditing', '|', 'heading', '|',
+					# 'outdent', 'indent', '|',
+					'bold', 'italic', 'link', 'underline', 'strikethrough',
+					'code',
+					# 'subscript', 'superscript',
+					# 'highlight',
+					'|', 'codeBlock', 'insertImage',
+					'bulletedList', 'numberedList', 'todoList', '|',
+					# 'blockQuote', '|',
+					# 'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor',
+					# 'mediaEmbed',
+					'removeFormat',
+					# 'insertTable',
+					],
+		'image': {
+			'toolbar': ['imageTextAlternative', '|', 'imageStyle:alignLeft',
+						'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side',  '|'],
+			'styles': [
+				'full',
+				'side',
+				'alignLeft',
+				'alignRight',
+				'alignCenter',
+			]
+
+		},
+		# 'table': {
+		# 	'contentToolbar': [ 'tableColumn', 'tableRow', 'mergeTableCells',
+		# 						'tableProperties', 'tableCellProperties' ],
+		# 	'tableProperties': {
+		# 		'borderColors': customColorPalette,
+		# 		'backgroundColors': customColorPalette,
+		# 	},
+		# 	'tableCellProperties': {
+		# 		'borderColors': customColorPalette,
+		# 		'backgroundColors': customColorPalette,
+		# 	}
+		# },
+		'heading' : {
+			'options': [
+				{ 'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph' },
+				{ 'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1' },
+				{ 'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2' },
+				{ 'model': 'heading3', 'view': 'h3', 'title': 'Heading 3', 'class': 'ck-heading_heading3' },
+			]
+		},
 	},
+	'list': {
+		'properties': {
+			'styles': 'true',
+			'startIndex': 'true',
+			'reversed': 'true',
+		},
+	}
 }
 
 # Webpack loader

mamweb/static/css/ckeditor5_fix.css

@@ -0,0 +1,3 @@
+.ck.ck-editor {
+	color: black !important;
+}

mamweb/urls.py

@@ -15,7 +15,7 @@ urlpatterns = [
 
 	# Admin a nastroje
 	path('admin/', admin.site.urls),  # NOQA
-	path('ckeditor/', include('ckeditor_uploader.urls')),
+	path("ckeditor5/", include('django_ckeditor_5.urls')),
 
 	# Tvorba = ročníky, čísla, problémy atd. (ma vlastni podadresare)
 	path('', include('tvorba.urls')),

novinky/admin.py

@@ -1,7 +1,7 @@
 import django.forms
 from django.contrib import admin
 
-from ckeditor_uploader.widgets import CKEditorUploadingWidget
+from django_ckeditor_5.widgets import CKEditor5Widget
 
 from .models import Novinky
 
@@ -10,7 +10,7 @@ class NovinkyAdminForm(django.forms.ModelForm):
 	class Meta:
 		model = Novinky
 		widgets = {
-			'text': CKEditorUploadingWidget,
+			'text': CKEditor5Widget,
 		}
 		fields = '__all__'
 

requirements.txt

@@ -14,7 +14,7 @@ Django<5.0
 django-reversion # Version control na datech v databázi
 django-countries # Políčko ve formu / field v modelu ohledně států
 django-solo # Singleton model (speciálně Nastavení)
-django-ckeditor # Editor htmlka (hlavně v adminu u flatpages)
+django-ckeditor-5 # Editor htmlka (hlavně v adminu u flatpages)
 django-cleanup  # Uklízí media/ od smazaných „databázových“ souborů
 django-taggit # Taggy v djangu (speciálně zaměření problémů)
 django-autocomplete-light>=3.9.0 # Automatické doplňování (problémů, účastníků, …) ve formulářích

soustredeni/admin.py

@@ -3,7 +3,7 @@ from django.contrib import admin
 from django.forms import widgets
 from django.db import models
 
-from ckeditor_uploader.widgets import CKEditorUploadingWidget
+from django_ckeditor_5.widgets import CKEditor5Widget
 
 import soustredeni.models as m
 
@@ -42,7 +42,7 @@ class SoustredeniAdminForm(django.forms.ModelForm):
 	class Meta:
 		model = m.Soustredeni
 		widgets = {
-			'text': CKEditorUploadingWidget,
+			'text': CKEditor5Widget,
 		}
 		fields = '__all__'
 

various/storage.py

@@ -0,0 +1,11 @@
+import os
+from urllib.parse import urljoin
+
+from django.conf import settings
+from django.core.files.storage import FileSystemStorage
+
+class UploadStorage(FileSystemStorage):
+	"""Storage pro CKEditor"""
+
+	location = os.path.join(settings.MEDIA_ROOT, "uploads")
+	base_url = urljoin(settings.MEDIA_URL, "uploads/")