CKEditor for MODx is released. Bye TinyMCE!

p.emphasis1 {
  color: #75abff; }
h2.pagetitle {
  font-size: 160%;
  margin-top: 30px;
  text-align: center; }

MODx.ux.CKEditor = Ext.extend(Ext.ux.CKEditor, {
    editorConfig: {

coreStyles_strike: {element: 's', overrides: 'strike'}

contentsCss: MODx.config['site_url'] + '/assets/templates/ckeditor.css'

1. You put scripts on your system
2. Created CSS
3. Placed it in your environment
4. Told the ckeditor addon where to find your CSS
5. The addon tells the stylesheet parser where to find the CSS
6. You told the ckeditor addon to load the ckeditor plugins
7. The stylesheet parser plugin parses your CSS into internal code
8. The internal code is then used by the stylescombo plugin to populate the plugin

1. If you don't see the Styles list change: You may have misplaced the CSS, or you may have CSS which gets filtered out. See below. I recommend you use my example to start and then customize one step at a time, refreshing your resource page after each step to ensure the changes are good.
2. Notice how the p.foo style applies the foo class to the p tag. It's not pretty but that's the pattern. This is another reason why it wouldn't do to load your default styles.
3. In order to parse the CSS, the stylesheetparser seems to actually load it. Don't put common styles in there like 'body' or these will override your Manager styles. The styles are not added to the Styles list but the CSS is active.
4. You'll see that the Styles list shows the style name using the style. It does this obviously because it has loaded the style sheet. Again, don't use style names which conflict with Manager styles or the moono skin used by the ckeditor addon.
5. stylesheetparser/plugin.js does use regular expressions to filter styles from your CSS before parsing into that internal format. There is a skipSelectors filter to filter Out styles ( /(^body\.|^\.)/i ), and a validSelectors regex to filter In styles ( /\w+\.\w+/ ).
6. Don't modify that script to change the values. Use the config settings as above. Add values:
   stylesheetParser_skipSelectors: (your regex),
   stylesheetParser_validSelectors: (your regex)
   Frankly, I tried using my own expressions and was unsuccessful. The .js has examples at the bottom of the file. More info is here. There you'll see those notes how the CSS parser is limited (doesn't allow for nice names and other issues), and how that has prompted some to skip the parser and write their own style info direct for stylescombo.
7. As an enhancement to the ckeditor addon, I think more of the editorConfig values should be moved out of the .js and put into system settings - I'm sure that's already in the roadmap. It's probably safe to say the keys mentioned here could be added.
8. You don't need the CSS, you can create the intermediary files yourself.
9. On that page you'll also see that there is a way to clear the default list of styles from the dropdown before adding your own. To do that here, add this editorConfig value right before contentsCSS:
   stylesSet: [],
10. Conversely, the p.foo styles described here are block styles. I don't know yet how to define inline styles like 'strong'. So unless someone posts a solution, you may not want to remove the defaults unless you really never use them.

Somebody had some success using MIGX grids with richtextTV's and CKE?