Skip to content

Commit

Permalink
docs, changelog: ckeditor
Browse files Browse the repository at this point in the history
  • Loading branch information
m4ra committed Feb 29, 2024
1 parent 6bb92cd commit b777324
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 24 deletions.
24 changes: 24 additions & 0 deletions changelog/7632.md
Original file line number Diff line number Diff line change
@@ -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

49 changes: 25 additions & 24 deletions docs/ckeditor.md
Original file line number Diff line number Diff line change
@@ -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 [email protected]: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
```

0 comments on commit b777324

Please sign in to comment.