Customizing the Sitefinity WYSIWYG Editor

Customizing the Sitefinity WYSIWYG Editor

Posted on July 25, 2011 0 Comments
Customizing the Sitefinity WYSIWYG Editor

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

The Telerik RadEditor is the first of the RadControls, a tool with long history that has undergone huge improvements ever since its first edition back in 2002. It is the core of the Sitefinity rich text WYSIWYG editor, that is used in a number of locations (Content Blocks, new content item creation dialogues in News, Events, Blogs, Lists…). Along with the other Telerik controls, it is developed and supported by dedicated teams in Telerik, which are responsible only for that tool. That means, that there are dedicated human resources that improve that control independently, enrich its documentation and add code samples, tutorials and videos for it.

One of the great features that the RadEditor comes with, is its extensibility with modules and add-ons and flexible configuration capability.

image

By default, we have enabled just some of the functionalities that the Editor comes out of the box with. As you can see on the above screenshot, tens of tools can be added to its toolbox. Doing so is absolutely easy. It’s all a matter of specifying which tools should appear in your toolbar by adding or removing them from a configuration XML file. You can find the default configuration XML file here, and you can find detailed instructions on what other tools you can add there in the official RadEditor documentation. Afterwards, all you need to do is set up Sitefinity to use that configuration file by going to the Sitefinity backend >> Administration >> Settings >> Advanced >> Appearance.

image

This is extremely useful in cases where you would like to limit what your content authors can do through the Editor – there are many cases in which you would like to remove the Font Name , Size, Font Color, etc. buttons, in order to keep consistency throughout your whole website.

So far, so good. Let’s force usage of our CSS only now!

The power of the RadEditor is in its ability to be easily customized and extended. After stripping it from tools that we do not want our authors to use, we can force them to use CSS classes which would style their content consistently throughout the whole website. To achieve this, we need to use a tool, called ApplyClass. You can add it to your toolbox and then specify where it should take CSS classes from:

image

Note that in the above example, I have put my CSS file in the Global folder, where my template CSS files are kept. This ensures that the CSS classes that our Editor will apply to the content are loaded globally for the whole website and there will be no issues loading these classes later on.

Also, please note that even if my website templates are located under my /App_Data/ folder, I have excluded this folder from the path to the CSS file, as permission limitations would deny access to the CSS files for the RadEditor. In order to overcome this and a number of other hurdles, we have mapped the subfolder ~/Sitefinity/ to ~/App_Data/Sitefinity/ , and the path I have used above abides by that rule.  

The flexible configuration allows you to further explicitly specify exactly which classes should be available in the Editor’s dropdown menu.

After all of that’s accomplished, we can go ahead and take a look at our results:

image

Now we are able to select content inside our RadEditor and apply our own CSS classes to it. The result: if the content we’ve selected is a whole HTML element (like a paragraph <p>, a heading <H1>, a DIV, etc), the CSS class will be added to it. If it’s text that is part of some HTML element, it will be wrapped by a <span></span> tag which bears our CSS.

This is just one aspect of customizing how the RadEditor should behave. For example, Josh Morales has illustrated how to disable the option to switch between toolbars entirely and just have a single global Toolbar configuration. Take a look at this post on using the Sitefinity ViewMap to see this in action.

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments

Comments are disabled in preview mode.
Topics

Sitefinity Training and Certification Now Available.

Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.

Learn More
Latest Stories
in Your Inbox

Subscribe to get all the news, info and tutorials you need to build better business apps and sites

Loading animation