Wednesday, February 13, 2013

Customizing Sitecore RTE

Sitecore uses telerik RAD editor for the RTE fields. The described behavior is by design for the editor and can be reproduced on the demo editor on telerik web site.
http://demos.telerik.com/aspnet-ajax/editor/examples/overview/defaultcs.aspx

There are two Profiles for this editor
1. Default Profile- There is limited options are available.


2. Full Profile- There is more text formatting options are available.


By default sitecore uses the default profile, we can set this to Full Profile by changing
<setting name="HtmlEditor.DefaultProfile" value="/sitecore/system/Settings/Html Editor Profiles/Rich Text Default"/>
To
<setting name="HtmlEditor.DefaultProfile" value="/sitecore/system/Settings/Html Editor Profiles/Rich Text Full"/>

If you want that whenever the Content in RTE will get enclosed in <p> tag when accept the changes, you can do with following way

1. add a class

public class WrapInP
{
 public void Process(SaveRichTextContentArgs args)
  {
    if(!string.IsNullOrEmpty(args.Content) && !args.Content.StartsWith("<p>"))
      {
        args.Content="<p>"+args.Content+"</p>";
      }
  }
}

2. Add the pipeline

<!-- Transforms markup from the Rich Text Editor before saving it as a rich text field value. -->
      <saveRichTextContent>
        <processor type="BusinessModules.WrapInP, BusinessModules"/>
      </saveRichTextContent>


This will get executed when you click accept button in RTE and paragraph will get inserted.

This is one example, we can do much more customization with RTE.

Thursday, January 26, 2012

Custom Popup Window in Sitecore RTE

There are many times, such a requirement to open the custom pop up which populate the contents or media like videos(.swf files) from the third party. In such cases we can use this type of pop up in RTE .












This is very easy to open your own custom pop up in RTE
  1.  Create a .aspx page such as OoyalaVideo.aspx. Write down your code code to get the content from third party.
  2. Open Rich Text Commands.js file which is at the location "\Website\sitecore\shell\Controls\Rich Text Editor\"
  3. Put the script part highlighted in the below screen shot