These are my notes for the Making the Most of RadEditor in Sitefinity webinar.
General Information
Enabling Existing RadEditor Tools
The Sitefinity RadEditor configuration file is located at:
~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml
The RadEditor appears in the following ControlTemplates:
~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplate.ascx
Full list of tools available in RadEditor
Enabling EVERYTHING in RadEditor:
<root>
<tools dockable="false">
<tool name="ConvertToUpper" />
<tool name="ConvertToLower" />
<tool name="RealFontSize" />
</tools>
<tools dockable="false">
<tool name="ToggleScreenMode" />
<tool name="ToggleTableBorder" />
<tool separator="true"/>
</tools>
<tools dockable="false">
<tool name="Zoom" />
<tool name="ModuleManager" />
<tool name="ToggleDocking" />
</tools>
<tools dockable="false">
<tool name="FindAndReplace" />
<tool name="Print" />
<tool separator="true"/>
</tools>
<tools dockable="false">
<tool name="PasteFromWord" />
<tool name="PasteFromWordNoFontsNoSizes" />
<tool name="PastePlainText" />
</tools>
<tools dockable="false">
<tool name="PasteAsHtml" />
<tool name="Undo" />
<tool name="Redo" />
<tool separator="true"/>
</tools>
<tools dockable="false">
<tool name="FormatStripper" />
<tool name="Help" />
<tool name="AboutDialog" />
</tools>
<tools dockable="false">
<tool name="ImageManager" />
<tool name="ImageMapDialog" />
<tool separator="true"/>
</tools>
<tools dockable="false">
<tool name="AbsolutePosition" />
<tool name="InsertTable" />
<tool name="ToggleTableBorder" />
</tools>
<tools dockable="false">
<tool name="InsertSnippet" />
<tool name="InsertFormElement" />
<tool separator="true"/>
</tools>
<tools dockable="false">
<tool name="InsertDate" />
<tool name="InsertTime" />
<tool name="FlashManager" />
</tools>
<tools dockable="false">
<tool name="MediaManager" />
<tool name="DocumentManager" />
<tool separator="true"/>
</tools>
<tools dockable="false">
<tool name="LinkManager" />
<tool name="Unlink" />
<tool name="InsertSymbol" />
</tools>
<tools dockable="false">
<tool name="InsertCustomLink" />
<tool name="TemplateManager" />
<tool separator="true"/>
</tools>
<tools dockable="false">
<tool name="InsertParagraph" />
<tool name="FormatBlock" />
<tool name="Indent" />
</tools>
<tools dockable="false">
<tool name="Outdent" />
<tool name="JustifyLeft" />
<tool name="JustifyCenter" />
<tool name="JustifyRight" />
</tools>
<tools dockable="false">
<tool name="JustifyFull" />
<tool name="JustifyNone" />
<tool name="InsertUnorderedList" />
</tools>
<tools dockable="false">
<tool name="InsertOrderedList" />
<tool name="InsertHorizontalRule" />
<tool name="Bold" />
</tools>
<tools dockable="false">
<tool name="Italic" />
<tool name="Underline" />
<tool name="StrikeThrough" />
</tools>
<tools dockable="false">
<tool name="Superscript" />
<tool name="Subscript" />
<tool name="FontName" />
</tools>
<tools dockable="false">
<tool name="FontSize" />
<tool name="ForeColor" />
<tool name="BackColor" />
</tools>
<tools dockable="false">
<tool name="FormatCodeBlock" />
<tool name="ApplyClass" />
<tool name="InsertCustomLink" />
</tools>
<links>
<link name="telerik" href="http://www.telerik.com">
<link name="Products" href="http://www.telerik.com/products">
<link name="r.a.d.controls suite" href="http://www.telerik.com/radcontrols" />
<link name="r.a.d.navigation suite" href="http://www.telerik.com/radnavigation" />
<link name="r.a.d.editor" href="http://www.telerik.com/radeditor" />
<link name="r.a.d.designer" href="http://www.telerik.com/raddesigner" />
<link name="r.a.d.spell" href="http://www.telerik.com/radspell" />
<link name="r.a.d.chart" href="http://www.telerik.com/radchart" />
<link name="r.a.d.menu" href="http://www.telerik.com/radmenu" />
<link name="r.a.d.treeview" href="http://www.telerik.com/radtreeview" />
<link name="r.a.d.panelbar" href="http://www.telerik.com/radpanelbar" />
<link name="r.a.d.rotator" href="http://www.telerik.com/radrotator" />
<link name="r.a.d.tabstrip" href="http://www.telerik.com/radtabstrip" tooltip="Tooltip" />
</link>
<link name="Purchase" href="http://www.telerik.com/purchase" />
<link name="Support" href="http://www.telerik.com/support" />
<link name="Client.Net" href="http://www.telerik.com/clientnet" />
</link>
<link name="Microsoft">
<link name="Main Site" href="http://www.microsoft.com" />
<link name="MSDN Online" href="http://msdn.microsoft.com" />
<link name="Windows Update" href="http://windowsupdate.microsoft.com" />
</link>
<link name="Search Engines">
<link name="Google" href="http://www.google.com" />
<link name="Yahoo" href="http://www.yahoo.com" />
<link name="AltaVista" href="http://www.altavista.com" />
</link>
</links>
<snippets>
<snippet name="Order Confirmation">
<![CDATA[
<div style="width:300px;border:2px outset #D8D2BD;padding:34px;font-family:Arial, Verdana; font-size:11px;background-color:#F1EFE6;">
Dear ____________________,<br />
Thank you for inquiring about ____________. Your request will be processed in 48 hours and shipped at the address you have provided.
<br /><br />
<b>Please, contact us if you have any problems.</b>
</div>
]]>
</snippet>
<snippet name="Email Signature">
<![CDATA[
<div style="margin-top:30px;width:80%;border-top:1px dotted gray;padding-top:4px;font-family:Arial, Verdana; font-size:11px;">
<b>John Wigham</b><br />
Senior Web Developer<br />
<a href="#">john@mysite.com</a>
<br />
<br />
<i>Disclaimer: The contents of this e-mail are privileged and confidential and intended for the addressees at the specified e-mail addresses only.</i>
</div>
]]>
</snippet>
<snippet name="Problem Report Feedback">
<![CDATA[
<div style="width:300px;border:2px outset #D8D2BD;padding:34px;font-family:Arial, Verdana; font-size:11px;background-color:#F1EFE6;">
Hi ____________________,<br />
Thank you for reporting this issue. We have verified the problem and it is logged in our system. We will notify you once we have a solution.
<br /><br />
<b>Please, contact us if you have any problems.</b>
</div>
]]>
</snippet>
</snippets>
<symbols></symbols>
<fontNames> </fontNames>
<fontSizes>
</fontSizes>
<realFontSizes>
<item value="11px"></item>
<item value="12px"></item>
<item value="13px"></item>
<item value="14px"></item>
<item value="18px"></item>
<item value="22px"></item>
</realFontSizes>
<colors></colors>
<paragraphs></paragraphs>
<classes>
<class name="Add CssClasses collection here:" value=".attention" />
<class name="EditorToolsFile.xml" value=".read" />
</classes>
<dialogParameters></dialogParameters>
<languages></languages>
<contextMenus>
</contextMenus>
</root>
Applying Custom Styles
Add the ApplyClass tool to ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml:
<tool name="ApplyClass"/>
Add the custom styles to the <classes> section in ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml:
<classes>
<class name="Clear Class" value="" />
<class name="Important" value=".important" />
<class name="No Bottom Padding" value=".nobottompadding" />
<class name="Subheading" value=".subheading" />
</classes>
Add the custom styles to a separate css file:
.subheading
{
color: #F37C33;
font-weight: bold;
padding-bottom: 10px !important;
margin-bottom: 0 !important;
}
.nobottompadding
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.important
{
color: Red;
font-weight: bold;
}
body
{
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
color: #444444;
line-height: 17px;
font-size: 12px;
}
Add a reference to the external custom css file to the RadEditor tag in ~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplate.ascx:
<CssFiles>
<telerik:EditorCssFile Value="~/App_Themes/Standard/editor_styles.css" />
</CssFiles>
Cleaning Word Formatting and other Garbage Automatically
Cleaning Word Formatting
The ControlTemplate used by the Generic Content Control Editor is located at:
~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplate.ascx
Add a StripFormattingOnPaste="AllExceptNewLines" property to the <RadEditor> server-side tag:
<telerik:RadEditor StripFormattingOnPaste="All" runat="server">
</telerik:RadEditor>
Firefox Issues:
Setting Preferences for the Mozilla Rich Text Editing Demo
Adding Custom Snippets
Add the InsertSnippet tool to ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml:
<tool name="InsertSnippet" />
Add new custom snippet to ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml:
<snippet name="Business Card">
<![CDATA[
<div style="padding: 10px; border: solid 1px black; margin-bottom: 10px;">
<h2>Bob Anderson</h2>
<div>Phone: (123) 555-5555</div>
<div>Mobile: (123) 555-5555</div>
<div>Email: <a href="mailto:email@domain.com">email@domain.com</a></div>
</div>
]]>
</snippet>
Adding a Custom Dialog
Add Custom Dialogs
Add the following style to ~/Sitefinity/Admin/Themes/Default/CustomDialogs.css
.BlogPostLink
{
background-position: -886px center;
}
Add the BlogPostLink tool to ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml:
<tool name="BlogPostLink" />
Create a ~/Sitefinity/UserControls/Dialogs/BlogPostLink.aspx ASPX page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BlogPostLink.aspx.cs" Inherits="Sitefinity_UserControls_Dialogs_BlogPostLink" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Insert a Blog Link</title>
<link type="text/css" rel="stylesheet" href="~/Sitefinity/UserControls/Dialogs/CustomDialogs.css" />
<link type="text/css" rel="stylesheet" href="~/Sitefinity/UserControls/Dialogs/RadControlsSkins.css" />
<link type="text/css" rel="stylesheet" href="~/Sitefinity/Admin/Themes/Default/CustomDialogs.css" />
<link type="text/css" rel="stylesheet" href="~/sitefinity/admin/Themes/Default/RadControlsSkins.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="ctrlProps" id="div1">
<div class="ctrlContent">
<div class="uploadPane">
<p class="mand">* Mandatory fields</p>
<h2>Insert a blog link</h2>
<div class="dialogBox">
Hello
<p id="ctl06_ctl00_ctl00_actionButtons" class="button_area bottom">
<a href="#" onclick="insertLink();" style="display: block; " class="CmsButLeft ok" id="submitBtnEnabled"><strong class="CmsButRight light">Insert</strong></a>
<span class="cmsorlbl"> or </span>
<a href="#" onclick="getRadWindow().close();" class="cmscclcmd">Cancel</a>
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function getRadWindow()
{
if (window.radWindow)
{
return window.radWindow;
}
if (window.frameElement && window.frameElement.radWindow)
{
return window.frameElement.radWindow;
}
return null;
}
function insertLink()
{
getRadWindow().close("Hello world!");
}
</script>
</form>
</body>
</html>
Add a reference to the custom dialog in ~/Sitefinity/Admin/ControlTemplates/Generic_Content/EditorTemplate.ascx:
Telerik.Web.UI.Editor.CommandList["BlogPostLink"] = function(commandName, editor, args)
{
var editorArgs = editor.getSelectedElement();
var myCallbackFunction = function(sender, args)
{
editor.pasteHtml(args);
}
editor.showExternalDialog(
'<%= Page.ResolveUrl("~/Sitefinity/UserControls/Dialogs/BlogPostLink.aspx") %>',
editorArgs,
750,
515,
myCallbackFunction,
null,
'BlogPostLink',
false,
Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
false,
false)
};
Create the ~/Sitefinity/UserControls/Dialogs/BlogPostLink.aspx file:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BlogPostLink.aspx.cs" Inherits="Sitefinity_UserControls_Dialogs_BlogPostLink" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Insert a Blog Link</title>
<link type="text/css" rel="stylesheet" href="~/Sitefinity/UserControls/Dialogs/CustomDialogs.css" />
<link type="text/css" rel="stylesheet" href="~/Sitefinity/UserControls/Dialogs/RadControlsSkins.css" />
<link type="text/css" rel="stylesheet" href="~/Sitefinity/Admin/Themes/Default/CustomDialogs.css" />
<link type="text/css" rel="stylesheet" href="~/sitefinity/admin/Themes/Default/RadControlsSkins.css" />
</head>
<body>
<form id="form1" runat="server">
<div class="ctrlProps" id="div1">
<div class="ctrlContent">
<div class="uploadPane">
<p class="mand">* Mandatory fields</p>
<h2>Insert a blog link</h2>
<div class="dialogBox">
<asp:Repeater ID="BlogPosts" runat="server">
<HeaderTemplate>
<ul style="padding: 0; margin: 0;">
</HeaderTemplate>
<ItemTemplate>
<li style="padding-bottom: 5px; margin-bottom: 0;"><a href="#" onclick="insertLink('<%# DataBinder.Eval (Container.DataItem, "Title") %>', '<%# DataBinder.Eval (Container.DataItem, "Url") %>');"><%# DataBinder.Eval (Container.DataItem, "Title") %></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<p id="ctl06_ctl00_ctl00_actionButtons" class="button_area bottom">
<a href="#" onclick="insertLink();" style="display: block; " class="CmsButLeft ok" id="submitBtnEnabled"><strong class="CmsButRight light">Insert</strong></a>
<span class="cmsorlbl"> or </span>
<a href="#" onclick="getRadWindow().close();" class="cmscclcmd">Cancel</a>
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function getRadWindow()
{
if (window.radWindow)
{
return window.radWindow;
}
if (window.frameElement && window.frameElement.radWindow)
{
return window.frameElement.radWindow;
}
return null;
}
function insertLink(title, url)
{
getRadWindow().close("<a href=\"/blog" + url + ".aspx\">" + title + "</a>");
}
</script>
</form>
</body>
</html>
Create the following ~/Sitefinity/UserControls/Dialogs/BlogPostLink.aspx.cs file:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
public partial class Sitefinity_UserControls_Dialogs_BlogPostLink : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Telerik.Cms.Engine.ContentManager cmsManager = new Telerik.Cms.Engine.ContentManager("Blogs");
IList listOfPosts = cmsManager.GetContent(0, 15);
DataTable table = new DataTable();
table.Columns.Add("Url");
table.Columns.Add("Title");
foreach (Telerik.Cms.Engine.IContent blogItem in listOfPosts)
{
DataRow row = table.NewRow();
row["Url"] = blogItem.Url;
row["Title"] = blogItem.GetMetaData("Title");
table.Rows.Add(row);
}
BlogPosts.DataSource = table;
BlogPosts.DataBind();
}
}
