At Web Content Display, when "save as draft" is executed while CKEditor loading, its content is lost and blank content is saved in the database

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 6.1.20 EE GA2, 7.0.0 M3
• Fix Version/s: 6.1.X EE, 6.2.2 CE GA3 , 6.2.X EE, 7.0.0 M1
• Component/s: Frontend Infrastructure
• Labels:
  • 6.1_release_notes
  • liferay-fixpack-user-interface-11-6210
  • liferay-fixpack-user-interface-7-6130
• Branch Version/s:
  6.2.x, 6.1.x
• Backported to Branch:
  Committed
• Epic/Theme:
  • escalation
• Story Points: 3
• Fix Priority: 3
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/17854

When "Web Content Display" portlet is loading at edition mode, CKEditor takes more time to load than rest of the page. During this loading time its content is blank, so a "save" request of portlet during this time, causes original content to be overwritten with temporal blank content.

There are two use cases for customers:

1. When users edit a existing content, they can change a value in a field of the structure (title or other custom field) and save it without waiting CKEditor to be fully initialized.
2. When users press "Save as Draft" in a normal situation, they can press the button twice. If the second time is executed after window refresh but before CKEditor initialization, the content is lost.

The problem is easily reproduced in the following situations:

1. Using Internet Explorer 8 and Windows XP with an old computer. Because of IE8 JS engine, loading time is increased a lot and there are more chances that users press the save button while CKEditor is not fully loaded.
2. With any browser, when the structure is complex and/or has multiple CKEditors, loading time is also increased.

Steps to reproduce with Firefox at Master

Steps to reproduce with Firefox at Master:

1. Create a new Structure and Template using atached repeating_ckeditor_structure.xml and repeating_ckeditor_template.flt.
2. Create a new WebContent using those Structures/Templates, edit them at "Web Content Display" portlet
3. At repeating field, add six or seven CKEditor copies with some test html.
4. Click at "Save as Draft"
5. Changes will be summitted to server and page will be refreshed, before content at CKEditor is loaded, press again "Save as Draft" continuosly.
6. A second request will be summitted to server with empty contents.
7. If we close and reopen the content, we will see that CKEditor are empty
8. Note: The bug can be also reproduced using standard structure using IE8 at WinXP.

After an analysis of the problem, I have compiled the following information:

• The root cause is that the form is submitted without first checking if the components of the structure have finished loading.
• Button executes _15_saveArticle() JS function where some checks are done, but there is no checks about loading event. At first time I tried to add some checks at this point.
• But, if button is pressed quickly, before Javascript loading, _15_saveArticle() is not executed and standard HTML Form is submited without using JS, so checks are not executed. (a possible solution is to switch standard button with an AlloyUI Javascript button)

So in my opinion, there are two possible solutions to this issue:

1. Add a check at _15_saveArticle() to stop save request if portlet has not been fully loaded. Also change standard HTML button with an AlloyUI Javascript button, to always force the execution of _15_saveArticle()
2. Disable the button and enable it by Javascript when the portlet has been fully loaded and all CKEditors are initialized.

Validation cannot be done at Server side because we cannot distinguish if the blank CKEditor field content is caused by this issue or if the customer wants to save a blank content.