Add custom css classes to RadEditor for Content Block
Hi,
I would like to add some custom css styles to the RadEditor for the Content Block control in Sitefinity 4 RC.
I have read these post:
www.sitefinity.com/.../content-block-custom-css-etc.aspx
www.sitefinity.com/.../radeditor.aspx
explaining that ContentBlock control has a public property - LayoutTemplatePath which you can use to map an external template and change some of the properties that HtmlField control expose. HtmlField wraps RadEditor control that ContentBlock uses.
I have created a template and I put this in the template:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RadContentEditor.ascx.cs" Inherits="Custom_ContentEditor_RadContentEditor" %><%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %><sf:HtmlField ID="htmlEditor" runat="server" Width="99%" Height="370px" DisplayMode="Write" EditorToolsConfiguration="Custom" EditorConfigurations="~/ToolsFile.xml"> </sf:HtmlField>Hi carlag,
To make some changes to the RadEditor control that is wrapped by ContentBlock control you have to create
1. CustomClass that inherits from ConentBlock - here you have to override LayoutTemplateName property and set it to your custom template
Inside the template you must have the code below
<%@ Control Language="C#" %><asp:Literal ID="contentHtml" runat="server"></asp:Literal>2. Create a custom class that inherits from GenericContentDesigner and again override its LayoutTemplateName property where you set the path to the control template
Inside the template you must have the code below
<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
<sf:ResourceLinks id="resourcesLinks" runat="server"> <sf:ResourceFile Name="Styles/Window.css" /></sf:ResourceLinks> <sf:FormManager ID="formManager" runat="server" /><div style="width: 660px; overflow: hidden;"> <sf:HtmlField ID="htmlEditor" runat="server" Width="99%" Height="370px" EditorContentFilters="DefaultFilters" EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists" DisplayMode="Write"> </sf:HtmlField></div><script type="text/javascript"> $("body").addClass("sfContentBlockDesigner");</script>3. Set attribute [ControlDesinger(typeof(YourCustomGenericContentDesigner)] to your custom ContentBlock class
[ControlDesigner(typeof(ContentBlockDesignerCustom))]public class ContentBlockCustom : ContentBlock hi,
i put my layouttemplate according to attachment picture-layout.png. but i did not get option for adding custom css class in paragraph style in content editor(<sf:HtmlField).
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="GenericContentDesigner.ascx.cs" Inherits="controls_MyConetBlock_GenericContentDesigner" %> <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %> <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %> <sf:ResourceLinks id="resourcesLinks" runat="server"> <sf:ResourceFile Name="~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Themes/YourTheme/Black Yellow/EditorStyleCss/editor_styles.css" /> </sf:ResourceLinks> <sf:FormManager ID="formManager" runat="server" /> <div style="width: 660px; overflow: hidden;"> <sf:HtmlField ID="htmlEditor" runat="server" Width="99%" Height="370px" EditorContentFilters="DefaultFilters" EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists" DisplayMode="Write"> </sf:HtmlField> </div> <script type="text/javascript"> $("body").addClass("sfContentBlockDesigner"); </script>
i want to do according to editor.png attachment picture.please see editor.png
Hi humayoo,
You can access the RadEditor control from the server side by using Editor public property and set your paragraphs.
htmlEditor.Editor.Paragraphs
All the best,
Ivan Dimitrov
the Telerik team
HI,
i tried as you sad, but still it is not working.please guide me. this is my code below.
htmlEditor.Editor.CssFiles.Add("~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Themes/YourTheme/Black Yellow/EditorStyleCss/editor_styles.css"); //htmlEditor.Editor.ToolsFile = "~/App_Data/Sitefinity/Configuration/EditorToolsFile.xml"; //htmlEditor.Editor.Paragraphs.Add(new Telerik.Web.UI.EditorParagraph("titleGrey",".titleGrey")); htmlEditor.Editor.CssClasses.Add("TitleGrey", ".titleGrey"); htmlEditor.Editor.DataBind();Hi humayoo,
You have to subscribe for PreRender of HtmlField control and add the paragraphs
void htmlEditor_PreRender(object sender, EventArgs e) htmlEditor.Editor.Paragraphs.Add("<h1>Heading 1<h1>", "<h1>"); htmlEditor.Editor.Paragraphs.Add("<h2 style='font-family: Trebuchet MS;'>GGGGGGGGGGGGGG<h2>", "<h2 style='font-family: Trebuchet MS;'>"); htmlEditor.Editor.Paragraphs.Add("<h3 class='serif'>TTTTTTTTTTTTTTTTTT<h3>", "<h3 class='serif'>"); protected override void OnPreRender(EventArgs e) htmlEditor.PreRender += new EventHandler(htmlEditor_PreRender); HI,
i did as you said but i want to use class from external css file and EditorToolsFile.xml file. now my problem is that when it is loading xml file correclty but other tools disappear. second things is that class from external css file not applied. i am sending editor.png attachment problem and xml file.
void htmlEditor_PreRender(object sender, EventArgs e)
htmlEditor.Editor.ToolsFile = "~/App_Data/Sitefinity/Configuration/EditorToolsFile.xml"; htmlEditor.Editor.DataBind(); protected override void OnPreRender(EventArgs e) htmlEditor.PreRender += new EventHandler(htmlEditor_PreRender);
<root> <modules> <module name="RadEditorStatistics" dockingZone="Bottom" enabled="true" visible="true" dockable="true" /> <module name="RadEditorDomInspector" dockingZone="Module" enabled="true" visible="true" dockable="true" /> <module name="RadEditorNodeInspector" dockingZone="Module" enabled="true" visible="true" dockable="true" /> <module name="RadEditorHtmlInspector" dockingZone="Module" enabled="true" visible="true" dockable="true" /> <module name="RadEditorXhtmlValidator" dockingZone="Module" enabled="true" visible="true" dockable="true" /> </modules> <tools dockable="false"> <tool name="Bold" shortcut="CTRL+B"/> <tool name="Italic" shortcut="CTRL+I"/> <tool name="Underline" shortcut="CTRL+U"/> <tool name="StrikeThrough" enabled="false" /> <tool name="JustifyLeft" /> <tool name="JustifyCenter" /> <tool name="JustifyRight" /> <tool name="JustifyFull" /> <tool name="JustifyNone" /> <tool name="Indent" /> <tool name="Outdent" /> <tool name="InsertOrderedList" /> <tool name="InsertUnorderedList" /> <tool separator="true"/> </tools> <tools name="MainToolbar" dockable="false"> <tool name="AjaxSpellCheck" shortcut="F7" /> <tool name="FindAndReplace" shortcut="CTRL+F" /> <tool separator="true" /> <tool name="Cut" shortcut="CTRL+X" /> <tool name="Copy" shortcut="CTRL+C" /> <tool name="Paste" shortcut="CTRL+V" /> <tool name="PasteFromWord" /> <tool name="PasteFromWordNoFontsNoSizes" /> <tool name="PastePlainText" /> <tool name="PasteAsHtml" /> <tool separator="true"/> <tool name="Undo" shortcut="CTRL+Z"/> <tool name="Redo" shortcut="CTRL+Y"/> <tool separator="true"/> </tools> <tools name="InsertToolbar" dockable="false"> <tool name="ImageManager" shortcut="CTRL+G"/> <tool name="ImageMapDialog" /> <tool name="AbsolutePosition" /> <tool separator="true" /> <tool name="FlashManager" /> <tool name="MediaManager" /> <tool name="DocumentManager" /> <tool name="TemplateManager" /> <tool name="LinkManager" shortcut="CTRL+K"/> <tool name="Unlink" shortcut="CTRL+SHIFT+K"/> </tools> <tools dockable="false"> <tool name="ConvertToLower" /> <tool name="ConvertToUpper" /> <tool separator="true" /> <tool name="InsertTable" /> <tool name="InsertSnippet" /> <tool name="InsertFormElement" /> <tool name="InsertSymbol" /> </tools> <tools name="DropdownToolbar" dockable="false"> <tool name="ForeColor" /> <tool name="BackColor" /> <tool separator="true" /> <tool name="FontName" /> <tool name="FontSize" /> <tool name="ApplyClass" /> <tool name="InsertCustomLink" /> <tool name="FormatBlock" /> <tool name="FormatStripper" /> </tools> <tools name="DialogToolbar"> <tool name="Print" shortcut="CTRL+P"/> <tool name="Superscript" /> <tool name="Subscript" /> <tool name="InsertParagraph" /> <tool name="InsertHorizontalRule" /> <tool name="InsertDate" /> <tool name="InsertTime" /> <tool separator="true"/> <tool name="AboutDialog" /> <tool name="Help" shortcut="F1"/> </tools> <tools name="EnhancedEditToolbar" dockable="true"> <tool name="ToggleScreenMode" shortcut="F11"/> <tool name="ToggleTableBorder" /> <tool name="Zoom" /> <tool name="ModuleManager" /> <tool name="ToggleDocking" /> <tool name="RepeatLastCommand" shortcut="F4"/> </tools> <tools> <tool name="StyleBuilder" text="Style Builder" /> <tool name="XhtmlValidator" text="Xhtml Validator Dialog" /> <tool name="TrackChangesDialog" text="Track Changes Dialog" /> <tool name="FormatCodeBlock" text="Format Code Block Dialog" /> </tools> <tools> <tool name="SetImageProperties" /> <tool separator="true"/> <tool name="TableWizard" /> <tool name="PageProperties" /> </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><!-- ==============================================================================================The ToolsFile must have a valid structure as shown belowAll attributes and their values are case sensitive! <root> <modules> <module /> <module/> </modules> <tools> <tool /> <tool /> ... </tools> ... <colors> <color/> <color/> </colors></root> <tool> element valid attributes: name (required): Bold Italic Underline StrikeThrough Superscript Subscript JustifyLeft JustifyCenter JustifyRight JustifyFull InsertOrderedList InsertUnorderedList Outdent Indent Cut Copy Paste PasteFromWord PastePlainText PasteAsHtml Print Undo Redo ImageManager AbsolutePosition LinkManager Unlink InsertBoldHorizontalRule InsertTable ToggleTableBorder FormatBlock ApplyClass FontName FontSize InsertCustomLink Custom InsertSymbol BackColor ForeColor FlashManager MediaManager SpellCheck FormatStripper InsertParagraph InsertSnippet Help FindAndReplace DocumentManager PasteFromWordNoFontsNoSizes InsertFormElement InsertDate InsertTime TemplateManager ToggleScreenMode Zoom ModuleManager ToggleDocking RepeatLastCommand AboutDialog title(not required): Some hint string for this tool. shortcut(not required): The key combination for the specific tool. Examples: <tool name="TemplateManager" shortcut="Ctrl+Shift+Alt+N"/> <tool name="LinkManager" shortcut="Ctrl+L" /> <separator> elementtrue/false Indicates whether a separator should appear at current position. <tools> element valid attributes:name (required): This string will identify the toolbar. enabled (not required): true/false (Indicates whether the tool will be available on the client or not)visible (not required): true/false (Indicates whether the tool should appear in the toolbar or not. This toolbar will be available client-side - the property defines only the visibility of the tool.) dockable (not required): true/false (Indicates whether you will be able to drag&drop the toolbar to the docking zones) <module> element valid attributes:(module elements should appear as child elements of an element "modules")name (required): The friendly name of the module. When in floating mode the name will appear in the tool's titlebar.dockable (not required): (Indicates whether you will be able to drag&drop the tool to the docking zones)enabled (not required): (Indicates whether the module will be available on the client or not)visible (not required): (Indicates whether the module should appear in the toolbar or not. This module will be available client-side - the property defines only the visibility of the module. ) <link> element valid attributes:(link elements should appear as child elements of an element "links")name (required): Link/Category Name/Aliashref (not required): URL of the link/categorytarget (not required): The target window of the linktooltip (not required): The tooltip for the link <symbol> element valid attributes:(symbol elements should appear as child elements of an element "symbols")value (required): The symbol to be displayed<font> element valid attributes:(font elements should appear as child elements of a tool element with "name" attribute set to "fontNames")name (required): Font Name <class> element valid attributes:(class elements should appear as child elements of an element "classes")name (required): Class Alias value (required): Class Name <paragraph> element valid attributes:(paragraph elements should appear as child elements of an element "paragraphs") name (required): Paragraph Alias value (required): Paragraph Name <color> element valid attributes:(color elements should appear as child elements of an element "colors")value (not required): Hex value of the color <snippet> element valid attributes:(snippet elements should appear as child elements of an element "snippets")name (required): Snippet Alias <language> element valid attributes:(language elements should appear as child elements of an element "Languages")code (required): Language codetitle (required): Language Title The contextMenus tag in the Tools file allows you to change the default or specify custom context menus for different HTML elements.<contextMenu > element valid attributes:(contextMenu elements should appear as child elements of an element "contextMenus")forElement (required): The HTML element that will call this menu.enabled (required): Defines if this context menu is switched.The example below shows how to attach custom context menus for <A> and <P> elements.<contextMenus> <contextMenu forElement="A" enabled="false"> </contextMenu> <contextMenu forElement="P"> <tool name="JustifyLeft" /> <tool name="JustifyCenter" /> <tool name="JustifyRight" /> <tool name="JustifyFull" /> </contextMenu></contextMenus> =============================================================================================== -->Hello humayoo,
The toolbar is not initialized. We need some time to research the issue and logged a bug for this. The bug ID is 101510
Kind regards,
Ivan Dimitrov
the Telerik team
Hi,
I got the Apply Class drop down to appear in the RadEditor for the Content Block using a custom ToolsFile.xml file and the technique outlined in this forum. However, none of my custom css styles are appearing in the Apply Class drop down. I have done the following shown below to customize the RadEditor options.
In the App_Code directory of my sitefinity web application project I have two class files.
CustomClass.cs
using System;using System.Collections.Generic;using System.Linq;using System.Web;using Telerik.Sitefinity.Modules.GenericContent.Web.UI;using Telerik.Sitefinity.Web.UI.ControlDesign;/// <summary>/// Summary description for CustomClass/// </summary>///[ControlDesigner(typeof(CustomGenericContentDesigner))]public class ContentBlockCustom : ContentBlock protected override string LayoutTemplateName get return "/Custom/ContentEditor/RadContentEditor.ascx"; using System;using System.Collections.Generic;using System.Linq;using System.Web;using Telerik.Sitefinity.Web.UI.ControlDesign;using Telerik.Sitefinity.Modules.GenericContent.Web.UI;/// <summary>/// Summary description for CustomGenericContentDesigner/// </summary>public class CustomGenericContentDesigner : ContentBlockDesigner protected override string LayoutTemplateName get return "~/Custom/ContentEditor/RadContentEditor.ascx"; protected override void InitializeControls(Telerik.Sitefinity.Web.UI.GenericContainer container) throw new NotImplementedException(); <%@ Control Language="C#" AutoEventWireup="true" CodeFile="RadContentEditor.ascx.cs" Inherits="Custom_ContentEditor_RadContentEditor" %><%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %><%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %><sf:ResourceLinks id="resourcesLinks" runat="server"> <sf:ResourceFile Name="App_Data/Sitefinity/WebsiteTemplates/UnboundTemplate/App_Themes/Unbound/CSS/EditorStyles/Styles.css" /> </sf:ResourceLinks> <asp:Literal ID="contentHtml" runat="server"></asp:Literal><sf:FormManager ID="formManager" runat="server" /> <div style="width: 660px; overflow: hidden;"> <sf:HtmlField ID="htmlEditor" runat="server" Width="99%" Height="370px" EditorContentFilters="DefaultFilters" EditorStripFormattingOptions="MSWord,Css,Font,Span,ConvertWordLists" DisplayMode="Write"> </sf:HtmlField> </div> <script type="text/javascript"> $("body").addClass("sfContentBlockDesigner");</script>public partial class Custom_ContentEditor_RadContentEditor : System.Web.UI.UserControl protected void Page_Load(object sender, EventArgs e) protected void htmlEditor_PreRender(object sender, EventArgs e) htmlEditor.Editor.ToolsFile = "~/Custom/ContentEditor/ToolsFile.xml"; //htmlEditor.Editor.CssFiles.Add("~/App_Data/Sitefinity/WebsiteTemplates/UnboundTemplate/App_Themes/Unbound/CSS/EditorStyles/Styles.css"); //htmlEditor.Editor.CssFiles.Add(new EditorCssFile("~/App_Data/Sitefinity/WebsiteTemplates/UnboundTemplate/App_Themes/Unbound/CSS/EditorStyles/Styles.css")); //htmlEditor.Editor.CssClasses.Add("SideMenu", ".sidemenu"); protected override void OnPreRender(EventArgs e) htmlEditor.PreRender += new EventHandler(htmlEditor_PreRender); <?xml version="1.0" encoding="utf-8" ?><root> <tools name="MainToolbar" enabled="true"> <tool name="AjaxSpellCheck" /> <tool name="Print" /> <tool name="FindAndReplace" /> <tool separator="true"/> <tool name="Cut" /> <tool name="Copy" /> <tool name="Paste" /> <tool name="PasteFromWord" /> <tool name="PastePlainText" /> <tool name="PasteAsHtml" /> <tool separator="true"/> <tool name="Undo" /> <tool name="Redo" /> <tool name="ApplyClass"/> </tools></root>Hi,
I have the same problem and i really need to costumize the Editor with my custom classes.
I hope that this bug could be resolved as soon as possible.
If there is another way to costumize the Classes that appear in the editor please send me the steps to do that.
Hello,
There should not be a problem to set the classes. The problem comes when you set the ToolsFile of the RadEditor. You can get around the issue and display the entire toolbar ( which is the last problem in the thread) by using the following js code in the ContentBlockDesigner template.
functionpageLoad() vareditorToolbars = jQuery("#"+ "<%= htmlEditor.ClientID %>"+ " .reToolbar"); editorToolbars.each(function(index) if(index > 0) jQuery(this).show(); );I'm not sure if this has changed in sp1 or anything, but the amount of hoops you have to jump through to change the RadEditor is just ridiculous.
I can't follow what i'm supposed to change and what i'm not based on this thread...this should be an easy extension point.
Hello ,
We have logged a task about exposing configurations to make HtmlField extensibility simplified. I will rise the priority of the task for Q2 release.
All the best,
Ivan Dimitrov
the Telerik team
Hi, I would also like to customise the RAD editor, when is the Q2 release planned for and what is the process required to update an existing SiteFinity installation?
Hello,
Please check our roadmap for further reference.
Best wishes,
Ivan Dimitrov
the Telerik team