Sitecore Rich Text VariationsProfiles Richtext Editor in Sitecore

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 1

HTML Editor Profiles Continues… § 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. 2

HTML Editor Profiles Continues… § Web. config level § If you want to have same behavaiour for all rich text controls, update e Html. Editor. Default. Profile value in web. config with required profile path. § <setting name="Html. Editor. Default. Profile" value="/sitecore/system/Settings/Html Editor Profiles/Rich Text Full"/> You can create new HTML tool bar and update the Html. Editor. Default. Profile value to the newly created toolbar <setting name="Html. Editor. Default. Profile" value="/sitecore/system/Settings/Html Editor Profiles/Cutom Rich Text Toolbar"/> 3

Prevent From Stripping Script Tags § Rich text editor will strip all script tags by default. We can avoid this by setting web. config Html. Editor. Remove. Scripts value to false. § <setting name="Html. Editor. Remove. Scripts" value=“false"/> § In earlier sitecore versions, this need to be done by setting Allow. Scripts=”true” in the ~sitecoreshellControlsRich Text EditorEditor. Page. aspx file on the telerik: Rad. Editor control BUT to set it after all Document. Manager-XXX attributes. 4

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 “Insert. Flash”. § Step 2: Add JS to JS file RTECustomization. js Rad. Editor. Command. List["Insert. Flash"] = function (command. Name, editor, args) { var html = editor. get. Selection. Html(); var id; sc. Editor = editor; editor. show. External. Dialog( "/sitecore/shell/default. aspx? xmlcontrol=Rich. Text. Insert. Flash&la=" + sc. Language + "&selected. Text=" + escape(html), null, //argument 1100, 500, sc. Insert. Flash, //callback null, // callback args "Insert Flash Content", true, //modal Telerik. Web. UI. Window. Behaviors. Close, // behaviors false, //show. Status. Bar , false //show. Title. Bar); }; 5

Add a custom button in RTE - Continues § Step 3: Include JS file by changing web. configuration <clientscripts> <everypage /> <htmleditor> <script src=“[Path]/RTECustomization. js" language="javascript" key="richtextcustomization. Js" /> </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/Insert. Flash 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 , <Code. Beside Type="adiweb. ui. extensions. Insert. Flash, adiweb. ui. extensions"/> The loading and server side actions need to be performed are specified here. On. OK() method will do all required validations and this will be responsible for generating required html for the RTE field. 6

RTE Toolbar customizations Example 1: Adding more symbols to current symbols dropdown in toolbar. § Update <symbols> section in Tools. File. xml with required symbols HTML code. Tools. File. xml can be found in ~WebsitesitecoreshellControlsRich Text Editor folder § <symbol value="© " /> <!-- copy --> § <symbol value="¬ " /> <!-- not --> § New symbols added to the dropdown can be found here. 7

Custom RTE Dropdowns Example 2: - To add a new drop down in RTE toolbar, steps explains how to add a Math symbol dropdown. Content tree § 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. Insert. Math. Symbols § 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). 8

Custom RTE dropdowns - Continues… § Step 4: Add JS to JS file RTECustomization. js Rad. Editor. Command. List["Insert. Math. Symbols"] = function (command. Name, editor, args) { var val = args. get_value(); editor. paste. Html(val); args. set_cancel(true); } § Step 5: Include JS file by changing web. configuration <clientscripts> <everypage /> <htmleditor> <script src=“[Path]/RTECustomization. js" language="javascript" key="richtextcustomization. Js" /> </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. Insert. Math. Symbols { background-image: url('/library/img/square-root. png') !important; } 9

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. configurations <setting name="Web. Stylesheet" value="/lib/css/RTE. css" /> 10

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 ~sitecoreshellControlsRich Text EditorInsert. Link and the xml contains following a reference <Code. Beside Type="Sitecore. Shell. Controls. Rich. Text. Editor. Insert. Link. Form, Sitecore. Client"/> Get the class file Sitecore. Shell. Controls. Rich. Text. Editor. Insert. Link. Form. 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. <Code. Beside Type="Your. Name. Space. Your. Insert. Link. Form, Your. Assembly"/> § A sample implementation is available in following site; http: //stackoverflow. com/questions/19751132/sitecore-rich-text-editor-customisation-of-link -insertions 11

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 server failure. Please try again. " lost due to a timeout or a § 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 ~sitecoreshellControlsRich Text Editor Editor. Page. aspx (Default. aspx for earlier sitecore versions) § Add the following line after the </form> closing tag: <iframe id="radframe" visible="false" width="0 px" height="0 px" /> § 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 keep. Session. Alive() { // url should be changed to "/sitecore/keepalive. aspx" if you're running 5. 3 document. get. Element. By. Id("radframe"). src = "/sitecore/service/keepalive. aspx"; set. Timeout('keep. Session. Alive()', period); } set. Timeout('keep. Session. Alive()', period); </script> 12