The new HTML Editor Manager in dnn600 offers administrators a wide range of ways to tailor and customize the appearance and functionality of the new RadEditor provider.

To get started open the HTML Editor Manager from the Host menu. Note if you do not see the HTML Editor Manager in your Host menu you may need to manually install the provider - currently by default it is not being installed with the Upgrade package.
You can find the RadEditorProvider_06.00.00_Install.zip installer in then Install dnn package located under the /Install/Providers folder.

Once you have the Manager installed - opening the manager will display an option to select with HTML provider you want to use. If you have used FCK or the older DNNWERK provider you may need to change the provider to DotNetNuke,RadEditorProvider. NOTE: if you have performed and upgrade there may be two different telerik providers installed on your system ... the 5.6.3 telerik provider and the DotNetNuke.RadEditor provider - Make sure you select the DotNetNuke.RadEditor provider as it contains a number of new features not found in the 5.6.3 version.

List below this selection - by default there is one default configuration defined - that being for EVERYONE. If is possible to define separate configurations for different users, and also to define special configurations for individual pages - something which for example lets you easily tailor a Blog page so that only a limited set of formatting options are available.

Select Everyone and the default configuration will be displayed on two tabs - Editor Configuration and Toolbar Configuration.

The Editor Configuration Tab

The Editor tab offers a large number of settings that control how the editor functions - its worth spending some time here looking inside the html editor. Something which can be invaluable if you want jQuery capabilities for your html layout.

Of special note - is the Remove Scripts checkbox - by default its on. When turned off it allows the ability to include SCRIPT tags
inside your html editor layout - offering a new way to work with jquery and other scripting from inside the html editor.

The other entry to pay some attention to is the CSS File field. This allows you to define a special style sheet for use in laying out the content displayed inside the html editor. By default this is defined as editor.css however, what is more significant is that if you change this to /editor.css then you introduce the ability to define a unique editor.css file for each SKIN.

The HTML editor will look for an editor.css file inside the root directory of your current skin and load this as the layout template for that specific edit session. If you setup your editor.css file correctly, you get almost perfect wysiwyg editing and content layout inside the editor window - and in addition only the css styles you define in your editor.css file are listed in the Styles dropdown. Something which allows you to get rid of all those css layout definitions like menu elements that really are of no use for end users.

The Toolbar Configuration Tab

The Toolbar tab is the other side of the configuration system it allows you to define the layout of buttons and dropdowns that are display in the HTML Editor tool bars.

This configuration is defined as a XML file and uses markup defined by Telerik. There is some very good documentation on their website that explains how to define the contents of this file. You can find this documentation here.

There are a couple of buttons which are not currently defined in the DNN default toolbar that some administrators will find of use.
Specifically these relate to text appearance and justification - you can add these buttons onto your toolbar by placing the markup for each in suitable places in the toolbar config.

<tool name="JustifyLeft" />

- defines a Justify text LEFT button

<tool name="JustifyCenter" />

- defines a Justify text CENTER button

<tool name="JustifyRight" />

- defines a Justify text RIGHT button

<tool name="ForeColor" />

- defines a popup button to select the foreground color for your text.

<tool name="BackColor"/>

- defines a popup button to select the background color for your text.

<tool name="FontName"/>

- defines a dropdown menu to select a font name for your text.

<tool name="FontSize"/> 

- defines a dropdown menu to select the font size in web 1-7 format.

<tool name="RealFontSize"/>

- defines a dropdown menu to select the font size by point size.

And for those that regularly post code blocks on their web pages.

<tool name="FormatCodeBlock"/>

- defines a button that opens the code formatting block.
This option is discussed in more details in this blog post.

The other function of the toolbar config is the ability to declare additional modules that the editor should display.
The radeditor includes a number of predefined modules to enhance its editing functionality.

The default module settings for DNN looks like this:

    <modules>

        <module name="RadEditorStatistics" dockingZone="Bottom"/>

    </modules>

There are two other modules that some administrators may find of value.

<modules>

     <module name="RadEditorStatistics" dockingZone="Bottom" enabled="true" visible="true" dockable="true" />

     <module name="RadEditorDomInspector" dockingZone="Module" enabled="true" visible="true" dockable="true" />

     <module name="RadEditorNodeInspector" dockingZone="Module" enabled="true" visible="true" dockable="true" />

</modules>

The DomInspector lists a breakdown of the domain elements at the point where the current curson is placed. Basically it show a breadcrumb list of the elements that wrap around the cursor location, from current location outwards.

The NodeInspector displays different information at the bottom of the editor specific to the element defined at the position where the cursor is currently located. For example if you are over a Link - the url and target details are display - and editable. For an image you see width height and alignment details - all of which are editable.