Configuring Styles and Toolbars in DotNetNuke ... - Chord9

Configuring Styles and Toolbars in DotNetNuke.RadEditorProvider for DNN 6.x.x Having developed many customs skins for clients, it’s long been a frustration that it has required a reasonable amount of effort to tame the HTML editor so that, when page building, site editors have a range of styles to employ that are consistent with the overall site design. Access to font and font-size dropdowns for example, in earlier DNN versions has enabled deprecated HTML and inconsistent styling to creep onto the page. However with DNN 6.x.x things have taken a welcome leap forward. If anyone has been trying to get to grips with the new DNN 6.x.x editor, here are the answers I came up with...and some of them were staring me in face all along, sometimes you can be blinded by the obvious! Choice of editors DotNetNuke.RadEditorProvider is the default editor for DNN 6.x.x. During installation there is an option to install TelerikEditorProvider and if this option is installed then the Host>HTML Editor Manager enables you to select either editor.

This post only concerns DotNetNuke.RadEditorProvider so make sure that is selected. If you are using TelerikEditorProvider then see this post for details on how to configure it: http://www.dotnetnuke.com/Resources/Forums/forumid/108/threadid/364908/scope/posts.aspx Host>HTML Editor Manager allows DotNetNuke.RadEditorProvider to be configured on a portal by portal basis and even on a page by page basis - which provides a lot of flexibility (NB this facility does not configure TelerikEditorProvider).

Configuring the ApplyCSS dropdown for DotNetNuke.RadEditorProvider A sensible first step is to create a portal specific 'profile' for the editor. Enter Host>HTML Editor Manager and click on 'Everyone'. At the foot of the config screen select 'copy', this will expose the 'create' screen from where you can create a new editor profile based on the default. Select 'Bind to Portal' and the relevant role and create the new profile. You can then modify and customise this profile to match the needs of a specific portal. A most welcome new feature.

Phil Biggs, Nov 2011, http://www.chord9.co.uk

HTML Editor Manager enables you to configure two files: /DesktopModules/Admin/RadEditorProvider/ConfigFile/ConfigFile.xml /DesktopModules/Admin/RadEditorProvider/ToolsFile/ToolsFile.xml Though you could do this manually, it's much better to do it via HTML Editor Manager as the facility creates portal and page specific versions of these files by appending portal and tab ids. Default state By default, HTML Editor Manager references stylesheet 'editor.css', which initially doesn't exist. Also, the default ConfigFile.xml does not contain a node. With these two items missing, the editor references default.css and throws all the styles it can find into the the ApplyCSS dropdown - which really isn't very usable. Taming the styles To improve this, simply create editor.css* and include the styles that you want site editors to use. Those styles will then be listed in the ApplyCSS dropdown and the mass of collected styles will have been removed - but - those exact same styles will need to be available to your skin and editor.css is not referenced by your skin. Therefore they must be added to your skin.css** as well. Whilst this works well enough, it means that the styles must be defined twice, once in editor.css and then again in skin.css. This is clearly not an ideal solution. One possible workaround here is to import styles from editor.css into skin.css using @import url("/editor.css");.This will effectively introduce the styles from editor.css into skin.css, making them available to your skin files whilst requiring the styles to be defined only once.

* The path to the CSS file is relative to the portal root. So in this example editor.css would need to be located at /portals//editor.css. ** The styles could also be added to .css, container.css or .css which gives scope for variations by skin type or container. E.g. A style ‘NormalBold’ may be required to be rendered in differently in a container designed for a right-hand column than for the main content area.

Alternative approach Another method is to reference portal.css instead of editor css.

Phil Biggs, Nov 2011, http://www.chord9.co.uk

In this case all the styles in portal.css would be listed in the ApplyCSS dropdown. Whilst this means that styles only need be defined once, it also means that you've probably exposed a number of layout styles or other styles that you don't want site editors to use. This is where ToolsFile.xml comes in. Via the textbox on the Toolbar Configuration tab of HTML Editor Manager, add a node and include only those styles from portal.css (or whichever stylesheet you have referenced) that you want to list in the ApplyCSS dropdown:

This will then effectively filter out the unwanted styles from the dropdown leaving just those listed in the node. NB As you configure and test the editor you may need to empty your browser cache and restart the DNN application to get certain changes to kick in.

Configuring Toolbars The toolbars can also be configured via the Toolbar Configuration tab of HTML Editor Manager. I believe the default configuration contains all toolbar options so it is therefore a matter of removing any unwanted tools. E.g. you may wish to prevent site editors from making free with the Font Name and Font Size dropdowns to subvert your carefully implemented 'end-user' styles. In this case simply remove these two lines from the node

Phil Biggs, Nov 2011, http://www.chord9.co.uk

So after some initial head scratching and confusion, I'm really beginning to appreciate the new editor and all the flexibility it brings.

Phil Biggs www.chord9.co.uk Nov 2011

Phil Biggs, Nov 2011, http://www.chord9.co.uk