Use of the formatting tools in FCK Editor isn’t recommended since it loads documents down with unwanted tags. One alternative: preparing your data with a style sheet in a program like Dreamweaver, can quickly grow old. Switching back and forth between several applications repeatedly while editing, along with the lack of WYSIWYG in the editor makes this method cumbersome.

The good news is you can synch stylesheets between your skin and/or container .css and the .css used in FCK Editor. With a little setup, you’ll have the same display in and out of the editor window and your style dropdown list will be populated with your styles, not the generic FCK Editor styles.

The FCK Editor requires the creation of a .css and a .xml file to properly display styles. To reproduce your skin and/or container styles in FCK Editor:

1. Create a.css file with the styles you need and give it the name of your choice.
2. Create a .xml file describing the styles you want to show in the dropdown list.
   • Here’s an example of a simple .xml that would show styles for H1, H2, H3, H4 and pagetitle in FCK Editor’s style dropdown list. The element= is the HTML tag to be used, the Style name is the label appearing in the drop down list, for <span> or <div> the attributes name=”class” value=”#your style name#” must be included.<?xml version=”1.0″ encoding=”utf-8″ ?>
     <Styles>
     <Style name=”Heading H1″ element=“H1″ />
     <Style name=”Heading H2″ element=”H2″ />
     <Style name=”Heading H3″ element=”H3″ />
     <Style name=”Heading H4″ element=”H4″ />
     <Style name=”pagetitle” element=”span”>
     <Attribute name=”class” value=”pagetitle” />
     </Style>
     </Styles>
3. Once these files are created drop them in the root of your portal.
4. In your DNN environment – open the FCK Editor by clicking to edit a text area you have setup.
5. Click on the link below the text entry area called show custom editor options.
6. Set the type to “Portal”
7. Click open the “List of available styles for the editor” area and use these settings:

   Style list generation mode: URL

   Custom xml file: Root, your xml file

   

   List of available styles for the editor

8. Click open the “Editor area CSS” area and use these settings:

   Style list generation mode: URL

   Custom css file: Root, your css file

   

   Editor area CSS

9. At the bottom of the screen, make sure the dropdown is set to Portal and Apply the custom settings.
10. You should now have WYSIWYG display in your FCK Editing area and your own styles should be populating the style dropdown list in FCK Editor there.