From 509b388b7956db427448eb5be53319e10ee2f74e Mon Sep 17 00:00:00 2001 From: Mara Karagianni Date: Thu, 29 Feb 2024 13:08:23 +0200 Subject: [PATCH] docs, changelog: ckeditor --- changelog/7632.md | 24 +++++++++++++++++++++++ docs/ckeditor.md | 49 ++++++++++++++++++++++++----------------------- 2 files changed, 49 insertions(+), 24 deletions(-) create mode 100644 changelog/7632.md diff --git a/changelog/7632.md b/changelog/7632.md new file mode 100644 index 000000000..01d69a994 --- /dev/null +++ b/changelog/7632.md @@ -0,0 +1,24 @@ +### Added + +- custom migration to make iframes work with ckeditor5 +- added dependency beautifulsoup4 +- add helptext to paragraph form in documents/text review +- add helptext for maptopicprio ckeditor5 field +- add helptext for topicprio ckeditor5 field +- add helptext for offlinevent ckeditor5 field + + +### Changed + +- replace django-ckeditor with django-ckeditor5 +- disable browser-side form checks for forms which use ckeditor by adding + `novalidate` to them This is necessary as ckeditor form fields which are + required will block form submission otherwise. +- update and move helptext for plans ckeditor5 field from model to form +- update and move helptext for newsletter ckeditor5 field from model to form +- update and move helptext for plattform email ckeditor5 field from model to + form +- update a4 to ckeditor5-transition-a4 +- add image validator which validates that all img tags have the alt attribute + set to all ckedito5 fields + diff --git a/docs/ckeditor.md b/docs/ckeditor.md index 68cd3fb57..579e93702 100644 --- a/docs/ckeditor.md +++ b/docs/ckeditor.md @@ -1,30 +1,31 @@ -# CKEditor +# General -We use the ckeditor in the dashboard for information and result inputs and also user side for idea adding. This allows users to add formatted text, editable images, accordions and videos. To achieve this we have 4 configured editors for different use cases, default (ideas), image-editor, collapsible-image-editor(information, results), video-editor(live stream). +for general info see [ckeditor](https://github.com/liqd/adhocracy4/blob/main/docs/ckeditor.md) in +adhocracy4. -## Editor -- We use [django-ckeditor](https://pypi.org/project/django-ckeditor/) which utilises [ckeditor 4.7](https://ckeditor.com/docs/ckeditor4/latest/index.html). +# Local Testing -## Configs -- The configs of the editors can be found in base.py. -- Config options can be found [here](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html) syntax is slightly different for django-ckeditor (see removeDialogTabs). Official [example config](https://github.com/django-ckeditor/django-ckeditor#example-ckeditor-configuration). +To test mb with a local version of django-ckeditor-5 you need to follow these +steps: -## Dialog windows -- The dialog windows which open when addinga link, image, ect. can be customised via [CKEditor Dialog API](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dialog.html). -- An example of this can be seen in app.js where the code snippet is deleting the URL input in the image dialog, futher examples can be found [here](https://docs.cksource.com/CKEditor_3.x/Howto/Editing_Dialog_Windows) and [here](https://ckeditor.com/old/forums/Support/How-remove-Element-particular-Tab#comment-62739). -- NOTE: The id/name of the input you wish to delete will follow the naming conventions in the examples but will not be the id from the rendered page. +``` +# clone django-ckeditor-5 +git clone git@github.com:liqd/django-ckeditor-5.git +# cd into the directory +cd django-ckeditor-5/django-ckeditor-5 +# install npm dependencies +npm install +# build js files +npm run dev +``` -## Plugins -- To add plugins, it should be done in a4 in adhocracy4/ckeditor, then update config in aplus (see embedbase), not all ckeditor plugins can be used in django-ckeditor, see below for a list. -- It is possible to create custom plugins (see collapsibleItem in a4). -- The embed plugin we use also uses a self hosted version of iframely in order to serve iframes from a urls, configs are found in admin repository. +Now in mb, do the folowing: -### Allowed plugins - -a11yhelp, about, adobeair, ajax, autoembed, autogrow, autolink, bbcode, clipboard, codesnippet, -codesnippetgeshi, colordialog, devtools, dialog, div, divarea, docprops, embed, embedbase, -embedsemantic, filetools, find, flash, forms, iframe, iframedialog, image, image2, language, -lineutils, link, liststyle, magicline, mathjax, menubutton, notification, notificationaggregator, -pagebreak, pastefromword, placeholder, preview, scayt, sharedspace, showblocks, smiley, -sourcedialog, specialchar, stylesheetparser, table, tableresize, tabletools, templates, uicolor, -uploadimage, uploadwidget, widget, wsc, xml +``` +# activate the venv +source venv/bin/activate +# install the local django-ckeditor-5 +# replace ../django-ckeditor-5 with the correct path if its not in the parent +# directory +pip install -e ../django-ckeditor-5 +```