On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • CKEditor can be linked to a CSS file, and works perfectly (so far, for me) to show the content creator just what the content will look like.

    However, the dropdown listboxes "Styles" and "Format" are using my site's CSS body color (a dark green) and it is very difficult to see the black text. This is just in the dropdowns that it is wrong - it does the WYSIWYG display correctly.

    So, is there a tutorial that shows how to modify CKEditor's interface within MODX Revolution?

    The other thing I want to do is to customize the styles dropdown, to provide the content creator with css classes I have defined, rather than the inline span markup that is the default behavior. I have done this before (a few years ago) with CKEditor, so I know it can be done - but I don't know how to do it within MODX.

    Any help will be greatly appreciated.

    Dennis

    This question has been answered by dennisleahy. See the first response.

    • I see where the Styles dropdown gets modified, it's the "styles.js" file (which is buried pretty deeply in the directory tree.)

      I still don't see where to change the background color of the dropdown...maybe in config.js.
      • I see a css file used by CKEditor ("editor.css")...and I suspect that my CSS file for the website is loaded AFTER the default settings in the "editor.css" file, and overrides them in this instance.

        Next, I'll try adding in an abbreviated version of the CSS rule for the dropdown, adding the background-color property, and see if that then overrides.

        • So if you can get any customizations working for ckEditor, let me know. I have tried adding custom css and js files, and even altering the core files, and it never seemed to take. I gave up on it, so I am certainly interested in someone can successfully do what you are setting out to do.

          Jason
          • Jason, you're right. This is not straightforward. You can rename the "styles.js" to something else, clear cache, reboot, swing a dead cat on a full moon night, and nothing happens.

            Soooooo... I'm terrible at JavaScript - even the simple JavaScript often baffles me - and if you look in the monster JavaScript file that is the main program file for CHEditor (called "ckeditor.js") you'll be in the deep end of the pool. I just can't read that code, but around line 360 to 361 there seems to be a default style loaded unless the styles.js URL is found.

            Methinks this means that the issue is in the way that the plug-in structures the folder directory as opposed to how the folder directory would be structured if someone went directly to http://www.ckeditor.com and downloaded CKEditor. In other words, the main js file is NOT finding our elusive styles.js file, and so is reverting to default styles.

            But wait, there's more: On the www.ckeditor.com website, I found this, and this is where I will start back hunting tomorrow: http://docs.ckeditor.com/#!/guide/dev_styles-section-stylesheet-parser-plugin

            Dennis
            • discuss.answer
              Just getting back to this...with success.


              To recap: The default behavior of ckeditor in MODX, using the ckeditor 1.1.1-pl Extra, is to take the CSS body attribute for color and background-color, and apply them to the dropdown list items as an inherited value. That is a problem if your website has a dark background color, and the content is in a div with a light color background, using dark text (or the opposite.) I think this is pretty common.

              To control the foreground and background colors of the dropdown items in ckeditor:

              You need to edit all of the editor css files for that skin style. They can be found in:
              manager/assets/components/ckeditor/ckeditor/skins/moono (or whatever style you are using "moono" is the default)

              edit all of the editor*.css files (I found no problem with the dialog boxes, so no need to edit those)

              find:
              .cke_panel_listItem a

              and comment out the attribute for color, and add in a new color and background-color attribute

              The CSS class for dropdowns will have more values than this, but just noting the ones to change - for example if you want the dropdown lists to have a white background and black text:

              .cke_panel_listItem a {
              /*color:inherit!important;*/
              color:#000;
              background-color:#FF9;
              }

              Be sure to edit all of the editor files:
              editor.css,
              editor_ie.css,
              editor_ie7.css,
              editor_ie8.css,
              editor_iequirks.css,
              and
              editor_gecko.css,
              because you don't know what browser your admin users might use.

              Hope this helps someone. If your web pages use a white background, you will never notice this, but if you use a dark background color behind your pages, you will.

              Dennis [ed. note: dennisleahy last edited this post 5 years, 1 month ago.]
              • Addendum:
                The other attribute that you may want to change about the dropdown lists (for style and format) is the width of the dropdown - especially if you modify the contents of the dropdown (and that is done in styles.js file, one directory folder up.)

                To modify the width of the dropdowns, you'll need to edit 2 classes in the editor*.css files.

                .cke_combopanel {
                width:263px;
                height:170px
                }

                .cke_panel_listItem {
                margin:0;
                padding-bottom:1px;
                width: 240px
                }

                The width is set in the .cke_combopanel (that's the width of the dropdown list, overall), plus in the .cke_panel_listItem (that's the width of the actual item in the list, and must be smaller to accommodate the borders and padding.) The list 13 pixels wider than the listitems worked for me.

                Be sure to edit all of the editor files:
                editor.css,
                editor_ie.css,
                editor_ie7.css,
                editor_ie8.css,
                editor_iequirks.css,
                and
                editor_gecko.css,
                because you don't know what browser your admin users might use.

                Again, hope someone finds this helpful.

                Dennis