Blogs

Taking Control of the DotNetNuke WYSIWYG Editor

26 Jun

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 un-needed 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 usable 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.

tags: DNN, DNN Administration, Quick Tips
comments powered by Disqus

Content provided in this blog is provided "AS-IS" and the information should be used at your own discretion.  The thoughts and opinions expressed are the personal thoughts of Mitchel Sellers and do not reflect the opinions of his employer.

Connect with Mitchel

I hope the information here has been helpful. To stay connected you can also subscribe to blog updates via email, contact Mitchel about consulting services, or reach out for assistance via CodeMendor

Content Copyright

Content in this blog is copyright protected.  Re-publishing on other websites is allowed as long as proper credit and backlink to the article is provided.  Any other re-publishing or distribution of this content is prohibited without written permission from Mitchel Sellers.