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

My 3 favorite customizations to Sitefinity’s Rich Text Editor

by Gabe Sumner

A few months ago Grisha (aka Greg) blogged about customizing Sitefinity’s Rich Text WYSIWYG editor (RadEditor).  Telerik sells RadEditor as a stand-alone product and it has a ton of features that can be fully utilized in Sitefinity.

I’m notoriously picky about my content editing environment (just ask the Sitefinity team) and I’ve been working a lot inside Sitefinity’s Rich Text editor.  Below are 3 customizations that I personally consider a must-have for my own authoring environment.

#1 – Move the FormatBlock outside the ‘More Features’ section

By default Sitefinity’s FormatBlock dropdown is only available by clicking the “More Formatting Options”.

Sitefinity's FormatBlock dropdown in the More Features section

This is a dropdown I use constantly.  Which meant clicking “More Formatting Options” became my default experience.  To save myself a click I moved this dropdown to the default section.

Sitefinity's FormatBlock dropdown in the Basic options section

Update:  This is being implemented out-of-the-box in Sitefinity 4.2 SP1.  So you won’t need to do this yourself.  However, it’s worth knowing that RadEditor’s toolbar is under your control.  If you don’t like it, modify it.

#2 – Display empty (unnecessary) tags

The Sitefinity team has tried very very hard to make our Rich Text editor bullet-proof and predictable.  This means zero embedded styling, malformed HTML or unnecessary HTML.  To that end, we welcome ANY reproducible examples that produce bad HTML.

Screwed up HTML in Sitefinity's Rich Text editor

However, despite our best attempts I still occasionally get strangeness.  In the case of empty tags (<ul> </ul>) this HTML has no visible impact on the content.  It’s only while looking at the HTML that I realize I have 15 empty HTML blocks that serve no purpose.

To combat this I applied the following min-height style to RadEditor:

/* This ensures we'll see empty tags in RadEditor */
h1, h2, h3, h4, div, p, ul, ol, pre, blockquote { min-height: 1em; }

I’ve also heard other customers apply subtle borders to highlight the boundaries of these HTML elements.  It’s completely up to you.  The takeaway here is that you can apply special styles to RadEditor that don’t get applied to your actual web site.  Very handy!

#3 – Modify the styling to match the actual web site

It’s a dirty secret that WYSIWYG editors often aren’t WYSIWYG.  In fact, once the author clicks Publish, it’s typical for all the content to get reformatted and change when the real web site styling gets applied to it.  The Rich Text editing environment typically uses very different styling than the actual web site.

It’s very difficult to get a 1 to 1 editing experience (where WYS is WYG), but we can get a lot closer by applying some special styling to Sitefinity’s Rich Text editor.  Here is my own example:

Custom styles applied to Sitefinity's Rich Text Editor

This styling is much closer to how the content will look when it’s published.  In fact, when I switch into full screen mode, it feels like Sitefinity is no longer involved.

How did I do all of this?

Everything you see above was accomplished with 2 files and 1 configuration setting. 

Custom RadEditor configuration and styles in Visual Studio's Solution Explorer

  1. radeditor.css – This file contains the CSS styling that I want to apply to RadEditor.
  2. ToolsFile.xml – This file contains the configuration settings for RadEditor.

I posted the source-code to GitHub:

The last step is to tell Sitefinity about this new configuration file.

Re-configuring RadEditor in Sitefinity's Configuration Editor

Where to go from here?

This is just the beginning of what can be done with RadEditor.  Feel free to explore adding a dropdown for custom styles or adding new tools.  All of the details can be found in the RadEditor documentation.

10 comments

Leave a comment
  1. Jochem Sep 26, 2011
    Hey Gabe,

    Awesome post and you're completely right, this is exactly what makes the RadEditor so powerfull.

    Just to point out one obvious thing:
    You have to move the "ToggleScreenMode" toolname inside the top toolbar to make it available without switching to 'More formatting options'.

    And just to point out...
    On Grisha's blog post he recommends moving the Radeditor.css file inside the global folder of your theme so it is assured that styles are applied throughout the entire site.


    I recommend using Gabe's approach to NOT put the Radeditor.css inside the global folder.

    This is because as you can see in Gabe's example where he uses a font declaration on the body tag. If put inside the global folder, this class will also be applied to Sitefinity BE in general when editing pages.

    'Georgia' in itself isn't a bad font but you might get unexpected page-editing screens when applying more exotic combinations of web-fonts, sizes and colors.
  2. Grisha 'Greg' Karanikolov Sep 28, 2011
    I agree, Jochem, however I do believe what Gabe describes here is different than what I address in my post.

    Here Gabe creates a style sheet that should style the contents of the canvas of the RadEditor. It isn't required anywhere else except for the RadEditor.

    In my post I show how you can force users to use your custom CSS classes . I connect the ApplyClass dropdown to a CSS file that contains a set of custom CSS rules, which you could apply to different HTML elements. If these CSS rules are not put in the Global folder, after applying them through the RadEditor they would take effect only inside the RadEditor; However on the pages themselves, as they do not reference this stylesheet (it's not loaded automatically for all pages), the new formatting will be disregarded.

    See, the difference is that Gabe's CSS styles the whole canvas; it contains rules for <h1>, body, <a> elements, and so on. My CSS only contains very specific custom classes like .bold , .redText, etc, which should be used respectively if you want to apply these effects to some content. They should not affect any other content in an unexpected way (normally you would put an element in a .bold class only if it should be bold, right?).

    Hope this clears it a bit!

    Greg
  3. Mike Badgley Sep 29, 2011
    Gabe - any ideas on how this sort of thing can be applied to the "HTML" edit mode? The default font is Tahoma, which is not an idea font to be using for text editing. Is there a way I can change this to something else - ideally courier or some other monospace font?
  4. Nancy May 17, 2012
    I am working in Sitefinity 5 and I do not have an Extensions directory in my project. The standard editor configuraiton lists Telerik.Sitefinity.Resources.Themes.StandardToolsFile.xml for the file. How can I access that file to grab it and use it as a starter point for making my own? Where is the file actually located?
  5. Nancy May 17, 2012
    I figured out how to do this in Sitefinity 5. Rather than editing it at the file system level, you can edit this XML in the admin interface. The settings can be found under Administration > Basic Settings > Text Editor. I just though I'd share this in case anyone else runs into the same situation.
  6. cheapcarhireguide Jan 24, 2013
    We were able to provide you with some of the facts
    above but there is still plenty more to write about in subsequent articles.

  7. Webseite Apr 24, 2013

    This is great content that your are sharing here with us. Very well written information comes with a great insight into this specific concept. 
  8. Webseite Apr 24, 2013

    This is great content that your are sharing here with us. Very well written information comes with a great insight into this specific concept. 
  9. NY family lawyer Jan 30, 2014
    we can get a lot closer by applying some special styling to Sitefinity’s Rich Text editor.
  10. console wars are stupid Feb 06, 2014
    Thanks for damning us, and making us read stories of painting fences.

    Leave a comment