ICEfaces
  1. ICEfaces
  2. ICE-9731

Update CKEditor to version 4.3

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-3.3.0.GA_P01
    • Fix Version/s: EE-3.3.0.GA_P02, 4.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      InternetExplorer 11
    • Assignee Priority:
      P1
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.)
    • Workaround Exists:
      Yes
    • Workaround Description:
      Hide
      Add this tag int the header of the page

      <meta http-equiv="X-UA-Compatible" content="IE=10" />
      Show
      Add this tag int the header of the page <meta http-equiv="X-UA-Compatible" content="IE=10" />

      Description

      In order to support IE11 in ace:richTextEntry, it is necessary to update our CKEditor library to version 4.3.

      Enter a small piece of text into the richt text editor. Now select a word in the middle of the text and try to change the color of the selected text.

      Every time you click in the command bar of the rich text editor (to select the tool) the selection will be removed and the color will be aplyed to the the new cursor position, which is the

        Issue Links

          Activity

          Hide
          Carmen Cristurean added a comment -

          Testing reproduced the following issues with both EE-3.3.0-P01 and the latest maintenance branch/rev# 40112:

          1) A JS error occurs when accessing the showcase > richTextEntry demo page in IE11:
          SCRIPT5022: NotSupportedError
          File: coalesced.js.jsf, Line: 480, Column: 1016

          2) Changing text or background color of a selected text fails because text selection is removed and the cursor jumps at the beginning of the line when choosing a new text/background color.

          Both issues cannot be reproduced in IE10 or any other browsers.

          Show
          Carmen Cristurean added a comment - Testing reproduced the following issues with both EE-3.3.0-P01 and the latest maintenance branch/rev# 40112: 1) A JS error occurs when accessing the showcase > richTextEntry demo page in IE11: SCRIPT5022: NotSupportedError File: coalesced.js.jsf, Line: 480, Column: 1016 2) Changing text or background color of a selected text fails because text selection is removed and the cursor jumps at the beginning of the line when choosing a new text/background color. Both issues cannot be reproduced in IE10 or any other browsers.
          Hide
          Arturo Zambrano added a comment -

          Committed the following fixes to the 4.0 trunk...

          r40433: applied ICE-9699 fix to ckeditormapper tool to generate mapping javascript file with the fix and to be more human readable
          r40434: removed previous version of CKEditor (3.6.6.1)
          r40435: added new version of CKEditor (4.3) with it's CSS files parsed to use JSF URLs and with the resource mapping generated.
          r40436: added revision code to the mapping to remove it from URLs
          r40437: fixes in our code to adapt to the new version
          r40448: added icon to our custom save button, which as missing
          r40449: fixed spellcheck plugin URLs
          r40450: fixed smiley plugin URLs
          r40452: removed unnecessary resources

          Show
          Arturo Zambrano added a comment - Committed the following fixes to the 4.0 trunk... r40433: applied ICE-9699 fix to ckeditormapper tool to generate mapping javascript file with the fix and to be more human readable r40434: removed previous version of CKEditor (3.6.6.1) r40435: added new version of CKEditor (4.3) with it's CSS files parsed to use JSF URLs and with the resource mapping generated. r40436: added revision code to the mapping to remove it from URLs r40437: fixes in our code to adapt to the new version r40448: added icon to our custom save button, which as missing r40449: fixed spellcheck plugin URLs r40450: fixed smiley plugin URLs r40452: removed unnecessary resources
          Hide
          Arturo Zambrano added a comment -

          Finished applying the fixes above to the 3.3 EE maintenance branch at revision 40463.

          Show
          Arturo Zambrano added a comment - Finished applying the fixes above to the 3.3 EE maintenance branch at revision 40463.
          Hide
          Arturo Zambrano added a comment -

          Finished applying the fixes above to the 3.3 EE maintenance branch for the ice:inputRichText component at revision 40470.

          Show
          Arturo Zambrano added a comment - Finished applying the fixes above to the 3.3 EE maintenance branch for the ice:inputRichText component at revision 40470.
          Hide
          Arturo Zambrano added a comment -

          This new version of the CKEditor only comes with one skin. Therefore, ICE-9950 was created to add some other skins that are available as add-ons.

          Show
          Arturo Zambrano added a comment - This new version of the CKEditor only comes with one skin. Therefore, ICE-9950 was created to add some other skins that are available as add-ons.
          Hide
          Carmen Cristurean added a comment - - edited

          Testing showcase > ace:richTextEntry on EE-3.3.0-maintenance # 40474 in IE10/11 found that selecting a word in the middle of a text and changing its background color, will remove the background color of the text next to it.
          Steps:

          • enter a few words in rich text editor.
          • select a word in the middle of the text, change its background color to red, as example; optionally save.
          • select text before the word with red background color, including the white space between the words, and change its background color to blue -> the word with the 'red' background color loses its background color.
            This issue was found only in IE10 and IE11.

          In IE7, showcase > ace:richTextEntry demo cannot be accessed, see attached screen shot.

          Also there are multiple warnings visible in server log:
          Mar 27, 2014 6:59:07 PM com.sun.faces.context.ExternalContextImpl getMimeType
          WARNING: JSF1091: No mime type could be found for file richtextentry/ckeditor/CHANGES.md. To resolve this, add a mime-type mapping to the applications web.xml.
          ..........

          Show
          Carmen Cristurean added a comment - - edited Testing showcase > ace:richTextEntry on EE-3.3.0-maintenance # 40474 in IE10/11 found that selecting a word in the middle of a text and changing its background color, will remove the background color of the text next to it. Steps: enter a few words in rich text editor. select a word in the middle of the text, change its background color to red, as example; optionally save. select text before the word with red background color, including the white space between the words, and change its background color to blue -> the word with the 'red' background color loses its background color. This issue was found only in IE10 and IE11. In IE7, showcase > ace:richTextEntry demo cannot be accessed, see attached screen shot. Also there are multiple warnings visible in server log: Mar 27, 2014 6:59:07 PM com.sun.faces.context.ExternalContextImpl getMimeType WARNING: JSF1091: No mime type could be found for file richtextentry/ckeditor/CHANGES.md. To resolve this, add a mime-type mapping to the applications web.xml. ..........
          Hide
          Carmen Cristurean added a comment -

          Similar issues have been found with ice:inputRichText from component-showcase / showcase > ICE Components (EE-3.3.0-maintenance-branch# 40475).

          Show
          Carmen Cristurean added a comment - Similar issues have been found with ice:inputRichText from component-showcase / showcase > ICE Components (EE-3.3.0-maintenance-branch# 40475).
          Hide
          Liana Munroe added a comment -

          Several issues found with ee-3.3.0 maintenance branch revision #40410:
          Chrome, The content area now consumes most of the web page vertically, the component is not limited in height.

          Similar to ICE-9911 - Error was seen on Chrome ee-3.3.0 maintenance branch when using block quotes:
          GET http://localhost:8080/richTextEntry/plugins/magicline/images/icon.png 404 (Not Found)

          When launching richTextEntry application in FF 3.6 it functions but this general error is seen (not FF 27):
          Error: d.getSelection() is null
          Source File: http://localhost:8080/richTextEntry/javax.faces.resource/richtextentry/ckeditor/ckeditor.js.jsf?ln=icefaces.ace&v=3_3_0_140327
          Line: 764

          RichTextEntry in ICE and ACE panel TabSets - when navigating between tabs this error appear:
          FF - TypeError: a is undefined
          Chrome - TypeError:cannot call method 'clearCustomData' of null
          This also happens in the RichTextEntry in add to row to top or bottom of h:dataTable applications

          Show
          Liana Munroe added a comment - Several issues found with ee-3.3.0 maintenance branch revision #40410: Chrome, The content area now consumes most of the web page vertically, the component is not limited in height. Similar to ICE-9911 - Error was seen on Chrome ee-3.3.0 maintenance branch when using block quotes: GET http://localhost:8080/richTextEntry/plugins/magicline/images/icon.png 404 (Not Found) When launching richTextEntry application in FF 3.6 it functions but this general error is seen (not FF 27): Error: d.getSelection() is null Source File: http://localhost:8080/richTextEntry/javax.faces.resource/richtextentry/ckeditor/ckeditor.js.jsf?ln=icefaces.ace&v=3_3_0_140327 Line: 764 RichTextEntry in ICE and ACE panel TabSets - when navigating between tabs this error appear: FF - TypeError: a is undefined Chrome - TypeError:cannot call method 'clearCustomData' of null This also happens in the RichTextEntry in add to row to top or bottom of h:dataTable applications
          Hide
          Ken Fyten added a comment -

          FF 3.6 is not directly supported, so that issue doesn't require attention.

          Show
          Ken Fyten added a comment - FF 3.6 is not directly supported, so that issue doesn't require attention.
          Hide
          Arturo Zambrano added a comment -

          Renamed *.md files to *.md.txt, so that they have a known mime type, thus warning messages in the server log are prevented; updated ckeditor.mappng.j and readme.txt.

          r40680: Committed fix to 4.0 trunk.
          r40681: Committed fix to 3.3 EE branch.
          r40683: Committed fix to 3.3 EE branch for ice:inputRichText.

          Show
          Arturo Zambrano added a comment - Renamed *.md files to *.md.txt, so that they have a known mime type, thus warning messages in the server log are prevented; updated ckeditor.mappng.j and readme.txt. r40680: Committed fix to 4.0 trunk. r40681: Committed fix to 3.3 EE branch. r40683: Committed fix to 3.3 EE branch for ice:inputRichText.
          Hide
          Arturo Zambrano added a comment -

          Similar to ICE-9911 - Error was seen on Chrome ee-3.3.0 maintenance branch when using block quotes:
          GET http://localhost:8080/richTextEntry/plugins/magicline/images/icon.png 404 (Not Found)

          Fixed issue in the same way as ICE-9911 (revisions 40686, 40688, and 40689).

          Show
          Arturo Zambrano added a comment - Similar to ICE-9911 - Error was seen on Chrome ee-3.3.0 maintenance branch when using block quotes: GET http://localhost:8080/richTextEntry/plugins/magicline/images/icon.png 404 (Not Found) Fixed issue in the same way as ICE-9911 (revisions 40686, 40688, and 40689).
          Hide
          Arturo Zambrano added a comment -

          RichTextEntry in ICE and ACE panel TabSets - when navigating between tabs this error appear:
          FF - TypeError: a is undefined
          Chrome - TypeError:cannot call method 'clearCustomData' of null
          This also happens in the RichTextEntry in add to row to top or bottom of h:dataTable applications

          The issue was caused by a listener function in the CKEditor code (detach()) that tried to invoke some clean-up methods after the actual editor instance and nodes had been removed from the DOM, such as in cases when adding a new row or loading a new tab from the server, which cause a full table or tabset markup update, completely removing editor instances and re-generating them after the update.

          Committed fix at revisions 40690, 40691, and 40692.

          Show
          Arturo Zambrano added a comment - RichTextEntry in ICE and ACE panel TabSets - when navigating between tabs this error appear: FF - TypeError: a is undefined Chrome - TypeError:cannot call method 'clearCustomData' of null This also happens in the RichTextEntry in add to row to top or bottom of h:dataTable applications The issue was caused by a listener function in the CKEditor code (detach()) that tried to invoke some clean-up methods after the actual editor instance and nodes had been removed from the DOM, such as in cases when adding a new row or loading a new tab from the server, which cause a full table or tabset markup update, completely removing editor instances and re-generating them after the update. Committed fix at revisions 40690, 40691, and 40692.
          Hide
          Liana Munroe added a comment -

          All above issues with ACE components and showcase are verified fixed on ee-3.3.0 maintenance branch r40695, Chrome, FF, and IE 8, 9, 10, 11.
          The issue: "In IE7, showcase > ace:richTextEntry demo cannot be accessed, see attached screen shot." is still happening. The error is the same and the demo will not load

          Show
          Liana Munroe added a comment - All above issues with ACE components and showcase are verified fixed on ee-3.3.0 maintenance branch r40695, Chrome, FF, and IE 8, 9, 10, 11. The issue: "In IE7, showcase > ace:richTextEntry demo cannot be accessed, see attached screen shot." is still happening. The error is the same and the demo will not load
          Hide
          Arturo Zambrano added a comment -

          Testing showcase > ace:richTextEntry on EE-3.3.0-maintenance # 40474 in IE10/11 found that selecting a word in the middle of a text and changing its background color, will remove the background color of the text next to it.
          Steps:

          • enter a few words in rich text editor.
          • select a word in the middle of the text, change its background color to red, as example; optionally save.
          • select text before the word with red background color, including the white space between the words, and change its background color to blue -> the word with the 'red' background color loses its background color.
            This issue was found only in IE10 and IE11.

          This issue seems to have been indirectly fixed by some of the fixes above.

          Show
          Arturo Zambrano added a comment - Testing showcase > ace:richTextEntry on EE-3.3.0-maintenance # 40474 in IE10/11 found that selecting a word in the middle of a text and changing its background color, will remove the background color of the text next to it. Steps: enter a few words in rich text editor. select a word in the middle of the text, change its background color to red, as example; optionally save. select text before the word with red background color, including the white space between the words, and change its background color to blue -> the word with the 'red' background color loses its background color. This issue was found only in IE10 and IE11. This issue seems to have been indirectly fixed by some of the fixes above.
          Hide
          Arturo Zambrano added a comment - - edited

          The issue: "In IE7, showcase > ace:richTextEntry demo cannot be accessed, see attached screen shot." is still happening. The error is the same and the demo will not load

          IE7 is simply not supported on CKEditor 4.2 and beyond, according to this page:
          http://ckeditor.com/blog/CKEditor-4.2-Released

          Removed alert message, so that the editor simply and cleanly doesn't appear on IE7.

          Show
          Arturo Zambrano added a comment - - edited The issue: "In IE7, showcase > ace:richTextEntry demo cannot be accessed, see attached screen shot." is still happening. The error is the same and the demo will not load IE7 is simply not supported on CKEditor 4.2 and beyond, according to this page: http://ckeditor.com/blog/CKEditor-4.2-Released Removed alert message, so that the editor simply and cleanly doesn't appear on IE7.
          Hide
          Carmen Cristurean added a comment - - edited

          Re-testing with EE-3.3.0-maintenance # 40710 found that the rich text editor is not rendered at all in IE7, and it is functional in IE8.

          However in IE10 and IE11 the issue about loosing the background color is still visible, and also there is a very similar issue in Firefox now.

          Show
          Carmen Cristurean added a comment - - edited Re-testing with EE-3.3.0-maintenance # 40710 found that the rich text editor is not rendered at all in IE7, and it is functional in IE8. However in IE10 and IE11 the issue about loosing the background color is still visible, and also there is a very similar issue in Firefox now.
          Hide
          Ken Fyten added a comment -

          We will attempt to make the component dynamically load either the newer CKeditor 4.3 when running in any browser other than IE7, or the older 3.6.6.1 when running on IE7 in order to preserve support for IE7 while adding support for IE11.

          NOTE that this will only be for the 3.3 maintenance branch, ICEfaces 4 will not support IE7.

          Show
          Ken Fyten added a comment - We will attempt to make the component dynamically load either the newer CKeditor 4.3 when running in any browser other than IE7, or the older 3.6.6.1 when running on IE7 in order to preserve support for IE7 while adding support for IE11. NOTE that this will only be for the 3.3 maintenance branch, ICEfaces 4 will not support IE7.
          Hide
          Arturo Zambrano added a comment -

          Committed enhancement to dynamically load an older version (3.6.6.1) or a newer version (4.3.3) of CKEditor, and thus continue to support IE7, to the 3.3 EE maintenance branch at revision 40735 for ace:richTextEntry and at revision 40737 for ice:inputRichText.

          Show
          Arturo Zambrano added a comment - Committed enhancement to dynamically load an older version (3.6.6.1) or a newer version (4.3.3) of CKEditor, and thus continue to support IE7, to the 3.3 EE maintenance branch at revision 40735 for ace:richTextEntry and at revision 40737 for ice:inputRichText.
          Hide
          Ken Fyten added a comment -

          We need to preserve backwards compatibility with existing applications that may be using the "skin" attribute as it was supported in previous ICEfaces 3.3 releases, namely:

          Specify the pre-defined skin for the editor. Possible values are 'v2', 'office2003', and 'kama' ('default' is synonymous of 'v2'). Default = 'default'.

          So, let's make the "skin" attribute continue to function as it previously did when running on IE7 and thus, using the older CKeditor version that supported those skins. When running on other browsers and thus, using the newer CKeditor version that doesn't support those skins we will ignore any specified skins in the "skins" attribute for now.

          At some point in the future when ICE-9950 is completed to add more skins to the CKeditor 4.3 version we will need to either add a new skin attribute "skin4"? so the new skins can be specified when running on newer browsers as well, or some other novel solution.

          Note for ICEfaces 4, the "skin" attribute can be used for the CKeditor 4.3 skins as no support for IE7 is required.

          Show
          Ken Fyten added a comment - We need to preserve backwards compatibility with existing applications that may be using the "skin" attribute as it was supported in previous ICEfaces 3.3 releases, namely: Specify the pre-defined skin for the editor. Possible values are 'v2', 'office2003', and 'kama' ('default' is synonymous of 'v2'). Default = 'default'. So, let's make the "skin" attribute continue to function as it previously did when running on IE7 and thus, using the older CKeditor version that supported those skins. When running on other browsers and thus, using the newer CKeditor version that doesn't support those skins we will ignore any specified skins in the "skins" attribute for now. At some point in the future when ICE-9950 is completed to add more skins to the CKeditor 4.3 version we will need to either add a new skin attribute "skin4"? so the new skins can be specified when running on newer browsers as well, or some other novel solution. Note for ICEfaces 4, the "skin" attribute can be used for the CKeditor 4.3 skins as no support for IE7 is required.
          Hide
          Arturo Zambrano added a comment - - edited

          Chrome, The content area now consumes most of the web page vertically, the component is not limited in height.

          Reviewing the CKEditor documentation, for both the 3.x and 4.x versions, reveals that the height cannot be expressed in percent units (%) and that the default height is 200px, as stated in these documentation pages:

          http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.height
          http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-height

          Moreover, the height only applies to the editable area, while the width applies to the entire editor.

          The TLD documentation was updated to match the CKEditor description for these attributes.

          Therefore, with a default height of 200px (and avoiding the use of percent units), the editor will now be bound by that height, unless a different explicit height is set.

          Committed these changes to the 4.0 trunk at revision 40783 and to the 3.3 EE maintenance branch at revision 40784.

          Committed these changes to 3.3 EE maintenance branch for ice:inputRichText at revision 40787.

          Show
          Arturo Zambrano added a comment - - edited Chrome, The content area now consumes most of the web page vertically, the component is not limited in height. Reviewing the CKEditor documentation, for both the 3.x and 4.x versions, reveals that the height cannot be expressed in percent units (%) and that the default height is 200px, as stated in these documentation pages: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.height http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-height Moreover, the height only applies to the editable area, while the width applies to the entire editor. The TLD documentation was updated to match the CKEditor description for these attributes. Therefore, with a default height of 200px (and avoiding the use of percent units), the editor will now be bound by that height, unless a different explicit height is set. Committed these changes to the 4.0 trunk at revision 40783 and to the 3.3 EE maintenance branch at revision 40784. Committed these changes to 3.3 EE maintenance branch for ice:inputRichText at revision 40787.
          Hide
          Arturo Zambrano added a comment -

          Revisions 40794 and 40795... TLD doc and behaviour update regarding the 'skin' attribute: the attribute only applies to IE7 skins (old editor); all other browsers will use the 'moono' skin.

          Show
          Arturo Zambrano added a comment - Revisions 40794 and 40795... TLD doc and behaviour update regarding the 'skin' attribute: the attribute only applies to IE7 skins (old editor); all other browsers will use the 'moono' skin.
          Hide
          Arturo Zambrano added a comment -

          Resolving issue. Spinning off background colour issue to ICE-9971.

          Show
          Arturo Zambrano added a comment - Resolving issue. Spinning off background colour issue to ICE-9971 .
          Hide
          Liana Munroe added a comment -

          Affects component-showcase, icefaces ee-3.3.0 maintenance branch.
          While verifying the fix for ICE-9970 I noticed that the Component showcase Rich Text Demo save function does not work in IE7.
          This is only the case with the component-showcase demo page. When testing the ice:inputRichText Demo in showcase ICE components there is no issue.

          IE 7 error when trying to save data.
          Line 2
          CHar 14523
          Error: 'name' is null or not an object
          Code: 0

          Issues only happens when using component-showcase .war, does not happen with showcase ICE component demo.

          Show
          Liana Munroe added a comment - Affects component-showcase, icefaces ee-3.3.0 maintenance branch. While verifying the fix for ICE-9970 I noticed that the Component showcase Rich Text Demo save function does not work in IE7. This is only the case with the component-showcase demo page. When testing the ice:inputRichText Demo in showcase ICE components there is no issue. IE 7 error when trying to save data. Line 2 CHar 14523 Error: 'name' is null or not an object Code: 0 Issues only happens when using component-showcase .war, does not happen with showcase ICE component demo.
          Hide
          Arturo Zambrano added a comment -

          This last issue in the comment above is not related to the ice:inputRichText component, but to the ice:selectOneMenu component in the form. Closing this issue and documenting the ice:selectOneMenu issue in ICE-9974.

          Show
          Arturo Zambrano added a comment - This last issue in the comment above is not related to the ice:inputRichText component, but to the ice:selectOneMenu component in the form. Closing this issue and documenting the ice:selectOneMenu issue in ICE-9974 .

            People

            • Assignee:
              Arturo Zambrano
              Reporter:
              Jose Gonzalez
            • Votes:
              0 Vote for this issue
              Watchers:
              5 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: