Back to all posts

Taking Control of the DotNetNuke WYSIWYG Editor

Posted on Jun 26, 2012

Posted in category:
Development
DNN

DotNetNuke by default uses the Telerik RadEditor as the rich text editor. It is a truly amazing product and one of the better WYSIWYG editors. Just like any editor though it does have some mannerisms that are not so welcomed by users. A little known fact within DotNetNuke is that you have a number of configuration elements available to help not only make the editor easier to use by removing unneeded items, but you can drastically improve functionality for super-users if so inclined and prevent issues when staging content, etc. In this post, I'll dive into a few of the key configuration items that I make to all new sites.

Getting Started

Before I get into the specifics of the individual settings that I change, I want to make sure you know how to get to the proper place. When logged in as a host user navigate to "Host" -> "Html Editor Manager". Once on this page, you will have a tree view on the left with "Default Configuration" as the root node and "Everyone" as a child. This is the default configuration and applies to everyone. In a lot of cases, it is simple enough to edit this profile as all users should see the same editor. However, if you need a more complex set of functionality scroll to the bottom of the view and click "Copy" to create a new configuration.

Once this has been done you can select which users, portals, and or tab should be impacted by this. The benefit here is that you can control your editor by all of these parameters. For example, if you have content editors posting blog articles, you could apply a specific editor configuration to a tab and force them to only have a limited toolset. Very helpful!.

My Changes

Looking at the configuration there are a large number of options available for the editor. In the following sections, I'll run through all of the changes that I make in various situations. I will not cover all of the possibilities as there are too many, but I'll at least cover the high-level ones that I've found to be helpful.

Skin

The default skin for the editor works well for most sites. However, if you are using a dark skin it might make sense to use the "Black" skin to help the editor match the look/feel of the rest of your site.

Edit Modes

This is an area that I will often change when creating custom views for content editors that I don't want "going off the reservation". I will often limit this to "Design" only rather than Design, HTML, and Preview. This prevents users from being able to directly edit the HTML and also prevents confusion in some cases with the "preview" mode, especially since it often doesn't look exactly like it should anyway.

Content Filters

This section alone is the most important area to change in my opinion. The default configuration items in this section not only make it impossible for you to integrate items into the design but also makes it impossible to manage links in a manner that is portable. That may not be an issue for you day 1, but it will be a huge issue along the way. By default all options are selected, I recommend disabling the following options (For superusers) for the following reasons.

  • RemoveScripts - Yes, scripts are a security risk. However, you are trusting this person to manage your content. Given the number of third party items that we integrate into websites these days, superusers at a minimum need the ability to add a script inline with content. Regular users don't need this functionality so if you have a case where a user can get the Rich Text Editor you will want to create a separate configuration for them.
  • MakeUrlsAbsolute - This setting is the most dangerous of all. Take an instance where you are staging a site for new development on a temporary domain. http://mydemo.com. You then build out links to other sections taking care to use relative links /MyPage.aspx etc. When you click save with the item enabled it swaps it out for http://mydemo.com/MyPage.aspx. This becomes a nightmare as there is no easy way to go back and fix the issue, and not even a great way to spot the issue.

Toolbar Settings

Changes to this section can actually greatly help usability, but typically result in a number of other changes being needed. When working with users that are familiar, regular users of Microsoft Word it is often nice to change this mode from "Default" to "Ribbon Bar". However, doing this alone results in an editor that is often not all that useful to the end-user. The layout/labels/grouping of controls is non-intuitive. However, spending a little time in the "Toolbar Configuration" section can be very helpful. In a future post, I'll share some of my helpful toolbar configurations.

Toolbar Configuration

The last and most complicated area of configuration for the Editor is the Toolbar Configuration. This is a simple XML file editor that controls all of the items within the editor. I will be posting a follow-up article to this by the end of the week to cover the details.

Conclusion

I hope this has been helpful and at a minimum, you know about the options available to you for controlling the editor setup. Feel free to share your tips/recommendations below.