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 p[align br,span,em,i,strong,b,u,center,cite,code,blockquote,ul,ol,li,dl,dt,dd
  • 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/example.com/files/css_injector/css_injector_1.css
• Adjust the above CSS to apply the same CSS as your theme does.