Archive

Rich Text Editor Series

This is the third post in my series about the Rich Text Editor (RTE) in Sitecore. You can find the first post which is about the basics of setting up the RTE here.

Copy-paste wrecks your day

Now you set up your editor and blocked access to the HTML edit buttons, so you might be thinking that you are safe and the authors cant possibly wreck your site now. Well, they are a ressourceful people those authors and it won’t take them long to figure out that they can copy-paste all kinds of HTML or even word-formatted text into your beautiful W3C compliant website. And having word formatted tags and other shenanigans in your website, definitely does not make it W3C compliant, uniform or maintainable.

Word formatted HTML (It rimes with 'Hell' for a reason)

Word formatted HTML (It rimes with ‘Hell’ for a reason)

Luckily the Rich Text Editor is a powerful tool and comes with mechanics to strip tags when pasting.

How to strip tags automatically

Under the hood of the RTE lies the Telerik RadEditor. This control has a property called “StripFormattingOnPaste” which is described on teleriks website here: http://www.telerik.com/help/aspnet/editor/radeditor-telerik.webcontrols.radeditor-stripformattingonpaste.html

As you can see in the link above, the editor provides many different ways to strip tags. In this example we are going to use the MSWordRemoveAll option, which strips all those nasty word tags.

What NOT to do

Some guides on the internet will tell you that you can simply go into the filesystem in “www\sitecore\shell\Controls\Rich Text Editor” and start changing the markup and scripts of the editor. While this might work, it is NOT the way to do it. These files ships with Sitecore and as such can be overwritten at any time, when you either upgrade sitecore or install a sitecore patch. Generally you should never edit files that ships with Sitecore. In Pentia we live by this rule as we use a component based development approch, creating our custom code in well defined components which is then added ontop of Sitecore. This way we don’t break sitecore and keep the solution able to be updated or patched.

Using the EditorConfiguration class and SetupEditor method

Sitecore supplies a way to configure the editor without changing the files that comes with sitecore. You can extend the ‘Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration’ class and override the ‘SetupEditor’ method, where you can set all the settings you need on the editor. This method is then run everytime the editor is loaded.

To strip all word tags, simply do this:

using Telerik.Web.UI;
using Sitecore.Data.Items;

namespace CodeBuildPlay
{
  public class RichTextEditorConfiguration : Sitecore.Shell.Controls.RichTextEditor.EditorConfiguration
  {
    public RichTextEditorConfiguration(Item profile)
      : base(profile)
    {
    }

    protected override void SetupEditor()
    {
      base.SetupEditor();
      Editor.StripFormattingOptions = EditorStripFormattingOptions.MSWordRemoveAll;
      //Set additional properties of the Editor here if needed.
    }
  }
}

Alas, a caveat

All this applies to the Rich Text Editor. Unfortunately it is still possible to paste html directly into in the page editor in Sitecore. In the wededit version of the Rich Text Field, anything can be pasted and there is no way to strip anything. How Sitecore have missed this, is beyond me, but they confirmed, in a supportcase I opened, that there’s no way around it at the moment.

Text pasted from word in page edit

Text pasted from word in page edit

 

 

Enjoy!

Please leave a “Like” and/or use the share buttons, if you found this guide usefull

Advertisements

This is the second post in a series about the Rich Text Editor (RTE) in Sitecore. You can find the first post which is about the basics of setting up the RTE here.

Restrict the Authors

So you have now created your own HTML Editor Profile and configured your site to using it. The authors can now no longer press a button to insert those nasty tables and use Comic Sans! Hooray!! Well… they can still switch to HTML mode and insert and edit the raw HTML of the field. So nothing is stopping them from googling their favourite spinning icon inside a table with text in Comic Sans and paste all of it into the HTML.

There are 2 places that the authors have access to the raw HTML. In the bottom of the Rich Text Editor, there is a pane that gives access to the raw HTML.

HTML edit button in editor

The HTML edit button in the Rich Text Editor

And in the Content Editor, just above a rich text field, there’s a link that says “Edit HTML” which does just that.

HTML edit button in the content editor

HTML edit button in the content editor

Configuring HTML access

Luckily Sitecore makes this task easy as it is possible to restrict access to these functions through access rights. This means that you can block HTML edit from your Authors while administrators still can edit HTML.

In the Core database, navigate to ‘/sitecore/system/Field types/Simple Types/Rich Text/Menu’. Here you will find the “Suggest fix” and “Edit HTML” which are shown as links in the Content Editor as seen above. We also want to remove the ‘Suggest fix’ as this function sometimes can break your HTML if you don’t know what you are doing.

Restrict HTML edit and suggest fix In the Content Editor

Restrict HTML edit and suggest fix In the Content Editor

Select the Edit HTML item and open the Access Viewer found in the menu under the Security tab. Here you will see what kind of access rights are assigned. You will need to find out which role your Authors have. Usually it will be the “Author” role, but this usually differs between various sites. Still having the Edit HTML, open the security Editor from the menu.

The Security Editor

The Security Editor

In this case the Authors don’t have any special rights assigned, so we need to select the using the “Select” button in the top left. This opens a pop up window where we can find the Authors role and select it. Then, ensuring that the Authors role is selected in the pane above, click the ‘x’ on the ‘Read’ column beside the Edit HTML item. Then do the same for the ‘Suggest fix’ item.

Remove the Read rights from both items

Remove the Read rights from both items

This fixed the problem in the content editor. Close the security editor and access viewer and navigate to ‘/sitecore/system/Settings/Html Editor Profiles/Rich Text XYZ/WebEdit Buttons/Edit html’ (the path of the profile of your Rich Text Editor), and repeat the process above to remove the Read access rights for the Authors.

Your Authors can now no longer Edit HTML in the Content Editor or in the RTE.

The next article in this series about the Rich Text Editor in Sitecore, will show you how to prevent your Authors from pasting formatted word text, HTML tags etc. directly into the editor, destroying your W3C validated site.

Enjoy!

Please leave a “Like” and/or use the share buttons, if you found this guide usefull

This is the first post in a coming series about the Rich Text Editor (RTE) in Sitecore.

This post is going to be very basic for many, but will be a good place to start for people new to the subject.

What is the Rich Text Editor in Sitecore

The Rich Text Editor is the main tool for authors in Sitecore for entering and editing the content of a website. It is the tool through which text is maintained in Rich Text fields in Sitecore templates. It can be used in both the Content Editor and the Page Editor in a popup window, but is not to be confused with the webedit field in the page editor.

Opening the Rich Text Editor from the content editor

Opening the Rich Text Editor from the content editor

Opening the Rich Text Editor from the page editor

Opening the Rich Text Editor from the page editor

Below you see the Rich Text Editor with all standard functions in the ‘Full’ configuration enabled:

The Rich Text Editor in 'Full' configuration

The Rich Text Editor in ‘Full’ configuration

As you can see, the RTE comes with all kinds of wonderfull features, such as font and style manipulation, table creation, pasting from word with (or without) script tag stripping, javascript insertion, raw HTML editing etc.

All wonderfull tools for a group of well trained and taimed content editors, who knows HTML and CSS to the bone and can’t make mistakes, ever… Well, unfortunaltely this does not describe the standard content editor, which more often than not, does not have HTML and CSS as main education areas. So you should very carefully think about shat kind of tools you actually want to offer your content editors.

How to configure the Rich Text Editor

Configuring the RTE in Sitecore is not hard and it involves 2 steps. Setup a ‘HTML Editor Profile’ and configuring the website to use this profile.

Setup a HTML Editor Profile

Login to sitecore and navigate to ‘/sitecore/system/Settings/Html Editor Profiles’. Here you see the different profiles that Sitecore comes with. To setup a profile, remember to copy one of the existing profiles and edit in the copy, rather than editing and possibly destroying one of the original profiles.

When you open for example the ‘Rich Text Full’ profile, you see a list of folders that contains items that can be buttons or contain items that support som of the buttons in the editor. These are the items that you want to delete or change to limit the functionality in the editor.

Try copying the “Rich Text Full” to “Rich Text XYZ” and try deleting the ‘Toolbar 3’ folder.

HTML editor profiles

HTML editor profiles

Configure the website to use the custom HTML Editor Profile

Open your web.config and locate the setting ‘HtmlEditor.DefaultProfile’. Change the value to the name of your custom profile.

Web.config setting

Web.config setting

Now when editing a Rich Text field, you will see the editor using your new profile.

No toolbar 3

No toolbar 3

You can get quite far as to setting up the editor this way. The next couple of posts will look at restricting functions based on access righst and creating custom buttons.

Enjoy!

Please leave a “Like” and/or use the share buttons, if you found this guide usefull

Sitecore tackled

Small posts about Sitecore and solutions

Cooking with Sitecore

Diary of my experience working on great CMS called Sitecore

Visions In Code

Never look back

Cook 4 Passion

Food food fooooood. We love fooooooooood !!!

Eldblom

Sitecore, Digital Marketing, Work, Life and so on...

SitecoreJunkie.com

Down the DLL Rabbit Hole

frontendrush

Arash Sarfehjou

DotNetCoder.dk

.NET code and tweaks

.NET code and tweaks

The grumpy coder.

.NET code and tweaks

Alan Coates - Sitecore/.NET blog

Pushing Sitecore to the limits and beyond

Patrick Delancy

i write code

Laub plus Co

.NET code and tweaks

iStern Blog

A simple Code Blog

Brian Pedersen's Sitecore and .NET Blog

Sitecore, C#, ASP.NET for developers