Format Drupal WYSIWYG editor to match theme CSS, including paragraph spacing.

I need the format of the WYSIWYG, w/ CKeditor pane, to match the display when viewing a node. Specifically I need this for clients so that they understand what they are actually formatting. You know What You See Is What You Get. Often you have a semi nice WYSIWYG editor but this does not perfectly match the display of the node.

First this means I want to hide all the extra formatting that can be added by Cut & Paste into the editor. A simple Cut & Paste will add all sorts of style elements. Second I need to remove the extra padding at the bottom of paragraphs, so that a single line break is a single line break.

following are my quick notes:

You need a dedicated Text format.

  • goto: Home » Administration » Configuration » Content authoring » Text Formats:
  • Add text format: "WYSIWYG"
    • Enable filters:
      • WYSIWYG Filter
      • Convert URLs into links
      • Correct faulty and chopped off HTML
    • Under WYSIWYG filter I add my prefered tags, allowing for styles on IMG
      • img[*],
        a[!href|target<_blank> div[align
    • For images I add all "Box properties": margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, as well as: height, width, float

Then you need a WYSIWYG profile.

  • goto: Home » Administration » Configuration » Content authoring » Wysiwyg profiles
  • I add limited "Buttons and plugins": Bold, Italic, Underline, Align left, Align center, Align right, Link, Image, Remove format, IMCE
  • Under CSS > Editor CSS: select Define CSS, this is !important.
    Add the path to any css you need to include. I add the theme's style.css, including the default color.css, and a custom CSS file.
  • ie: /themes/bartik/css/style.css,/themes/bartik/css/colors.css,/sites/
  • Adjust the above CSS to apply the same CSS as your theme does.
  • Make sure that within these CSS files you define the bottom margin on the P tag so as to avoid uncontrolled double spacing. If you need a double space hit the RETURN twice.
    • ie:
      p {
      margin-bottom: 0 !important;

    My setup:

    • Drupal 7.8
    • WYSIWYG 7.x-2.x w/ CKeditor
    • WYSIWYG Filter 7.x-1.x
    • IMCE 7.x-1.4
    • IMCE Wysiwyg API bridge 7.x-1.x-dev