loopindex / ckeditor-track-changes

Track changes plugin for CKEditor, based on ICE (track changes for TinyMCE).
www.loopindex.com
Other
51 stars 55 forks source link

userStyles - more than 3 users? #131

Open porjo opened 6 years ago

porjo commented 6 years ago

Edits made by users 1,2,3 get a different colour but users 4,5,6 get same colours as 1,2,3. It would be nice if user 4,5,6,[...] had unique colours.

One solution would be to have the the option of having colours auto-generated by lite plugin. In my use-case I don't particularly care if the same user gets the same colour all the time, just so long as different users have contrasting colours so I can easily distinguish between different edits.

imdfl commented 6 years ago

The styles associated with user ids are set in the plugin css file (ckeditor/plugins/lite/css/lite.css). For example, the style of the classes.ice-ins.ice-cts-2 determines the style of inserted text by the user with style index 2. Styles are associated with the users' internal style ids, which by default go from 1 up, in the order of the users' introduction into the system. You can associate this internal style identifier with a specific user through the lite.userStyles configuration option:

lite.userStyles = {
        "21": 3, // user id 21 is associated with style id 3
        "15": 1,
        "18": 2
    };
porjo commented 6 years ago

Thanks for the explanation. How do I ensure that user 4,5,6 have a different colour from 1,2,3 without having to modify lite.css? I've tried, for example, setting class .ice-cts-4 in my site's global stylesheet but that doesn't get applied as ckeditor is inside an iframe.

imdfl commented 6 years ago

Well, The current code does not generate styles, it only creates classes that should match styles defined in lite.css. However, not all is lost. You can use the lite.cssPathconfiguration option (in your ckeditor config) to force LITE to load your own css instead of lite.css(I'll try to add an option to make this config an array, so you could augment lite.css instead of replacing it).

For example, if your page is editor.htmland there are cssand ckeditorfolders next to it, with ckeditor containing plugins/lite/*and the cssfolder containing your own file, say porjo.css, then if you set the lite.cssPathoption to "../../../css/porjo.css" (this is relative to the location of the plugin), LITE will use this file instead of lite.css.