Skip to content

Commit

Permalink
feat: inline editor (#606)
Browse files Browse the repository at this point in the history
* Fix:		Tests dj4 compatible

* Feature:	Inline editing

* Make flake (8 happy)

* Fix:		Inline editing js only loaded in edit mode.

* Fix:		Only create InlineEditor for visible elements

* Fix:		Keep child plugins in tact while inline editing

* Fix:		Tests

* Fix:		Flake8 and isort

* Fix:		Add editor condig to dom using toolbar

* Refactor: unify ckeditor management

* Add:		Plugin editing in the inline editor

* Fix:		Avoid prepare single load of text

* Fix:		Strongly increased responsiveness. Common csrf token

* Fix:	isort, flake8

* Fix:		isort

* Add:		dark mode for frontend editing

* Fix:		only group plugins into modules if there are any

* Fix:		non-placholder fields

* Fix:		Add cms_path to post requests

* Add:		show toolbar loader when saving

* Fix:		remove console.logs, better style

* Fix:		Bind CKEDITOR only after load

* Fix:		Reload toolbar after save to allow edits to be published

* Fix:		Refactor toolbar reload for better reusability

* Fix:		Memorize styles before first edit
Fix:		Admin forms w/o plugin

* Fix:		updated js file in widgets.py

* Fix:		admin htmlfields

* Fix:		Remove debug console.log statements

* Fix:		Child Plugin editor confusion.

* Fix:		Float ckedor diaog above cms structure board

* Fix:		block toolbar click manager forb ckeditor

* Fix:		Highligh of text plugin

* Add:		CKEDITOR_INLINE_EDITING setting to activate inline editing

* Fix:		Change setting to TEXT_INLINE_EDITING

* Fix:		missing comma

* Fix:		flake adjustments

* Fix flake 2nd

* Update Readme

* Fix:		link correct static js file

* Add:		Improved responsiveness by only initializing visible text areas (using Observer class)
Fix:		Double rendering of text child plugins

* Fix:		Editor initialization
Add:		temporary console.log statements for debugging

* Fix:		wrong editor init order

* isort

* flake8 w503

* Fix:		unwanted scrolling when entering inline editor

* Fix:	removed unused variable

* Fix:		Avoid double rendering of plugins when in inline edit mode

* Fix:		isort

* Add:		Warning before navigating away from unsaved changes

* Fix:		Allow for custom overwrite of `cms/plugins/text.html` template
Fix:		Do not wrap already wrapped html

* Fix:		show inline-flex cms-plugins also inline and not as block

* Add:		Switch in admin menu bar for inline editing

* fix: isort

* fix:		lint error

* Add:		Toolbar button

* Fix:		Remove unused imports

* Fix:		User HTML instead of admin HTML when inline editing is turned off

* Add:		title attribute for inline editing toolbar button

* Some flakes

* Fix:	Obfuscation to avoid W503 and W504

* Fix:		Keep code readable by accepting the new best practice W504

* OK, it's W503 - the new best practice W504 becomes the anti-pattern

* Fix:		ckeditor opening select dialog box if cmsplugin contains a select tag

* Fix:		Toolbar.request.get_absolute_url() does not work: use toolbar.request_path instead

* Add:		Simple test

* Fix:		test syntax

* test:		move test case to test_plugin.py

* Test:		test on github actions

* Test:		Test edit mode

* Test:		Try truning on inline-editing

* Tests:	Testing the inline editing switch

* Some lint chocolate

* Fix:		Persisetence of inline_editing switch

* Add:		some comments

* Fix:			dark mode support for inline-editor
Add:			icon setting for cmsplugins

* Fix:		flake8 unused import

* Fix:		Remove toggle button on touch devices and in collapsed menus.

* No white space before of

* Fix: No white space at elf for inline.html

* Fix:		namespace events, unregister events

* Fix:		z-index to let dialog float above structure board

* Update: readme.rst

* NO NEWLINE AT THE END!

* NO NEWLINE AT THE END

* Fix:	remove newlines at end of text.html and inline.html

* Fix:		displayStyle undefined bug
  • Loading branch information
fsbraun authored Jun 13, 2022
1 parent ad86d37 commit 31cb918
Show file tree
Hide file tree
Showing 86 changed files with 1,446 additions and 965 deletions.
36 changes: 31 additions & 5 deletions README.rst
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ One of the easiest contributions you can make is helping to translate this addon
Documentation
=============

See ``REQUIREMENTS`` in the `setup.py <https://github.com/divio/djangocms-text-ckeditor/blob/master/setup.py>`_
See ``REQUIREMENTS`` in the `setup.py <https://github.com/django-cms/djangocms-text-ckeditor/blob/master/setup.py>`_
file for additional dependencies listed in the

The current integrated Version of CKEditor is: **4.17.2**
Expand Down Expand Up @@ -88,6 +88,32 @@ Upgrading from ``cms.plugins.text``
Configuration
-------------

Inline editing feature
**********************

Inline editing allows editors to directly click on a text plugin and change
the contents in django CMS' edit mode. The CKEditor appears directly around
the text field and can be used normally. Changes are saved as soon as the
text field leaves focus.

Inline editing requires to encapsulate the HTML text in a ``<div>`` in
edit mode. This might cause some side effects with a site's CSS, e.g. direct
child rules.

To activate inline editing add the following line in your project's
``settings.py``::

TEXT_INLINE_EDITING = True

This will add a toggle button to the toolbar to allow to switch inline editing
on and off for the current session.

When inline editing is active the editor will save the plugin's content each time it loses
focus. If only text has changed the user can immediately continue to edit. If
a text-enabled plugin was changed, added, or removed he page will refresh to
update the page tree and get the correctly rendered version of the changed
plugin.

Default content in Placeholder
******************************

Expand All @@ -97,7 +123,7 @@ If you use Django-CMS >= 3.0, you can use ``TextPlugin`` in "default_plugins"
HTML content. If you want to add some "default children" to your
automagically added plugin (i.e. a ``LinkPlugin``), you have to put children
references in the body. References are ``"%(_tag_child_<order>)s"`` with the
inserted order of chidren. For example::
inserted order of children. For example::

CMS_PLACEHOLDER_CONF = {
'content': {
Expand Down Expand Up @@ -212,7 +238,7 @@ configuration parameter in your settings::
#. Add `configuration='MYSETTING'` to the `HTMLField` usage(s) you want to
customize;
#. Define a setting parameter named as the string used in the `configuration`
argument of the `HTMLField` instance with the desidered configuration;
argument of the `HTMLField` instance with the desired configuration;

Values not specified in your custom configuration will be taken from the global
``CKEDITOR_SETTINGS``.
Expand Down Expand Up @@ -252,7 +278,7 @@ to note:
.. _add styles and js configuration: https://github.com/divio/django-cms-demo/blob/7a104acaa749c52a8ed4870a74898e38daf20e46/src/settings.py#L318-L324
.. _stop CKEditor from removing empty spans: https://github.com/divio/django-cms-explorer/blob/908a88afa4e1d1176e267e77eb5c61e31ef0f9e5/static/js/addons/ckeditor.wysiwyg.js#L73
.. _allowedContent: http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules
.. _to contain: https://github.com/divio/djangocms-text-ckeditor/issues/405#issuecomment-276814197
.. _to contain: https://github.com/django-cms/djangocms-text-ckeditor/issues/405#issuecomment-276814197


Drag & Drop Images
Expand All @@ -262,7 +288,7 @@ In IE and Firefox based browsers it is possible to drag and drop a picture into
This image is base64 encoded and lives in the 'src' attribute as a 'data' tag.

We detect this images, encode them and convert them to picture plugins.
If you want to overwirite this behavior for your own picture plugin:
If you want to overwrite this behavior for your own picture plugin:

There is a setting called::

Expand Down
Loading

0 comments on commit 31cb918

Please sign in to comment.