[MGNLUI-4187] Rich Text Editor - Source View : Does Not Save Changes Made (Chrome) Created: 06/Apr/17  Updated: 28/Dec/17  Resolved: 25/Oct/17

Status: Closed
Project: Magnolia UI
Component/s: page editor
Affects Version/s: 5.5.3, 5.6
Fix Version/s: 5.5.8, 5.6

Type: Bug Priority: Neutral
Reporter: Julian Nodarse Assignee: Federico Grilli
Resolution: Fixed Votes: 2
Labels: None
Remaining Estimate: 0d
Time Spent: 1d 1h
Original Estimate: Not Specified
Environment:

Chrome


Attachments: File config-magnolia.js     PNG File screen-2.PNG     PNG File screenshot-1.png     PNG File screenshot-2.png    
Issue Links:
dependency
duplicate
is duplicated by MGNLUI-4226 RichText Field (CKEditor) not saving ... Closed
relation
supersession
supersedes MGNLUI-3845 CompositeField & NoOpCompositeTransfo... Closed
supersedes MGNLUI-4309 CompositeField & NoOpCompositeTransfo... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:
Sprint: Basel 118, Basel 119
Story Points: 2

 Description   

The rich text editor does not persist edits made within “source view”. It will only persist if you switch back to the normal view. Changes made within source view will be erased if you click the save button without switching to normal view.

It is expected that the edits persist after clicking the save button without having to switch to the normal view again

Steps to reproduce :
1 - Create or edit a page
2 - Add the rich text component
3 - Switch to “source view”
4 - Add some text
5 - Click save

You will notice no changes are made and if you click edit again, the changes have been removed from the rich text editor dialog.

Note: This issue is only seen in 5.5.3 and not in 5.4.11



 Comments   
Comment by Julian Nodarse [ 06/Sep/17 ]

Closing this ticket seeing that it is an issue with CKEditor itself. You can reproduce the issue by testing on their demo here: https://ckeditor.com/features

Comment by Antti Hietala [ 08/Sep/17 ]

Reopened after discussion with mgeljic. Magnolia should handle the situation better. Losing content is an issue.

Investigate if there's a way to check on save whether the CKEditor source view is still open and changes are pending. Commit the changes before closing the dialog.

A CKEditor workaround is proposed in SUPPORT-7447.

Comment by Michael Büchele [ 11/Sep/17 ]

Here is a working example with the CKEditor:
https://sdk.ckeditor.com/samples/savetextarea.html

I can insert text in the source code:

And then click "submit" to post the data to the server:

This works as expected!

Comment by Sebastian Tauch [ 11/Sep/17 ]

@ahietala

A CKEditor workaround is proposed in SUPPORT-7447.

Is it possible to share the workaround here?

Comment by Antti Hietala [ 11/Sep/17 ]

stauch, proposed workaround from SUPPORT-7447:

CKEditor provides two plugins for source code editing:

  • Source Editing Area. Magnolia uses this plugin by default. It replaces the rich-text area with a source view when you click the Source button. The issue you reported occurs when an editor clicks Save in the Magnolia dialog while still in the source view. Their content changes are not committed to the rich-text view, the content is lost, and the editor is unhappy. You could work around the issue by educating editors to switch back to the rich-text view first but accidents will happen. Not everybody is going to remember the advise.
  • Source Dialog. This is an alternative plugin. You can configure it yourself. It opens the source code view in a new dialog. The dialog has its own OK button. The editor must click the OK button to commit changes to the rich-text view. No content is lost.

Try the second plugin! It solved the issue for me. My changes in the source view were saved successfully.

Download
https://ckeditor.com/addon/sourcedialog

Instructions:

1. Download the plugin and extract the zip to a resource folder. I extracted mine to /magnoliaAuthor/modules/ckeditor/plugins/sourcedialog where I keep my light modules.

2. Configure the plugin in config-magnolia.js. I copied the default config-magnolia.js file to /magnoliaAuthor/modules/ckeditor/config-magnolia.js and made the following changes:

Register the new plugin:

CKEDITOR.plugins.addExternal( 'sourcedialog', '/magnoliaAuthor/.resources/ckeditor/plugins/sourcedialog/', 'plugin.js' );

Swap the plugins:

	config.extraPlugins = 'sourcedialog';
	config.removePlugins = 'sourcearea';

Change the button name in the toolbar config, see Source Code Editing in CKEditor documentation:

\{ name: "tools",         items: \[ "Sourcedialog" \] \}

4. Reload the rich text field in the browser.

You may also want to set magnolia.develop=true to make sure resources are not cached.

Attached my custom config-magnolia.js

Comment by Sebastian Tauch [ 12/Sep/17 ]

Thank you very much, the workaround solved our issue!

Comment by Federico Grilli [ 20/Oct/17 ]

Apparently the issue is with CKEditor itself and only on Chrome https://dev.ckeditor.com/ticket/16935 (I could not reproduce it on FF and Safari for instance).
The description of the issue there can be misleading but it really has to do with CKEditor losing focus (which in our case happens when clicking on "save") and then throwing a javascript error (which I could see in the browser's console) preventing the editor from saving data.
The CKEditor Vaadin add-on (https://vaadin.com/directory/component/ckeditor-wrapper-for-vaadin) version we're using now is 7.11.1 and wraps CKEditor version 4.6.2. Issue was solved with CKEditor 4.7.0. Updating to the latest Vaadin add-on version 7.12.2 should do the trick.

Generated at Mon Feb 12 09:14:09 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.