1

Sitecore Rich Text Variations(Profiles)

Richtext Editor in Sitecore supports multiple profiles and this can be choosen based on user requirements. Sitecore provides robust toolbars with different editor options which helps content authors to edit the content spontaneously.The sitecore html profiles are basically availble in Core database - /sitecore/system/Settings/Html Editor Profiles. The available profiles are listed below.

RTE Default - /sitecore/system/Settings/Html Editor Profiles/Rich Text Default

RTE Medium - /sitecore/system/Settings/Html Editor Profiles/Rich

Text Medium

2

RTE IDE - /sitecore/system/Settings/Html Editor Profiles/Rich Text IDE

RTE FULL - /sitecore/system/Settings/Html Editor Profiles/Rich Text Full

 

This profile configuration can be done in two levels.

Field level - Set the source property of the field with profile path. Using this approach you can give different editor options for different fields.

HTML Editor Profiles Continues…

3

HTML Editor Profiles Continues…

Web.config level

If you want to have same behavaiour for all rich text controls, update e HtmlEditor.DefaultProfile value in web.config with required profile path.

<setting name="HtmlEditor.DefaultProfile" value="/sitecore/system/Settings/Html Editor Profiles/Rich Text Full"/>

You can create new HTML tool bar and update the HtmlEditor.DefaultProfile value to the newly created toolbar

<setting name="HtmlEditor.DefaultProfile" value="/sitecore/system/Settings/Html Editor Profiles/Cutom Rich Text Toolbar"/>

4

Prevent From Stripping Script Tags

Rich text editor will strip all script tags by default. We can avoid this by setting web.config HtmlEditor.RemoveScripts value to false.

<setting name="HtmlEditor.RemoveScripts" value=“false"/>

In earlier sitecore versions, this need to be done by setting AllowScripts=”true” in the ~\sitecore\shell\Controls\Rich Text Editor\EditorPage.aspx file on the telerik:RadEditor control BUT to set it after all DocumentManager-XXX attributes.

5

Add a custom button in RTE

In most of the projects, we may need to add new buttons to RTE to do custom action and here we will discuss the steps to create a new custom button. Here the requirement is to add a custom button to insert flash media.

Step 1:  In the core database, add an item of type /sitecore/templates/System/Html Editor Profiles/Html Editor Button below /sitecore/system/Settings/Html Editor Profiles/Rich Text Full/Toolbar 1. Assign an icon to you item and in the field “Click” add an id for your action. In this example the field “Click” is set to “InsertFlash”.

Step 2: Add JS to JS file RTECustomization.js

RadEditorCommandList["InsertFlash"] = function (commandName, editor, args) {

var html = editor.getSelectionHtml(); var id; scEditor = editor;

editor.showExternalDialog(

"/sitecore/shell/default.aspx?xmlcontrol=RichText.InsertFlash&la=" + scLanguage + "&selectedText=" + escape(html),

null, //argument

1100,500,scInsertFlash, //callback null, // callback args "Insert Flash Content",true, //modal

Telerik.Web.UI.WindowBehaviors.Close, // behaviors false, //showStatusBar ,false //showTitleBar);

};

6

Add a custom button in RTE - Continues

Step 3: Include JS file by changing web.config configuration

<clientscripts> <everypage /> <htmleditor> <script src=“[Path]/RTECustomization.js" language="javascript" key="richtextcustomizationJs" /> </htmleditor> </clientscripts>

Step 4: A popup window will open up once user clicks on the button and this is generated from the XML placed /sitecore/shell/Controls/Rich Text Editor/InsertFlash Folder, XML file defines structure of the modal popup and JS file will contain required JS functions. Sample files are attached here.

Step 5: XML contains a reference to code behind file ,

<CodeBeside Type="adiweb.ui.extensions.InsertFlash, adiweb.ui.extensions"/>

The loading and server side actions need to be performed are specified here.

OnOK() method will do all required validations and this will be responsible for generating

required html for the RTE field.

InsertFlash.xml InsertFlash.js

InsertFlash.cs

7

RTE Toolbar customizations

Example 1: Adding more symbols to current symbols dropdown in toolbar.

Update <symbols> section in ToolsFile.xml with required symbols HTML code. ToolsFile.xml can be found in ~Website\sitecore\shell\Controls\Rich Text Editor\ folder

<symbol value="&#169;" /> <!-- copy -->

<symbol value="&#172;" /> <!-- not -->

New symbols added to the dropdown can be found here.

8

Custom RTE DropdownsExample 2:- To add a new drop down in RTE toolbar, steps explains how to add a Math symbol dropdown.

Step 1 :Switch to the core database and add a new button in the toolbar of the RTE profile you are using, /sitecore/system/Settings/Html Editor Profiles/Rich Text Full/Toolbar 1

Step 2: Duplicate Insert Symbols item, and this will create new item using /sitecore/templates/System/Html Editor Profiles/Html Editor Custom Drop Down Button, Give a name in the 'Click' field, e.g. InsertMathSymbols

Step 3: create dropdown items below this using /sitecore/templates/System/Html Editor Profiles/Html Editor List Item template. We can specify Header and value here, the 'Header' value is what will be displayed in the dropdown list and 'Value' is what will get inserted (e.g. your math symbols).

Content tree

9

Custom RTE dropdowns - Continues…

Step 4: Add JS to JS file RTECustomization.js

RadEditorCommandList["InsertMathSymbols"] = function (commandName, editor, args) {

var val = args.get_value();

editor.pasteHtml(val);

args.set_cancel(true);

}

Step 5: Include JS file by changing web.config configuration

<clientscripts> <everypage /> <htmleditor> <script src=“[Path]/RTECustomization.js" language="javascript" key="richtextcustomizationJs" /> </htmleditor> </clientscripts>

Step 6: If you used the Drop Down Button then also add a css style to set the icon, it should also be the same name as the 'Click' field. This can be done on Editor.aspx

span.InsertMathSymbols

{ background-image:url('/library/img/square-root.png') !important; }

10

Including New RTE CSS

Sometimes content authors need to select custom styles, sitecore provides this option by just including a new style sheet. Content authors can preview the styles and then they can apply these styles to the text.

We can include new style sheet by changing web.config configurations

<setting name="WebStylesheet" value="/lib/css/RTE.css" />

11

Customizing Existing RTE buttons

Overriding the existing button features can be done by changing the code behind file for the buttons. Suppose we need to change the existing behavior of Insert Link in the RTE. In most cases this will be implemented xmal and all the properties will be available in XML file, in this case xml is available in below location ~\sitecore\shell\Controls\Rich Text Editor\InsertLink and the xml contains following a reference

<CodeBeside Type="Sitecore.Shell.Controls.RichTextEditor.InsertLink.InsertLinkForm,Sitecore.Client"/>

Get the class file Sitecore.Shell.Controls.RichTextEditor.InsertLink.InsertLinkForm.cs using ILSpy or Dotpeek and you can create your own custom class file with required logical additions. After this just change the reference to newly created code file.

<CodeBeside Type="YourNameSpace.YourInsertLinkForm,YourAssembly"/>

A sample implementation is available in following site;

http://stackoverflow.com/questions/19751132/sitecore-rich-text-editor-customisation-of-link-insertions

12

Timeout Issues in RTE

When content authors use RTE for a long period of time and try to save their work by clicking Accept Changes, the following error occurs:

"The operation could not be completed. Your session may have been lost due to a timeout or a server failure. Please try again."

This issue occurs because ASP.NET session times out. In order to automatically preserve the session, try using the following workaround and this need to be done ~\sitecore\shell\Controls\Rich Text Editor\ EditorPage.aspx (Default.aspx for earlier sitecore versions)

Add the following line after the </form> closing tag:<iframe id="radframe" visible="false" width="0px" height="0px" />

To the bottom of <head> section of the page add the following script:

<script type="text/javascript" language="javascript">  // period defaults to 5 minutes; in case ASP.NET session  // timeout is shorter - change the value accordingly  var period = 300000;  

  function keepSessionAlive()

  {    // url should be changed to "/sitecore/keepalive.aspx" if you're running 5.3

    document.getElementById("radframe").src = "/sitecore/service/keepalive.aspx";

    setTimeout('keepSessionAlive()', period);  }

  setTimeout('keepSessionAlive()', period);</script>