Opened 7 years ago

Closed 6 years ago

#9029 closed Bug (fixed)

stylesSet.add displays out of order

Reported by: Joe Owned by: Olek Nowodziński
Priority: Normal Milestone: CKEditor 4.0.2
Component: General Version: 3.0
Keywords: Chrome Cc: jcisio@…


When adding 11 or more elements to a custom stylesSet, the stylesSet displays out of order in CKEDITOR.

For example:

{ name: 'Item 1', element: 'span', attributes: {'class' : 'item1'} },
{ name: 'Item 2', element: 'span', attributes: {'class' : 'item2'} },
{ name: 'Item 3', element: 'span', attributes: {'class' : 'item3'} },
{ name: 'Item 4', element: 'span', attributes: {'class' : 'item4'} },
{ name: 'Item 5', element: 'span', attributes: {'class' : 'item5'} },
{ name: 'Item 6', element: 'span', attributes: {'class' : 'item6'} },
{ name: 'Item 7', element: 'span', attributes: {'class' : 'item7'} },
{ name: 'Item 8', element: 'span', attributes: {'class' : 'item8'} },
{ name: 'Item 9', element: 'span', attributes: {'class' : 'item9'} },
{ name: 'Item 10', element: 'span', attributes: {'class' : 'item10'} },
{ name: 'Item 11', element: 'span', attributes: {'class' : 'item11'} },
{ name: 'Item 12', element: 'span', attributes: {'class' : 'item12'} },
{ name: 'Item 13', element: 'span', attributes: {'class' : 'item13'} }


Appears in the following order:

Item 7 Item 1 Item 3 Item 4 Item 5 Item 6 Item 2 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13

I've tried this in CKEDITOR 3.3, 3.6, and 3.6.3.

Change History (14)

comment:1 Changed 7 years ago by Jakub Ś

Status: newpending

I didn't get the error you are talking about.

  1. I have put your code under ckeditor\_source\plugins\styles\styles\test.js and then under ckeditor\plugins\styles\styles\test.js
  2. Next I have set in replace method ( stylesSet: 'test',) and run the CKEditor.

All items were displayed in correct order.

In which browser and operating system are you getting this error?
Have you made any changes in CKEditor code that might have caused this behaviour?

comment:2 Changed 6 years ago by Jakub Ś

Resolution: expired
Status: pendingclosed

comment:3 Changed 6 years ago by jcisio

I could reproduce this problem. I have it in both 3.x and the latest 4.0 versions. I use the Drupal ckeditor module and add stylesset in ckeditor.styles.js with

CKEDITOR.addStylesSet('drupal', [...]);

When I had 11 block styles and 7 inline styles, they appeared in the wrong order. Then I see this issue, I remove a few styles and the order is again correct.

This is a long time bug for me (at least 3.4.x to now), in both Chrome for Mac and for Linux. I don't have this bug in Firefox. Never tested in IE.

comment:4 Changed 6 years ago by jcisio

I think it is due to a "bug" in Chrome that disorder "equal" objects when sorting.

comment:5 Changed 6 years ago by jcisio

Cc: jcisio@… added

comment:6 Changed 6 years ago by Piotrek Koszuliński

Resolution: expired
Status: closedreopened

comment:7 Changed 6 years ago by Piotrek Koszuliński

Milestone: CKEditor 4.0.2

comment:8 Changed 6 years ago by Jakub Ś

Keywords: Chrome added
Status: reopenedconfirmed
Version: 3.0

Problem can be reproduced in Chrome from CKEditor 3.0 (it is also present in CKE 4.x (v4)).

comment:9 Changed 6 years ago by Olek Nowodziński

Owner: set to Olek Nowodziński
Status: confirmedassigned

comment:10 Changed 6 years ago by Olek Nowodziński

Status: assignedreview


Created a new branch t/9029@cksource with slightly modified version of the pull request.

  1. Ported custom weight trick and slightly modified Array.sort() callback function.
  2. Changed CKEDITOR.STYLE_BLOCK, CKEDITOR.STYLE_INLINE, CKEDITOR.STYLE_OBJECT indexes in core/style.js so styles in stylescombo appear in appropriate order (preserved right order):
    1. (if available) object styles first
    2. block styles
    3. inline styles
  3. Because of 2., lang labels inside of stylescombo have changed so swapped object keys and within all lang files of the plugin to make them displayed as expected.


Created a new branch t/9029@tests-v4 with dt for correct order of styles displayed in stylescombo.

comment:11 Changed 6 years ago by Olek Nowodziński

Status: reviewassigned

comment:12 Changed 6 years ago by Olek Nowodziński

Status: assignedreview

Created dev branch t/9029b@cksource with simple approach that uses hash table to styles in order and doesn't touch translations at all.

Test branch t/9029@tests-v4 remains unchanged.

comment:13 Changed 6 years ago by Frederico Caldeira Knabben

Status: reviewreview_passed

@jcisio, thanks!

comment:14 Changed 6 years ago by Olek Nowodziński

Resolution: fixed
Status: review_passedclosed

Fixed issue with a commit git:f7349902ebfbce.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy