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 below
All 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
> element
true/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/Alias
href (not required):
URL of the link/category
target (not required):
The target window of the link
tooltip (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 code
title (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