+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Customizing the Sitefinity WYSIWYG Editor

by Grigori Karanikolov

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.

14 comments

Leave a comment
  1. Laura Jul 25, 2011
    This is great. Thank you. It would be nice to have the capability (as there was in 3.7) to apply the tools file to a rad editor specifically. So you could have a different set of tools for the input of a news item for example. Maybe that is already possible in 4.x?  

    Also, it would be nice to be able to set the tools per role. So maybe editors have a limited set of tools versus administrators.

    Thanks for the tutorial.
  2. Grisha 'Greg' Karanikolov Jul 26, 2011
    Hey Laura,

    I hope this article helps! Both options which you are interested in will be possible in Sitefinity soon, we have already prepared wireframes for them, so they will be ready for Q3!
  3. Grisha 'Greg' Karanikolov Jul 27, 2011
    Actually I got an update that it is possible even now. Josh Morales, one of our developer support specialists, has started a series of blog posts on the subject. The first one is available here.
    And of course, it will be much easier to accomplish what you need with the features we have planned for Q3.
    Hope that helps!
  4. Dan Aug 02, 2011
    I'm still a little confused on which folder to save the updated XML file. Do I save it in App_Data/Sitefinity/Configuration?

    Do I save the .css file in the same folder?

    Thanks for the otherwise useful tutorial!
  5. Dan Aug 03, 2011
    Is there a way to add traditional HTML elements such as H1-H6?
  6. Grisha 'Greg' Karanikolov Aug 10, 2011
    Hi Dan,

    You can save the configuration XML file anywhere you like, you just have to make sure to provide the correct path to it in the "Appearance" section of the advanced administration of Sitefinity. For example if you place yours in a folder called DanConfig in the root of your project, you need to put ~/DanConfig/NameOfYourToolsFile.xml in the StandardEditorConfiguration field.

    I recommend you save the CSS file(s) in the Global folder of your template, as this way it will be loaded automatically with the initialization of your website.

    As for adding HTML elements, you can use the Paragraph Style dropdown button (the tool name for that is FormatBlock). Feel free to add any HTML elements to it of your choice, as explained here.

    Please feel free to reach me directly at Greg at Telerik dot Com for discussing this in further detail (with no delays :-) )
  7. Guillermo Londono Feb 02, 2012
    In 4.4 use the following path for the XML 
    ~/App_Data/Sitefinity/Configuration/StandardToolsFile.xml
  8. Jacques Apr 03, 2012
    For the life of me I can't get this to work: 

    I've done the following: 
    1. Mapped the StandardEditorConfiguration value in Settings>Advanced to my own tools file. This works because I can remove and add tools. 
    2. I've added    <tool name="ApplyClass" />. That worked, it showed the drop down
    3. I've added specific classes that I want to show: 
      <classes>
        <class name="Heading Part" value=".headingThin" />
        <class name="Images Class" value=".img" />
        <class name="My Red Text" value=".redText" />
      </classes>. This did nothing. Note I added this to the root element not within a <tools> element
    4. I added a reference to the css file as follows:
        <cssFiles>
          <item name="~/Sitefinity/WebsiteTemplates/Template2012/App_Themes/CorporateTheme/Global/00editorStyles.css" />
        </cssFiles>. This did nothing so I tried this: 
      <tools>
        <cssFiles>
          <item name="~/Sitefinity/WebsiteTemplates/Template2012/App_Themes/CorporateTheme/Global/00editorStyles.css" />
        </cssFiles>
      </tools>
    None of this worked and I've tried resetting IIS clearing cache, the works, nothing. 

    What am I doing wrong? 

  9. Grisha 'Greg' Karanikolov Apr 11, 2012
    Hello,

    I've created this blog post as a followup! Jacques, I hope it helps you configure your project quickly!
  10. Jacques Apr 27, 2012
    Hi Grisha, 

    I've read the new blog post which doesn't exactly apply since we're working on a SF4.4 project, but the file structure seems to remain the same. I've repeated the process, restarted IIS and made sure my cache was cleaned out, but I still only see the Clear Class option in the drop down. 

    Regards,
    Jacques
  11. Grisha 'Greg' Karanikolov May 09, 2012
    Bummer, I guess you could contact support to help with this, Jacques. Any chances of upgrading to 5.0 SP1 ?
  12. Jacques May 31, 2012
    It turned out this was a bug in Sitefinity specifically with Firefox. As soon as I tried it in Chrome or IE, it worked. 
  13. Laura Jul 08, 2012
    what is the text box titles "Rad Editor's content area CSS file" used for then? Can we just link to a CSS file there?  Is this only if we do not was a style drop down?
  14. Grisha 'Greg' Karanikolov Jul 10, 2013
    Hi Laura,

    The "Rad Editor's content area CSS file" is the stylesheet that gets applied to the text box inside the RAD Editor - you can set styles for HTML elements which will get applied there. Be careful, as if you set styles for that, they might differ from what actually would appear on the frontend pages.

    Leave a comment