Custom Tools for backend Content Editor
Hi, Im trying to add a few custom tools into the radeditor across the backend content editor.
I have followed http://www.sitefinity.com/devnet/forums/sitefinity-4-x/sdk/how-to-customize-the-content-editor.aspx#1777497 and http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/content-block-editor---toolsfile-xml.aspx and was able to get the view map to work (using higgsy's code), changes in EditorTools.ascx and xml file (adding/removing default buttons) can been seen but when trying to add a custom tool like the example here http://tv.telerik.com/watch/radtips/radeditor/radeditor-for-aspnet-ajax-export-to-pdf with <tool name="CustomTool" /> in the xml I get the error
Server Error in '/' Application.
Could not find the specified key "CustomTool" or class id "RadEditor.Tools".
I also tried to just add the following from the radeditor demo's adding a blank tool with no commands
<telerik:RadEditor
...>
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="CustomTool" Text="CustomTool Test" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
This worked with an empty project with just a radeditor on the page however when applied in template the tools section seems to be just ignored or overwritten.
In both cases (template/ radeditor on page) I was not able to create an empty command button through the xml
Any help would be appreciated
Hello Jack,
Can you please take a look at this article form our online documentation, I believe you might find it useful. If any problems persist, do you mind sharing with us your current implementation (template and toolsfile) and a screenshot of the configuration settings where you have mapped the external template for the content editor, so we can inspect this issue further and give you a more specific advice.
Greetings,
Boyan Barnev
the Telerik team
Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>
Hi Boyan,
I have tried declaring in RadEditor as well as xml from the documentation but still no success, maybe Im missing something simple.. Here is my template with the declaration commented
<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Extenders" TagPrefix="sf" %>
<
sf:ConditionalTemplateContainer
ID
=
"conditionalTemplate"
runat
=
"server"
>
<
Templates
>
<
sf:ConditionalTemplate
ID
=
"ConditionalTemplate1"
Left
=
"DisplayMode"
Operator
=
"Equal"
Right
=
"Read"
runat
=
"server"
>
<
sf:SitefinityLabel
id
=
"titleLabel_read"
runat
=
"server"
WrapperTagName
=
"div"
HideIfNoText
=
"false"
CssClass
=
"sfTxtLbl"
/>
<
sf:SitefinityLabel
id
=
"viewControl"
runat
=
"server"
WrapperTagName
=
"div"
HideIfNoText
=
"false"
CssClass
=
"sfRTFContent"
/>
</
sf:ConditionalTemplate
>
<
sf:ConditionalTemplate
ID
=
"ConditionalTemplate2"
Left
=
"DisplayMode"
Operator
=
"Equal"
Right
=
"Write"
runat
=
"server"
>
<
sf:ResourceLinks
id
=
"resourcesLinks2"
runat
=
"server"
>
<
sf:EmbeddedResourcePropertySetter
Name
=
"Telerik.Sitefinity.Resources.Themes.Default.Styles.EditorDialogs.css"
Static
=
"true"
ControlID
=
"editControl"
ControlPropertyName
=
"DialogsCssFile"
/>
<
sf:ResourceFile
Name
=
"Telerik.Sitefinity.Resources.Themes.Default.Styles.Window.css"
Static
=
"true"
/>
</
sf:ResourceLinks
>
<
asp:Label
ID
=
"titleLabel_write"
runat
=
"server"
CssClass
=
"sfTxtLbl newclass"
AssociatedControlID
=
"editControl"
/>
<
asp:LinkButton
ID
=
"expandLink"
runat
=
"server"
OnClientClick
=
"return false;"
CssClass
=
"sfOptionalExpander"
/>
<
asp:Panel
ID
=
"expandableTarget"
runat
=
"server"
CssClass
=
"sfEditorWrp sfClearfix"
>
TESTTT
<
telerik:RadEditor
ID
=
"editControl"
runat
=
"server"
Skin
=
"Sitefinity"
Width
=
"100%"
Height
=
"250px"
EnableResize
=
"False"
ToolsFile
=
"~/Tools.xml"
DialogsCssFile
=
"/styles/site.css"
EditModes
=
"Design,HTML"
DialogHandlerUrl
=
"~/Telerik.Web.UI.DialogHandler.axd"
Content
=
""
NewLineBr
=
"False"
StripFormattingOptions
=
"Css,Font,Span"
OnClientLoad
=
"Telerik$Sitefinity$Web$UI$Fields$HtmlField$radEditorToggleAdvancedToolbars"
OnClientPasteHtml
=
"OnClientPasteHtml"
OnClientCommandExecuting
=
"OnClientCommandExecuting"
>
<%--<
Tools
>
<
telerik:EditorToolGroup
>
<
telerik:EditorTool
Name
=
"CustomTool"
Text
=
"CustomTool Test"
/>
</
telerik:EditorToolGroup
>
</
Tools
>--%>
<
FlashManager
ViewPaths
=
"~/Files"
UploadPaths
=
"~/Files"
DeletePaths
=
"~/Files"
/>
</
telerik:RadEditor
>
TESTTT
<%--<
sf:RadEditorCustomDialogsExtender
id
=
"editorCustomDialogsExtender"
runat
=
"server"
TargetControlID
=
"editControl"
/>--%>
<
sf:SitefinityLabel
id
=
"descriptionLabel"
runat
=
"server"
WrapperTagName
=
"div"
HideIfNoText
=
"true"
CssClass
=
"sfDescription"
/>
<
sf:SitefinityLabel
id
=
"exampleLabel"
runat
=
"server"
WrapperTagName
=
"div"
HideIfNoText
=
"true"
CssClass
=
"sfExample"
/>
</
asp:Panel
>
<
script
type
=
"text/javascript"
>
/*
<![CDATA[ */
var className = null;
var toRemove = false;
var handlersAdded = false;
function OnClientPasteHtml(sender, args)
var newContent = args.get_value();
newContent = newContent.replace(new RegExp("<b(\\s([^>])*?)?>", "ig"), "<strong$1>");
newContent = newContent.replace(new RegExp("</b(\\s([^>])*?)?>", "ig"), "</strong$1>");
newContent = newContent.replace(new RegExp("<i(\\s([^>])*?)?>", "ig"), "<em$1>");
newContent = newContent.replace(new RegExp("</i(\\s([^>])*?)?>", "ig"), "</em$1>");
var regex = /<([a-zA-Z]+) ?[^>]*?>\s*<\/\1>/gi;
newContent = newContent.replace(regex, "");
args.set_value(newContent);
function OnClientCommandExecuting(editor, args)
var name = args.get_name();
var val = args.get_value();
var commandName = args.get_commandName();
className = "re" + commandName;
if (editor.get_dialogOpener())
if (editor.get_dialogOpener()._container && !handlersAdded)
editor.get_dialogOpener()._container.add_show(AddRemoveCSSClass);
editor.get_dialogOpener()._container.add_close(AddRemoveCSSClass);
handlersAdded = true;
if (name == "MergeTags")
editor.pasteHtml(val);
//Cancel the further execution of the command as such a command does not exist in the editor command list
args.set_cancel(true);
if (commandName == "ToggleScreenMode")
var containerWnd = GetRadWindow();
if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode specify the needed content area width
$(editor.get_element()).addClass("sfFullScreenEditor");
if(containerWnd != null && !containerWnd.isMaximized())
containerWnd.maximize();
$(containerWnd.get_element()).addClass("sfWndToBeRestored");
editor.get_document().body.style.maxWidth = "640px";
else
$(editor.get_element()).removeClass("sfFullScreenEditor");
if(containerWnd != null && $(containerWnd.get_element()).hasClass("sfWndToBeRestored"))
$(containerWnd.get_element()).removeClass("sfWndToBeRestored");
containerWnd.restore();
editor.get_document().body.style.maxWidth = "100%";
function AddRemoveCSSClass(sender, args)
var popupElement = sender.get_popupElement();
if (!toRemove)
Sys.UI.DomElement.addCssClass(popupElement, className);
else
Sys.UI.DomElement.removeCssClass(popupElement, className);
function GetRadWindow()
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
/* ]]>
*/
</
script
>
</
sf:ConditionalTemplate
>
</
Templates
>
</
sf:ConditionalTemplateContainer
>
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
root
>
<
modules
>
<
module
name
=
"RadEditorStatistics"
dockingZone
=
"Bottom"
visible
=
"false"
/>
<
module
name
=
"RadEditorDomInspector"
visible
=
"false"
/>
<
module
name
=
"RadEditorNodeInspector"
visible
=
"false"
/>
<
module
name
=
"RadEditorHtmlInspector"
visible
=
"false"
/>
</
modules
>
<
tools
name
=
"MainToolbar"
>
<!--all the buttons included in this section will always be shown by default - feel free to modify it according to your requirements-->
<
tool
name
=
"ToggleAdvancedToolbars"
Text
=
"Less formatting options"
/>
<!--This button hides the advanced formatting options buttons-->
<!--<
tool
name
=
"Bold"
shortcut
=
"CTRL+B"
/>
<
tool
name
=
"Italic"
shortcut
=
"CTRL+I"
/>-->
<
tool
separator
=
"true"
/>
<
tool
name
=
"InsertOrderedList"
/>
<
tool
name
=
"InsertUnorderedList"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"LinkManager"
shortcut
=
"CTRL+K"
/>
<
tool
name
=
"Unlink"
shortcut
=
"CTRL+SHIFT+K"
/>
<
tool
name
=
"ImageManager"
shortcut
=
"CTRL+G"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"AjaxSpellCheck"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"PasteFromWord"
/>
<
tool
separator
=
"true"
/>
<!--you can use tool separators to separate your button-->
<
tool
name
=
"CustomTool"
/>
<!--this will be your button-->
<
tool
separator
=
"true"
/>
</
tools
>
<
tools
>
<
tool
separator
=
"true"
/>
<
tool
name
=
"JustifyLeft"
/>
<
tool
name
=
"JustifyRight"
/>
<
tool
name
=
"JustifyCenter"
/>
<
tool
name
=
"JustifyFull"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"Indent"
/>
<
tool
name
=
"Outdent"
/>
</
tools
>
<
tools
>
<
tool
name
=
"FontName"
shortcut
=
"CTRL+SHIFT+F"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"RealFontSize"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"FormatBlock"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"ForeColor"
/>
<
tool
name
=
"BackColor"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"MediaManager"
/>
<
tool
name
=
"FlashManager"
/>
<
tool
name
=
"DocumentManager"
/>
</
tools
>
<
tools
>
<
tool
name
=
"InsertParagraph"
/>
<
tool
name
=
"InsertTable"
/>
<
tool
name
=
"InsertSymbol"
/>
<
tool
name
=
"InsertHorizontalRule"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"Superscript"
/>
<
tool
name
=
"Subscript"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"FormatStripper"
/>
<
tool
separator
=
"true"
/>
<
tool
name
=
"FindAndReplace"
shortcut
=
"CTRL+F"
/>
<
tool
name
=
"Print"
shortcut
=
"CTRL+P"
/>
<
tool
name
=
"ToggleScreenMode"
/>
</
tools
>
</
root
>
Hi Jack,
I'm sorry to hear that you are still having trouble implementing the desired functionality. Just in case, can you please try adding the tools programatically as per the sample in this article form the RadEditor documentation, and let us know if the problems persist? Thank you in advance.
Best wishes,
Boyan Barnev
the Telerik team
Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>
I tried the following code
protected
void
Page_Load(
object
sender, EventArgs e)
editControl.Load += editControlOnload;
protected
void
editControlOnload(Object sender, EventArgs e)
var main =
new
EditorToolGroup();
editControl.Tools.Add(main);
var custom1 =
new
EditorTool Name =
"CustomToolBackend"
;
main.Tools.Add(custom1);
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below. |
|
Can anyone help point me to a possible solution?
Hi Jack,
Thank you very much for the patience. I believe we have found the reason for the problems you are experiencing - since the editor is looking for a matching string for that key in its resource file, it is returning the below discussed exception, as the custom tool is not among the default ones, and thus - it's not localized. For more information on localizin the EditorTools, you can browse this article from our Documentation.
Declaring the tool with its Text attribute set to some value, will also fix the problems (e.g.
<tool name="TestButton" Text="My Test Button"/> ) as it provides a predefined value for the localized string. Please try the above solution, and do not hesitate to get back to us if you need any further assistance.
Greetings,
Boyan Barnev
the Telerik team
Hi Boyan
I created the App_GlobalResources folder with the resource file RadEditor.Tools.resx, added an Entry with the name of the tool with a value and its still giving me the same error. Is there any steps Im missing? It seems like its not picking up the resource file so I also tried renaming it to the ID of the RadEditor, name of Tools file, name of Template file and none worked. However adding text value in the xml did work but I would like to figure out why the resource file is not working.
Thanks in advance
Hi Jack,
Can you please try adding the key through the Administration ->Interface Labels and messages option. We have a class RadEditor exposed there, you can select it and localize any of the existing/custom tools. An alternative could be to place your existing *.resx files inside the ~/App_Data/Sitefinity/GlobalResources folder.
Regards,
Boyan Barnev
the Telerik team
Hi, sorry for the late reply
I did get the custom tools working with the App_Data/Sitefinity/GlobalResources method!
This may be a little off topic but Im also trying to add custom styles into rad editor through apply CSS.
I was able to get styles showing by either writing css directly on the EditorTools file or adding a css link however the styles appear to be doubled described here http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/radedito-changes---post-deleted.aspx
I tried to follow http://www.telerik.com/help/aspnet-ajax/editor-external-css-files.html by adding
<CssFiles><telerik:EditorCssFile Value="xxx" /></CssFiles> in radeditor or <cssFiles><item name="xxx" /></cssFiles> in tools.xml both didnt work. When adding it through codebehind in page load
this.editControl.CssFiles.Add(new EditorCssFile("/Styles/CustomStyles.css"));
when debugging and stepping through it seems to be added ----------------------------- this.editControl.CssFiles[0]
Telerik.Web.UI.EditorCssFile
base Telerik.Web.UI.EditorValueItem: Telerik.Web.UI.EditorCssFile
Value: "/Styles/CustomStyles.css" and can be seen when inspecting through the browser (screenshot 1) but the styles doesnt show up I did notice when debuggin the PageLoad code is being hit 2 times and when inspecting PropertyEditor
<
div
id
=
"editView"
class
=
"sfContentBlocksDesignerWrp"
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor"
>
<
a
onclick
=
"return false;"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_expandLink"
class
=
"sfOptionalExpander"
href
=
"javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$htmlEditor$ctl00$ctl00$expandLink','')"
></
a
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_expandableTarget"
class
=
"sfEditorWrp sfClearfix"
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl"
class
=
"RadEditor Sitefinity reWrapper"
style
=
"height:370px;width:99%;"
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener"
style
=
"display:none;"
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_Window"
style
=
"display:none;"
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_Window_C"
>
</
div
><
input
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_Window_ClientState"
name
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_Window_ClientState"
type
=
"hidden"
/>
</
div
><
input
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_ClientState"
name
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener_ClientState"
type
=
"hidden"
/>
</
div
><
table
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlWrapper"
cellpadding
=
"0"
cellspacing
=
"0"
style
=
"table-layout:auto;width:100%;height:370px;"
>
<
tbody
>
<
tr
>
<
td
class
=
"reWrapper_corner reCorner_top_left"
> </
td
><
td
class
=
"reWrapper_center reCenter_top"
colspan
=
"3"
> </
td
><
td
class
=
"reWrapper_corner reCorner_top_right"
> </
td
>
</
tr
><
tr
>
<
td
class
=
"reLeftVerticalSide"
rowspan
=
"4"
> </
td
><
td
rowspan
=
"4"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlLeft"
class
=
"reTlbVertical"
></
td
><
td
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlTop"
class
=
"reToolCell"
style
=
"width:100%;"
><
div
class
=
"Sitefinity reToolbarWrapper"
>
<
ul
class
=
"reToolbar Sitefinity"
>
<
li
class
=
"reGrip grip_first"
> </
li
><
li
><
a
title
=
"Less formatting options"
class
=
"reTool"
href
=
"#"
><
span
class
=
"ToggleAdvancedToolbars"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Numbered List"
class
=
"reTool"
href
=
"#"
><
span
class
=
"InsertOrderedList"
> </
span
></
a
></
li
><
li
><
a
title
=
"Bullet List"
class
=
"reTool"
href
=
"#"
><
span
class
=
"InsertUnorderedList"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Hyperlink Manager (CTRL+K)"
class
=
"reTool"
href
=
"#"
><
span
class
=
"LinkManager"
> </
span
></
a
></
li
><
li
><
a
title
=
"Remove Link (CTRL+SHIFT+K)"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Unlink"
> </
span
></
a
></
li
><
li
><
a
title
=
"Image Manager (CTRL+G)"
class
=
"reTool"
href
=
"#"
><
span
class
=
"ImageManager"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"AJAX Spellchecker"
class
=
"reTool"
href
=
"#"
><
span
class
=
"AjaxSpellCheck"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Paste from Word"
class
=
"reTool"
href
=
"#"
><
span
class
=
"PasteFromWord"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Apply CSS Class"
class
=
"reDropdown"
href
=
"#"
><
span
class
=
"ApplyClass"
style
=
"width:80px;"
>Apply CSS Class</
span
></
a
></
li
><
li
><
a
title
=
"My Custom Tool From Resource"
class
=
"reTool"
href
=
"#"
><
span
class
=
"CustomTool"
> </
span
></
a
></
li
><
li
><
a
title
=
"Remove Empty Elements"
class
=
"reTool"
href
=
"#"
><
span
class
=
"RemoveEmpty"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
class
=
"reGrip grip_last"
> </
li
>
</
ul
><
ul
class
=
"reToolbar Sitefinity"
>
<
li
class
=
"reGrip grip_first"
> </
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Align Left"
class
=
"reTool"
href
=
"#"
><
span
class
=
"JustifyLeft"
> </
span
></
a
></
li
><
li
><
a
title
=
"Align Right"
class
=
"reTool"
href
=
"#"
><
span
class
=
"JustifyRight"
> </
span
></
a
></
li
><
li
><
a
title
=
"Align Center"
class
=
"reTool"
href
=
"#"
><
span
class
=
"JustifyCenter"
> </
span
></
a
></
li
><
li
><
a
title
=
"Justify"
class
=
"reTool"
href
=
"#"
><
span
class
=
"JustifyFull"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Indent"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Indent"
> </
span
></
a
></
li
><
li
><
a
title
=
"Outdent"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Outdent"
> </
span
></
a
></
li
><
li
class
=
"reGrip grip_last"
> </
li
>
</
ul
><
ul
class
=
"reToolbar Sitefinity"
>
<
li
class
=
"reGrip grip_first"
> </
li
><
li
><
a
title
=
"Font Name (CTRL+SHIFT+F)"
class
=
"reDropdown"
href
=
"#"
><
span
class
=
"FontName"
style
=
"width:80px;"
>Font Name</
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Real font size"
class
=
"reDropdown"
href
=
"#"
><
span
class
=
"RealFontSize"
style
=
"width:34px;"
>Real font size</
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Paragraph Style"
class
=
"reDropdown"
href
=
"#"
><
span
class
=
"FormatBlock"
style
=
"width:80px;"
>Paragraph Style</
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Foreground Color"
class
=
"reTool reSplitButton"
href
=
"#"
><
span
class
=
"ForeColor"
> </
span
><
span
class
=
"split_arrow"
> </
span
></
a
></
li
><
li
><
a
title
=
"Background Color"
class
=
"reTool reSplitButton"
href
=
"#"
><
span
class
=
"BackColor"
> </
span
><
span
class
=
"split_arrow"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Media Manager"
class
=
"reTool"
href
=
"#"
><
span
class
=
"MediaManager"
> </
span
></
a
></
li
><
li
><
a
title
=
"Flash Manager"
class
=
"reTool"
href
=
"#"
><
span
class
=
"FlashManager"
> </
span
></
a
></
li
><
li
><
a
title
=
"Document Manager"
class
=
"reTool"
href
=
"#"
><
span
class
=
"DocumentManager"
> </
span
></
a
></
li
><
li
class
=
"reGrip grip_last"
> </
li
>
</
ul
><
ul
class
=
"reToolbar Sitefinity"
>
<
li
class
=
"reGrip grip_first"
> </
li
><
li
><
a
title
=
"New Paragraph"
class
=
"reTool"
href
=
"#"
><
span
class
=
"InsertParagraph"
> </
span
></
a
></
li
><
li
><
a
title
=
"Insert Table"
class
=
"reTool reSplitButton"
href
=
"#"
><
span
class
=
"InsertTable"
> </
span
><
span
class
=
"split_arrow"
> </
span
></
a
></
li
><
li
><
a
title
=
"Insert Symbol"
class
=
"reTool reSplitButton"
href
=
"#"
><
span
class
=
"InsertSymbol"
> </
span
><
span
class
=
"split_arrow"
> </
span
></
a
></
li
><
li
><
a
title
=
"Horizontal Rule"
class
=
"reTool"
href
=
"#"
><
span
class
=
"InsertHorizontalRule"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"SuperScript"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Superscript"
> </
span
></
a
></
li
><
li
><
a
title
=
"Subscript"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Subscript"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Format Stripper"
class
=
"reTool reSplitButton"
href
=
"#"
><
span
class
=
"FormatStripper"
> </
span
><
span
class
=
"split_arrow"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Find And Replace (CTRL+F)"
class
=
"reTool"
href
=
"#"
><
span
class
=
"FindAndReplace"
> </
span
></
a
></
li
><
li
><
a
title
=
"Print (CTRL+P)"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Print"
> </
span
></
a
></
li
><
li
><
a
title
=
"Toggle Full Screen Mode"
class
=
"reTool"
href
=
"#"
><
span
class
=
"ToggleScreenMode"
> </
span
></
a
></
li
><
li
class
=
"reGrip grip_last"
> </
li
>
</
ul
>
</
div
></
td
><
td
rowspan
=
"4"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlRight"
class
=
"reTlbVertical"
></
td
><
td
rowspan
=
"4"
class
=
"reRightVerticalSide"
> </
td
>
</
tr
><
tr
>
<
td
valign
=
"top"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlCenter"
class
=
"reContentCell"
style
=
"height:100%;"
><
label
for
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlContentHiddenTextarea"
style
=
"display:none;"
>RadEditor hidden textarea</
label
><
textarea
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlContentHiddenTextarea"
name
=
"ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$htmlEditor$ctl00$ctl00$editControl"
rows
=
"4"
cols
=
"20"
style
=
"display:none;"
></
textarea
></
td
>
</
tr
><
tr
>
<
td
class
=
"reToolZone"
><
table
cellpadding
=
"0"
cellspacing
=
"0"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_BottomTable"
style
=
"width:100%;"
>
<
tbody
>
<
tr
>
<
td
class
=
"reEditorModesCell"
><
div
class
=
"reEditorModes"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_ModesWrapper"
>
<
ul
>
<
li
><
a
href
=
"javascript:void(0);"
title
=
"Design"
class
=
"reMode_design reMode_selected"
><
span
>Design</
span
></
a
></
li
><
li
><
a
href
=
"javascript:void(0);"
title
=
"HTML"
class
=
"reMode_html"
><
span
>HTML</
span
></
a
></
li
>
</
ul
>
</
div
></
td
><
td
class
=
"reBottomZone"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlBottom"
> </
td
><
td
valign
=
"bottom"
align
=
"right"
> </
td
>
</
tr
>
</
tbody
>
</
table
><
noscript
>
<
p
>RadEditor - please enable JavaScript to use the rich text editor.</
p
>
</
noscript
></
td
>
</
tr
><
tr
>
<
td
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControlModule"
class
=
"reToolZone"
></
td
>
</
tr
><
tr
>
<
td
class
=
"reWrapper_corner reCorner_bottom_left"
> </
td
><
td
class
=
"reWrapper_center reCenter_bottom"
colspan
=
"3"
> </
td
><
td
class
=
"reWrapper_corner reCorner_bottom_right"
> </
td
>
</
tr
>
</
tbody
>
</
table
><
input
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_ClientState"
name
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_ClientState"
type
=
"hidden"
/>
</
div
>
TESTTT
</
div
>
<
script
type
=
"text/javascript"
src
=
"/js/jquery.contextmenu.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function ()
Telerik.Web.UI.Editor.CommandList["RemoveEmpty"] = function (commandName, editor, args)
$('p,h1,h2,h3,h4,h5,h6,a', '.reContentArea').filter(function ()
return $.trim($(this).text()) === '';
).remove();
;
Telerik.Web.UI.Editor.CommandList["CustomTool"] = function (commandName, editor, args)
$('.reContentArea *').live( mouseenter: function ()
$(this).attr("temp", $(this).css("border"));
$(this).css("border", "1px solid gold");
if ($(this).children().length > 0) return;
var payload = $(this);
// Build the list of items
// <
p
><
b
><
a
> these will be selectable
// remove remove all
var max = 15;
var counter = 0;
var arrayOfElements = [];
var contextElement = $(this);
while (!contextElement.hasClass("reContentArea"))
counter++;
if (counter > max) break;
var del = Function.createDelegate(contextElement, contextHandler);
arrayOfElements.push(
label: contextElement.get(0).tagName,
action: del
);
contextElement = contextElement.parent();
$(this).contextPopup(
title: 'CSS Tags',
items: arrayOfElements
);
, mouseleave: function ()
var border = $(this).attr("temp");
$(this).css("border", border);
);
;
);
function contextHandler()
$(this).replaceWith($(this).text());
/*
<![CDATA[ */
var className = null;
var toRemove = false;
var handlersAdded = false;
function OnClientPasteHtml(sender, args)
var newContent = args.get_value();
newContent = newContent.replace(new RegExp("<b(\\s([^>])*?)?>", "ig"), "<strong$1>");
newContent = newContent.replace(new RegExp("</b(\\s([^>])*?)?>", "ig"), "</strong$1>");
newContent = newContent.replace(new RegExp("<i(\\s([^>])*?)?>", "ig"), "<em$1>");
newContent = newContent.replace(new RegExp("</i(\\s([^>])*?)?>", "ig"), "</em$1>");
var regex = /<([a-zA-Z]+) ?[^>]*?>\s*<\/\1>/gi;
newContent = newContent.replace(regex, "");
args.set_value(newContent);
function OnClientCommandExecuting(editor, args)
var name = args.get_name();
var val = args.get_value();
var commandName = args.get_commandName();
className = "re" + commandName;
if (editor.get_dialogOpener())
if (editor.get_dialogOpener()._container && !handlersAdded)
editor.get_dialogOpener()._container.add_show(AddRemoveCSSClass);
editor.get_dialogOpener()._container.add_close(AddRemoveCSSClass);
handlersAdded = true;
if (name == "MergeTags")
editor.pasteHtml(val);
//Cancel the further execution of the command as such a command does not exist in the editor command list
args.set_cancel(true);
if (commandName == "ToggleScreenMode")
var containerWnd = GetRadWindow();
if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode specify the needed content area width
$(editor.get_element()).addClass("sfFullScreenEditor");
if(containerWnd != null && !containerWnd.isMaximized())
containerWnd.maximize();
$(containerWnd.get_element()).addClass("sfWndToBeRestored");
editor.get_document().body.style.maxWidth = "640px";
else
$(editor.get_element()).removeClass("sfFullScreenEditor");
if(containerWnd != null && $(containerWnd.get_element()).hasClass("sfWndToBeRestored"))
$(containerWnd.get_element()).removeClass("sfWndToBeRestored");
containerWnd.restore();
editor.get_document().body.style.maxWidth = "100%";
function AddRemoveCSSClass(sender, args)
var popupElement = sender.get_popupElement();
if (!toRemove)
Sys.UI.DomElement.addCssClass(popupElement, className);
else
Sys.UI.DomElement.removeCssClass(popupElement, className);
function GetRadWindow()
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
/* ]]>
*/
</
script
>
</
div
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_editViewCommandBar"
class
=
"sfContentBlocksBtnAreaBottom"
>
<
a
onclick
=
"return false;"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_editViewCommandBar_ctl00_ctl00_buttonLink"
class
=
"sfLinkBtn sfChange"
href
=
"javascript:void(0)"
href
=
"javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$editViewCommandBar$ctl00$ctl00$buttonLink','')"
><
span
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_editViewCommandBar_ctl00_ctl00_buttonText"
class
=
"sfLinkBtnIn"
>Select from existing shared content</
span
></
a
><
a
onclick
=
"return false;"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_editViewCommandBar_ctl01_ctl00_buttonLink"
class
=
"sfLinkBtn sfChange"
href
=
"javascript:void(0)"
href
=
"javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$editViewCommandBar$ctl01$ctl00$buttonLink','')"
><
span
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_editViewCommandBar_ctl01_ctl00_buttonText"
class
=
"sfLinkBtnIn"
>Share this content across pages</
span
></
a
>
</
div
>
</
div
>
<
div
id
=
"previewAndEditContentView"
class
=
"sfContentBlocksDesignerWrp"
>
<
div
class
=
"sfNeutral sfClearfix"
>
<
span
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_sharedContentLabel"
><
strong
>This content is shared.</
strong
><
br
/> Any changes will affect all pages where the content is used.</
span
>
<
a
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_viewPagesLink"
href
=
"javascript:void(0);"
>View affected pages</
a
>
<
div
id
=
"editOutDatedContentView"
>
<
span
class
=
"sfFailure"
>
There is a newer version of this content
<
a
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_previewLink"
href
=
"javascript:void(0);"
>Preview</
a
>
or
<
a
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_updateLink"
href
=
"javascript:void(0);"
>Update</
a
>
with the newer version
</
span
>
</
div
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_commandBar"
class
=
"sfContentBlocksBtnAreaTop"
>
<
a
onclick
=
"return false;"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_commandBar_ctl00_ctl00_buttonLink"
class
=
"sfLinkBtn sfChange"
href
=
"javascript:void(0)"
href
=
"javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$commandBar$ctl00$ctl00$buttonLink','')"
><
span
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_commandBar_ctl00_ctl00_buttonText"
class
=
"sfLinkBtnIn"
>Edit this content</
span
></
a
><
a
onclick
=
"return false;"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_commandBar_ctl01_ctl00_buttonLink"
class
=
"sfLinkBtn sfChange"
href
=
"javascript:void(0)"
href
=
"javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$commandBar$ctl01$ctl00$buttonLink','')"
><
span
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_commandBar_ctl01_ctl00_buttonText"
class
=
"sfLinkBtnIn"
>Unshare</
span
></
a
>
</
div
>
</
div
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentLabel"
class
=
"sfSharedContentPreviewWrp"
>
</
div
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor"
>
<
a
onclick
=
"return false;"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_expandLink"
class
=
"sfOptionalExpander"
href
=
"javascript:__doPostBack('ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$contentEditor$ctl00$ctl00$expandLink','')"
></
a
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_expandableTarget"
class
=
"sfEditorWrp sfClearfix"
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl"
class
=
"RadEditor Sitefinity reWrapper"
style
=
"height:370px;width:99%;"
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener"
style
=
"display:none;"
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_Window"
style
=
"display:none;"
>
<
div
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_Window_C"
>
</
div
><
input
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_Window_ClientState"
name
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_Window_ClientState"
type
=
"hidden"
/>
</
div
><
input
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_ClientState"
name
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener_ClientState"
type
=
"hidden"
/>
</
div
><
table
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlWrapper"
cellpadding
=
"0"
cellspacing
=
"0"
style
=
"table-layout:auto;width:100%;height:370px;"
>
<
tbody
>
<
tr
>
<
td
class
=
"reWrapper_corner reCorner_top_left"
> </
td
><
td
class
=
"reWrapper_center reCenter_top"
colspan
=
"3"
> </
td
><
td
class
=
"reWrapper_corner reCorner_top_right"
> </
td
>
</
tr
><
tr
>
<
td
class
=
"reLeftVerticalSide"
rowspan
=
"4"
> </
td
><
td
rowspan
=
"4"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlLeft"
class
=
"reTlbVertical"
></
td
><
td
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlTop"
class
=
"reToolCell"
style
=
"width:100%;"
><
div
class
=
"Sitefinity reToolbarWrapper"
>
<
ul
class
=
"reToolbar Sitefinity"
>
<
li
class
=
"reGrip grip_first"
> </
li
><
li
><
a
title
=
"Less formatting options"
class
=
"reTool"
href
=
"#"
><
span
class
=
"ToggleAdvancedToolbars"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Numbered List"
class
=
"reTool"
href
=
"#"
><
span
class
=
"InsertOrderedList"
> </
span
></
a
></
li
><
li
><
a
title
=
"Bullet List"
class
=
"reTool"
href
=
"#"
><
span
class
=
"InsertUnorderedList"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Hyperlink Manager (CTRL+K)"
class
=
"reTool"
href
=
"#"
><
span
class
=
"LinkManager"
> </
span
></
a
></
li
><
li
><
a
title
=
"Remove Link (CTRL+SHIFT+K)"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Unlink"
> </
span
></
a
></
li
><
li
><
a
title
=
"Image Manager (CTRL+G)"
class
=
"reTool"
href
=
"#"
><
span
class
=
"ImageManager"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"AJAX Spellchecker"
class
=
"reTool"
href
=
"#"
><
span
class
=
"AjaxSpellCheck"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Paste from Word"
class
=
"reTool"
href
=
"#"
><
span
class
=
"PasteFromWord"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Apply CSS Class"
class
=
"reDropdown"
href
=
"#"
><
span
class
=
"ApplyClass"
style
=
"width:80px;"
>Apply CSS Class</
span
></
a
></
li
><
li
><
a
title
=
"My Custom Tool From Resource"
class
=
"reTool"
href
=
"#"
><
span
class
=
"CustomTool"
> </
span
></
a
></
li
><
li
><
a
title
=
"Remove Empty Elements"
class
=
"reTool"
href
=
"#"
><
span
class
=
"RemoveEmpty"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
class
=
"reGrip grip_last"
> </
li
>
</
ul
><
ul
class
=
"reToolbar Sitefinity"
>
<
li
class
=
"reGrip grip_first"
> </
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Align Left"
class
=
"reTool"
href
=
"#"
><
span
class
=
"JustifyLeft"
> </
span
></
a
></
li
><
li
><
a
title
=
"Align Right"
class
=
"reTool"
href
=
"#"
><
span
class
=
"JustifyRight"
> </
span
></
a
></
li
><
li
><
a
title
=
"Align Center"
class
=
"reTool"
href
=
"#"
><
span
class
=
"JustifyCenter"
> </
span
></
a
></
li
><
li
><
a
title
=
"Justify"
class
=
"reTool"
href
=
"#"
><
span
class
=
"JustifyFull"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Indent"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Indent"
> </
span
></
a
></
li
><
li
><
a
title
=
"Outdent"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Outdent"
> </
span
></
a
></
li
><
li
class
=
"reGrip grip_last"
> </
li
>
</
ul
><
ul
class
=
"reToolbar Sitefinity"
>
<
li
class
=
"reGrip grip_first"
> </
li
><
li
><
a
title
=
"Font Name (CTRL+SHIFT+F)"
class
=
"reDropdown"
href
=
"#"
><
span
class
=
"FontName"
style
=
"width:80px;"
>Font Name</
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Real font size"
class
=
"reDropdown"
href
=
"#"
><
span
class
=
"RealFontSize"
style
=
"width:34px;"
>Real font size</
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Paragraph Style"
class
=
"reDropdown"
href
=
"#"
><
span
class
=
"FormatBlock"
style
=
"width:80px;"
>Paragraph Style</
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Foreground Color"
class
=
"reTool reSplitButton"
href
=
"#"
><
span
class
=
"ForeColor"
> </
span
><
span
class
=
"split_arrow"
> </
span
></
a
></
li
><
li
><
a
title
=
"Background Color"
class
=
"reTool reSplitButton"
href
=
"#"
><
span
class
=
"BackColor"
> </
span
><
span
class
=
"split_arrow"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Media Manager"
class
=
"reTool"
href
=
"#"
><
span
class
=
"MediaManager"
> </
span
></
a
></
li
><
li
><
a
title
=
"Flash Manager"
class
=
"reTool"
href
=
"#"
><
span
class
=
"FlashManager"
> </
span
></
a
></
li
><
li
><
a
title
=
"Document Manager"
class
=
"reTool"
href
=
"#"
><
span
class
=
"DocumentManager"
> </
span
></
a
></
li
><
li
class
=
"reGrip grip_last"
> </
li
>
</
ul
><
ul
class
=
"reToolbar Sitefinity"
>
<
li
class
=
"reGrip grip_first"
> </
li
><
li
><
a
title
=
"New Paragraph"
class
=
"reTool"
href
=
"#"
><
span
class
=
"InsertParagraph"
> </
span
></
a
></
li
><
li
><
a
title
=
"Insert Table"
class
=
"reTool reSplitButton"
href
=
"#"
><
span
class
=
"InsertTable"
> </
span
><
span
class
=
"split_arrow"
> </
span
></
a
></
li
><
li
><
a
title
=
"Insert Symbol"
class
=
"reTool reSplitButton"
href
=
"#"
><
span
class
=
"InsertSymbol"
> </
span
><
span
class
=
"split_arrow"
> </
span
></
a
></
li
><
li
><
a
title
=
"Horizontal Rule"
class
=
"reTool"
href
=
"#"
><
span
class
=
"InsertHorizontalRule"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"SuperScript"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Superscript"
> </
span
></
a
></
li
><
li
><
a
title
=
"Subscript"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Subscript"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Format Stripper"
class
=
"reTool reSplitButton"
href
=
"#"
><
span
class
=
"FormatStripper"
> </
span
><
span
class
=
"split_arrow"
> </
span
></
a
></
li
><
li
class
=
"reSeparator"
> </
li
><
li
><
a
title
=
"Find And Replace (CTRL+F)"
class
=
"reTool"
href
=
"#"
><
span
class
=
"FindAndReplace"
> </
span
></
a
></
li
><
li
><
a
title
=
"Print (CTRL+P)"
class
=
"reTool"
href
=
"#"
><
span
class
=
"Print"
> </
span
></
a
></
li
><
li
><
a
title
=
"Toggle Full Screen Mode"
class
=
"reTool"
href
=
"#"
><
span
class
=
"ToggleScreenMode"
> </
span
></
a
></
li
><
li
class
=
"reGrip grip_last"
> </
li
>
</
ul
>
</
div
></
td
><
td
rowspan
=
"4"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlRight"
class
=
"reTlbVertical"
></
td
><
td
rowspan
=
"4"
class
=
"reRightVerticalSide"
> </
td
>
</
tr
><
tr
>
<
td
valign
=
"top"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlCenter"
class
=
"reContentCell"
style
=
"height:100%;"
><
label
for
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlContentHiddenTextarea"
style
=
"display:none;"
>RadEditor hidden textarea</
label
><
textarea
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlContentHiddenTextarea"
name
=
"ctl05$ctl00$ctl00$ctl00$ctl00$ctl00$contentEditor$ctl00$ctl00$editControl"
rows
=
"4"
cols
=
"20"
style
=
"display:none;"
></
textarea
></
td
>
</
tr
><
tr
>
<
td
class
=
"reToolZone"
><
table
cellpadding
=
"0"
cellspacing
=
"0"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_BottomTable"
style
=
"width:100%;"
>
<
tbody
>
<
tr
>
<
td
class
=
"reEditorModesCell"
><
div
class
=
"reEditorModes"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_ModesWrapper"
>
<
ul
>
<
li
><
a
href
=
"javascript:void(0);"
title
=
"Design"
class
=
"reMode_design reMode_selected"
><
span
>Design</
span
></
a
></
li
><
li
><
a
href
=
"javascript:void(0);"
title
=
"HTML"
class
=
"reMode_html"
><
span
>HTML</
span
></
a
></
li
>
</
ul
>
</
div
></
td
><
td
class
=
"reBottomZone"
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlBottom"
> </
td
><
td
valign
=
"bottom"
align
=
"right"
> </
td
>
</
tr
>
</
tbody
>
</
table
><
noscript
>
<
p
>RadEditor - please enable JavaScript to use the rich text editor.</
p
>
</
noscript
></
td
>
</
tr
><
tr
>
<
td
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControlModule"
class
=
"reToolZone"
></
td
>
</
tr
><
tr
>
<
td
class
=
"reWrapper_corner reCorner_bottom_left"
> </
td
><
td
class
=
"reWrapper_center reCenter_bottom"
colspan
=
"3"
> </
td
><
td
class
=
"reWrapper_corner reCorner_bottom_right"
> </
td
>
</
tr
>
</
tbody
>
</
table
><
input
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_ClientState"
name
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_ClientState"
type
=
"hidden"
/>
</
div
>
TESTTT
</
div
>
<
script
type
=
"text/javascript"
src
=
"/js/jquery.contextmenu.js"
></
script
>
<
script
type
=
"text/javascript"
>
$(document).ready(function ()
Telerik.Web.UI.Editor.CommandList["RemoveEmpty"] = function (commandName, editor, args)
$('p,h1,h2,h3,h4,h5,h6,a', '.reContentArea').filter(function ()
return $.trim($(this).text()) === '';
).remove();
;
Telerik.Web.UI.Editor.CommandList["CustomTool"] = function (commandName, editor, args)
$('.reContentArea *').live( mouseenter: function ()
$(this).attr("temp", $(this).css("border"));
$(this).css("border", "1px solid gold");
if ($(this).children().length > 0) return;
var payload = $(this);
// Build the list of items
// <
p
><
b
><
a
> these will be selectable
// remove remove all
var max = 15;
var counter = 0;
var arrayOfElements = [];
var contextElement = $(this);
while (!contextElement.hasClass("reContentArea"))
counter++;
if (counter > max) break;
var del = Function.createDelegate(contextElement, contextHandler);
arrayOfElements.push(
label: contextElement.get(0).tagName,
action: del
);
contextElement = contextElement.parent();
$(this).contextPopup(
title: 'CSS Tags',
items: arrayOfElements
);
, mouseleave: function ()
var border = $(this).attr("temp");
$(this).css("border", border);
);
;
);
function contextHandler()
$(this).replaceWith($(this).text());
/*
<![CDATA[ */
var className = null;
var toRemove = false;
var handlersAdded = false;
function OnClientPasteHtml(sender, args)
var newContent = args.get_value();
newContent = newContent.replace(new RegExp("<b(\\s([^>])*?)?>", "ig"), "<strong$1>");
newContent = newContent.replace(new RegExp("</b(\\s([^>])*?)?>", "ig"), "</strong$1>");
newContent = newContent.replace(new RegExp("<i(\\s([^>])*?)?>", "ig"), "<em$1>");
newContent = newContent.replace(new RegExp("</i(\\s([^>])*?)?>", "ig"), "</em$1>");
var regex = /<([a-zA-Z]+) ?[^>]*?>\s*<\/\1>/gi;
newContent = newContent.replace(regex, "");
args.set_value(newContent);
function OnClientCommandExecuting(editor, args)
var name = args.get_name();
var val = args.get_value();
var commandName = args.get_commandName();
className = "re" + commandName;
if (editor.get_dialogOpener())
if (editor.get_dialogOpener()._container && !handlersAdded)
editor.get_dialogOpener()._container.add_show(AddRemoveCSSClass);
editor.get_dialogOpener()._container.add_close(AddRemoveCSSClass);
handlersAdded = true;
if (name == "MergeTags")
editor.pasteHtml(val);
//Cancel the further execution of the command as such a command does not exist in the editor command list
args.set_cancel(true);
if (commandName == "ToggleScreenMode")
var containerWnd = GetRadWindow();
if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode specify the needed content area width
$(editor.get_element()).addClass("sfFullScreenEditor");
if(containerWnd != null && !containerWnd.isMaximized())
containerWnd.maximize();
$(containerWnd.get_element()).addClass("sfWndToBeRestored");
editor.get_document().body.style.maxWidth = "640px";
else
$(editor.get_element()).removeClass("sfFullScreenEditor");
if(containerWnd != null && $(containerWnd.get_element()).hasClass("sfWndToBeRestored"))
$(containerWnd.get_element()).removeClass("sfWndToBeRestored");
containerWnd.restore();
editor.get_document().body.style.maxWidth = "100%";
function AddRemoveCSSClass(sender, args)
var popupElement = sender.get_popupElement();
if (!toRemove)
Sys.UI.DomElement.addCssClass(popupElement, className);
else
Sys.UI.DomElement.removeCssClass(popupElement, className);
function GetRadWindow()
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
/* ]]>
*/
</
script
>
</
div
>
</
div
>
<
span
id
=
"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_clientLabelManager"
></
span
>
<
script
type
=
"text/javascript"
>
$("body").addClass("sfContentBlockDesigner");
</
script
>
</
div
>
</
div
><
div
id
=
"ctl05_ctl00_ctl00_advancedModeView"
>
<
div
id
=
"ctl05_ctl00_ctl00_propertyGrid"
>
<
div
class
=
"sfPropsToolsWrapper"
>
<
div
id
=
"expandCollapsePanel"
>
<
a
onclick
=
"return false;"
id
=
"ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_collapseAllButton"
href
=
"javascript:__doPostBack('ctl05$ctl00$ctl00$propertyGrid$ctl00$ctl00$collapseAllButton','')"
>Collapse all</
a
>
|
<
a
onclick
=
"return false;"
id
=
"ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_expandAllButton"
href
=
"javascript:__doPostBack('ctl05$ctl00$ctl00$propertyGrid$ctl00$ctl00$expandAllButton','')"
>Expand all</
a
>
</
div
>
<
div
id
=
"breadcrumbDiv"
style
=
"display: none; "
>
<
div
id
=
"ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_breadcrumb"
>
<
input
id
=
"ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_breadcrumb_ClientState"
name
=
"ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_breadcrumb_ClientState"
type
=
"hidden"
/>
</
div
>
</
div
>
<
div
id
=
"displayModesPanel"
>
<
div
id
=
"ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_propertyViewsToolbar"
class
=
"RadToolBar RadToolBar_Horizontal RadToolBar_Sitefinity RadToolBar_Sitefinity_Horizontal sfPropertyViews"
style
=
"z-index:9000;"
>
<
div
class
=
"rtbOuter"
>
<
div
class
=
"rtbMiddle"
>
<
div
class
=
"rtbInner"
>
<
ul
class
=
"rtbUL"
>
<
li
class
=
"rtbItem rtbBtn rtbChecked"
><
a
title
=
"Alphabetically"
class
=
"sfPropAlphabetically rtbWrap"
href
=
"#"
><
span
class
=
"rtbOut"
><
span
class
=
"rtbMid"
><
span
class
=
"rtbIn"
><
span
class
=
"rtbText"
>Alphabetically</
span
></
span
></
span
></
span
></
a
></
li
><
li
class
=
"rtbItem rtbBtn "
><
a
title
=
"Categorized"
class
=
"sfPropCategorized rtbWrap"
href
=
"#"
><
span
class
=
"rtbOut"
><
span
class
=
"rtbMid"
><
span
class
=
"rtbIn"
><
span
class
=
"rtbText"
>Categorized</
span
></
span
></
span
></
span
></
a
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
><
input
id
=
"ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_propertyViewsToolbar_ClientState"
name
=
"ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_propertyViewsToolbar_ClientState"
type
=
"hidden"
/>
</
div
>
</
div
>
</
div
>
<
div
class
=
"sfPropertiesListWrapper"
>
<
ul
id
=
"screens"
>
<
li
id
=
"level0"
class
=
"screen"
>
<
ul
id
=
"propertyGridLevel0"
></
ul
>
</
li
>
</
ul
>
</
div
>
<
ul
id
=
"ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_propertyGridBinder_BinderContainer1_clientTemplate"
class
=
"sys-template"
>
<
li
sys:class
=
" 'sf_item' + CategoryNameSafe"
>
<
div
class
=
"sf_categoryElement"
style
=
"display:none;"
>
<
a
id
=
"categoryNameLink"
class
=
"sf_categoryLink"
href
=
"#"
>CategoryName</
a
>
</
div
>
<
div
sys:class
=
" 'sf_propertyElement ' + ElementCssClass "
>
<
label
for
=
"PropertyValue"
>PropertyName</
label
>
<
input
type
=
"text"
id
=
"PropertyValue"
class
=
"sf_propertyInput"
sys:value
=
"PropertyValue"
/>
<
a
class
=
"sf_complexProperty selectCommand sfChange sfLinkBtn"
href
=
"#"
style
=
"display:none;"
><
strong
class
=
"sfLinkBtnIn"
>PropertyName</
strong
></
a
>
</
div
>
</
li
>
</
ul
>
<
div
id
=
"ctl05_ctl00_ctl00_propertyGrid_ctl00_ctl00_propertyGridLoadingPanel"
class
=
"RadAjax RadAjax_Sitefinity"
style
=
"display:none;"
>
<
div
class
=
"raDiv"
>
Loading...
</
div
><
div
class
=
"raColor"
>
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
$("body").addClass("sfSelectorDialog");
</
script
>
</
div
>
</
div
><
input
id
=
"ctl05_ctl00_ctl00_modesMultiPage_ClientState"
name
=
"ctl05_ctl00_ctl00_modesMultiPage_ClientState"
type
=
"hidden"
/>
</
div
>
<
div
class
=
"sfButtonArea sfSelectorBtns"
>
<!-- the Advanced/Simple button replaces the TabStrip -->
<
div
id
=
"ctl05_ctl00_ctl00_pnlAdvancedSimpleModeSelector"
class
=
"sfModeSwitcher"
>
<
a
onclick
=
"return false;"
id
=
"ctl05_ctl00_ctl00_advancedModeButton"
class
=
"sfLinkBtn"
href
=
"javascript:__doPostBack('ctl05$ctl00$ctl00$advancedModeButton','')"
>
<
strong
class
=
"sfLinkBtnIn"
>Advanced</
strong
>
</
a
>
<
a
onclick
=
"return false;"
id
=
"ctl05_ctl00_ctl00_simpleModeButton"
class
=
"sfLinkBtn"
href
=
"javascript:__doPostBack('ctl05$ctl00$ctl00$simpleModeButton','')"
>
<
strong
class
=
"sfLinkBtnIn"
>Simple</
strong
>
</
a
>
</
div
>
<
a
href
=
"javascript:void(0)"
id
=
"ctl05_ctl00_ctl00_saveButton"
class
=
"sfLinkBtn sfSave"
>
<
strong
class
=
"sfLinkBtnIn"
>
Save
</
strong
>
</
a
>
or
<
a
href
=
"javascript:void(0)"
id
=
"ctl05_ctl00_ctl00_cancelButton"
class
=
"sfCancel"
>
Cancel
</
a
>
<
a
href
=
"javascript:void(0)"
id
=
"ctl05_ctl00_ctl00_okButton"
class
=
"sfLinkBtn sfSave"
style
=
"display:none;"
>
<
strong
class
=
"sfLinkBtnIn"
>
OK
</
strong
>
</
a
>
</
div
>
and in the resources I see CustomStyles included in these 2 places
Sys.Application.add_init(function()
$create(Telerik.Web.UI.RadEditor, "_localization":"addcustomcolor":"Add Custom Color...","addcustomhexcolor":"Add Hex Color...","addcustomwordsuccess":"successfully added to dictionary","addtodictionary":"Add to dictionary","askwordcleaning":"The content you are trying to paste has MS Word formatting. Would you like to clean it?","cancelbutton":"Cancel","canceltable":"Cancel","cellproperties":"Cell Properties","cellwarning":"Please, select a cell to set its properties!","changewordstring":"Change Manually","class":"CSS Class","clearclass":"Clear Class","clearallhtmltags":"All HTML Tags","clearcssformatting":"Cascading Style Sheets","clearfonttags":"Font Tags","clearformatting":"Clear Formatting","clearspantags":"Span Tags","clearstyle":"Clear Style","clearwordformatting":"Microsoft Word Formatting","correctspelling":"Spelling Changes","createlink":"Create Link","dialogtoolbar":"Dialogs","dropdowntoolbar":"Dropdowns","exceededhtmllength":"Html length exceeded.","exceededtextlength":"Text length exceeded.","enhancededittoolbar":"Enhanced Edit","fileopen":"Open file..","filesaveas":"Save as...","formbutton":"Button","formcheckbox":"Checkbox","formform":"Form","formhidden":"Hidden","formpassword":"Password","formradio":"Radio button","formreset":"Reset","formselect":"Select","formsubmit":"Submit","formtext":"Textbox","formtextarea":"Textarea","htmlmode":"HTML Mode","ignoreallstring":"Ignore All","ignorestring":"Ignore","imagemapwarning":"Please, select an image to set its image map properties!","indenthtml":"Indent HTML","inserttoolbar":"Insert","maintoolbar":"Main Toolbar","morethanoncemessage":"This word occurs more than once in the text. Would you like to replace all instances?","movecommand":"Move","nospellingmistakes":"No mistakes found.","nosuggestions":"(no suggestions)","promptcolor":"Please, provide the custom color HEX value:","radeditordesignmode":"Design","radeditorhtmlmode":"HTML","radeditorpreviewmode":"Preview","reducetheconentlength":"Reduce the content length.","resizecommand":"Resize Object","sethtml":"Set HTML","showtoolbartooltip":"Show toolbar","spellcheckcomplete":"The Spell Check is complete!","spellcheckend":"Finish spellchecking","spellingchange":"Spelling Change","spellinginprogress":"Spell checking in progress...","spellingmode":"Spell checking mode. Misspelled words are highlighted in yellow.","table":"Table","tabletoolbar":"Table","tablewarning":"Please, select a table to set its properties!","toolbarcaption":"RadEditor Toolbar","toolnotsupportedbynetscape":"This tool is not supported by Mozilla/Netscape browsers.","typing":"Typing...","undodisabledmessage":"You cannot undo further while in spellcheck mode. Please finish spellchecking first.","updatebutton":"Update","usectrlc":"Please use Ctrl+C to Copy","usectrlv":"Please use Ctrl+V to Paste","usectrlx":"Please use Ctrl+X to Cut","aboutdialog":"About RadEditor","absoluteposition":"Set Absolute Position","ajaxspellcheck":"AJAX Spellchecker","applyclass":"Apply CSS Class","backcolor":"Background Color","bold":"Bold","csdialog":"Compliance Results","converttolower":"Convert to lower case","converttoupper":"Convert to upper case","copy":"Copy","cut":"Cut","decreasesize":"Decrease Size","deletecell":"Delete Cell","deletecolumn":"Delete Column","deleterow":"Delete Row","deletetable":"Delete Table","documentmanager":"Document Manager","enter":"Enter Pressed","findandreplace":"Find And Replace","flashmanager":"Flash Manager","fontname":"Font Name","fontsize":"Size","forecolor":"Foreground Color","formatblock":"Paragraph Style","formatcodeblock":"Format Code Block","formatstripper":"Format Stripper","help":"Help","imageeditor":"Image Editor","imagemanager":"Image Manager","imagemapdialog":"Image Map Editor","increasesize":"Increase Size","indent":"Indent","insertanchor":"Insert Anchor","insertcolumnleft":"Insert Column to the Left","insertcolumnright":"Insert Column to the Right","insertcustomlink":"Custom Links","insertdate":"Insert Date","insertemaillink":"Insert Email Link","insertformbutton":"Insert Button","insertformcheckbox":"Insert Checkbox","insertformelement":"Insert Form Element","insertformform":"Insert Form","insertformhidden":"Insert Hidden","insertformpassword":"Insert Password","insertformradio":"Insert Radio","insertformreset":"Insert Reset","insertformselect":"Insert Select","insertformsubmit":"Insert Submit","insertformtext":"Insert Textbox","insertformtextarea":"Insert Textarea","insertgroupbox":"Insert Groupbox","inserthorizontalrule":"Horizontal Rule","insertorderedlist":"Numbered List","insertparagraph":"New Paragraph","insertrowabove":"Insert Row Above","insertrowbelow":"Insert Row Below","insertsnippet":"Insert Code Snippet","insertsymbol":"Insert Symbol","inserttable":"Insert Table","inserttime":"Insert Time","insertunorderedlist":"Bullet List","italic":"Italic","justifycenter":"Align Center","justifyfull":"Justify","justifyleft":"Align Left","justifynone":"Remove alignment","justifyright":"Align Right","linkmanager":"Hyperlink Manager","insertlink":"Insert Link","mediamanager":"Media Manager","mergecolumns":"Merge Cells Horizontally","mergerows":"Merge Cells Vertically","modulemanager":"Module Manager","outdent":"Outdent","pageproperties":"Page Properties","paste":"Paste","pasteashtml":"Paste As Html","pastehtml":"Paste Html","pastefromword":"Paste from Word","pastefromwordnofontsnosizes":"Paste from Word, strip font","pasteplaintext":"Paste Plain Text","pastestrip":"Paste Options","print":"Print","realfontsize":"Real font size","redo":"Redo","repeatlastcommand":"Repeat Last Command","selectall":"Select All","setcellproperties":"Cell Properties","setimageproperties":"Properties...","insertimage":"Insert Image","setlinkproperties":"Properties...","settableproperties":"Table Properties","silverlightmanager":"Silverlight Manager","spellcheck":"Spellchecker","splitcell":"Split Cell","splitcellhorizontal":"Split Cell Horizontally","strikethrough":"Strikethrough","stripall":"Strip All Formatting","stripcss":"Strip Css Formatting","stripfont":"Strip Font Elements","stripspan":"Strip Span Elements","stripword":"Strip Word Formatting","stylebuilder":"Style Builder","subscript":"Subscript","superscript":"SuperScript","tablewizard":"Table Wizard","templatemanager":"Template Manager","toggledocking":"Dock all Floating Toolbars/Modules","togglescreenmode":"Toggle Full Screen Mode","toggletableborder":"Show/Hide Border","togglefloatingtoolbar":"Toggle Floating Toolbar","trackchangesdialog":"Track Changes","underline":"Underline","undo":"Undo","unlink":"Remove Link","xhtmlvalidator":"XHTML Validator","zoom":"Zoom","blank":"New Window","media":"Media Pane","parent":"Parent Window","search":"Search Pane","self":"Same Window","top":"Browser Window","action":"Action","align":"Alignment","alt":"ToolTip","bgcolor":"Background","border":"Border Width","bordercolor":"Border color","cellpadding":"CellPadding","cellspacing":"CellSpacing","classname":"Classname","cols":"Columns","doctype":"Select Doctype","dominspectorremoveelement":"RemoveElement","expandvalidator":"Expand Report Pane","height":"Height","href":"URL","id":"Id","name":"Name","nodeinspectorinvalidvalue":"Invalid value. Please enter a number.","nodeinspectorselectedelement":"The selected element is ","nowrap":"Nowrap","radeditordominspector":"Tag Inspector","radeditorhtmlinspector":"Real-Time HTML View","radeditornodeinspector":"Properties Inspector","radeditorstatistics":"Statistics","radeditorxhtmlvalidator":"XHTML Validator","rows":"Rows","statisticscharacters":"Characters:","statisticswords":"Words:","target":"Target","title":"ToolTip","validatexhtml":"Validate XHTML","valign":"Vertical Alignment","value":"Value","width":"Width","ajaxSpellCheckScriptReference":"/WebResource.axd?d=cBs2NBHP9UwTEVxzVUFI9DUXhDj7pCpqu5xZBu3lddkSCX8mxAcMPed7MrGCq_Llgoa7XVCkP3Z2oHx9UV9oFlyZl2Ml2vfAkKTI2bMLHNG141st8i766OggUQT03datRN28SNuQf78ZVFZy9RlQcQ2&t=634463120776860852","clientStateFieldID":"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_ClientState","contentAreaCssFile":"/WebResource.axd?d=EwiD6feqXksi4ha2SThTaQAoEjoqO0IbHmMudT4T5yEtz-PoxPH5ulTPYEk0xvaSH_DIdxv81SCzuIfccEIF8WBPtbda3BlcI6p3vDZouw8meYnovv05Q9064wkZaAebqfDtJbubCv3V1RHj1dYPBwOKRcl3xq0-p14k1j-ITcRrjE8BIQUzIE5w1-a7JEuo0&t=634463120775080852","contentAreaMode":2,"contextMenusJSON":["tagName":"TABLE","tools":["name":"ToggleTableBorder","text":"Show/Hide Border","name":"SetTableProperties","text":"Table Properties","name":"DeleteTable","text":"Delete Table"],"tagName":"TD","tools":["name":"InsertRowAbove","text":"Insert Row Above","name":"InsertRowBelow","text":"Insert Row Below","name":"DeleteRow","text":"Delete Row","name":"InsertColumnLeft","text":"Insert Column to the Left","name":"InsertColumnRight","text":"Insert Column to the Right","name":"DeleteColumn","text":"Delete Column","name":"MergeColumns","text":"Merge Cells Horizontally","name":"MergeRows","text":"Merge Cells Vertically","name":"SplitCellHorizontal","text":"Split Cell Horizontally","name":"SplitCell","text":"Split Cell","name":"DeleteCell","text":"Delete Cell","name":"SetCellProperties","text":"Cell Properties","name":"SetTableProperties","text":"Table Properties"],"tagName":"IMG","tools":["name":"SetImageProperties","text":"Properties...","name":"ImageMapDialog","text":"Image Map Editor"],"tagName":"A","tools":["name":"SetLinkProperties","text":"Properties...","name":"Unlink","text":"Remove Link"],"tools":["name":"Cut","text":"Cut","name":"Copy","text":"Copy","name":"Paste","text":"Paste","name":"PasteFromWord","text":"Paste from Word","name":"PastePlainText","text":"Paste Plain Text","name":"PasteAsHtml","text":"Paste As Html","name":"PasteHtml","text":"Paste Html"]],"cssClasses":[["","Clear Class"],[".test1","Greenyellow"],[".test2","fuchsia"]],"cssFiles":["/Styles/CustomStyles.css"],"editModes":3,"enableUndoRedo":false,"language":"en","modulesJSON":["name":"RadEditorStatistics","visible":false,"attributes":"dockingzone":"Bottom","name":"RadEditorDomInspector","visible":false,"name":"RadEditorNodeInspector","visible":false,"name":"RadEditorHtmlInspector","visible":false],"mozillaFlashOverlayImage":"/WebResource.axd?d=qlTCTLeakSg32wqVeyFmUTuiMtNDW4OC4W-iufQDqqE5-Yqr5HEqhu7HHDsFA2KG8_8XVePbSQj0i8TO3Hm2MVeaTlnaQyTaoPvlglGNmWinFyeel9gzniyGXV5vOtfeiPzrb2f6bDGbuyu00G49ugp-MWD_F0HPI6D5P26vWGM1&t=634463120776860852","newLineMode":2,"skin":"Sitefinity","spellCheckJSON":"configuration":"GnArAUs9MQMVAgpTFxcbXgBkDkohEGM1VFU4KQd+AxNdJg8+e3MKLF4MJjR1EUYCHQcNI3YsOUEVKAFSFwUbVzIQAUoqTxQ1VAsFHR5TOSpqeRcgdHABVlknGwdHTkokGU0VX3g/BzYSOAVTEQYhbCkSIw8kOH8FZlYJHS91HxtaJSlld2IoMFs3BDdEOGwKHlkvKHZKNTYtAwZiICsbbDJNAW0kK0EVYSAjEhxTNShqJi5tYhYkFmM4IRhFEVkYGloBGExICAY6LDR9IHADTDNPAXIQOmNzeTEFOxwNF3BuJBsmSXA3HWsNMSd0T0YuEWIjPE4XGAIWKCRDEBcTTDNPAXMXK0kfViAeZw==","url":"Telerik.Web.UI.SpellCheckHandler.axd","language":"en-US","stripFormattingOptions":370,"tableLayoutCssFile":"","toolAdapterType":"Telerik.Web.UI.Editor.DefaultToolAdapter","toolJSON":["tag":"MainToolbar","tools":["name":"ToggleAdvancedToolbars","text":"Less formatting options","type":8,"name":"InsertOrderedList","name":"InsertUnorderedList","type":8,"name":"LinkManager","shortCut":"CTRL+K","name":"Unlink","shortCut":"CTRL+SHIFT+K","name":"ImageManager","shortCut":"CTRL+G","type":8,"name":"AjaxSpellCheck","type":8,"name":"PasteFromWord","type":8,"attributes":"popupclassname":"reApplyClass","clearclasstext":"Clear Class","name":"ApplyClass","type":2,"name":"CustomTool","name":"RemoveEmpty","text":"Remove Empty Elements","type":8],"tools":["type":8,"name":"JustifyLeft","name":"JustifyRight","name":"JustifyCenter","name":"JustifyFull","type":8,"name":"Indent","name":"Outdent"],"tools":["name":"FontName","shortCut":"CTRL+SHIFT+F","type":2,"type":8,"attributes":"popupwidth":"60px","name":"RealFontSize","type":2,"type":8,"name":"FormatBlock","type":2,"type":8,"attributes":"popupclassname":"reColorPicker","itemsperrow":"10","sizetofit":"true","name":"ForeColor","type":4,"attributes":"popupclassname":"reColorPicker","itemsperrow":"10","sizetofit":"true","name":"BackColor","type":4,"type":8,"name":"MediaManager","name":"FlashManager","name":"DocumentManager"],"tools":["name":"InsertParagraph","attributes":"popupclassname":"reInsertTable","itemsperrow":"8","sizetofit":"true","name":"InsertTable","type":16,"tools":["name":"TableWizard","text":"Table Wizard","name":"InsertRowAbove","text":"Insert Row Above","name":"InsertRowBelow","text":"Insert Row Below","name":"DeleteRow","text":"Delete Row","name":"InsertColumnLeft","text":"Insert Column to the Left","name":"InsertColumnRight","text":"Insert Column to the Right","name":"DeleteColumn","text":"Delete Column","name":"MergeColumns","text":"Merge Cells Horizontally","name":"MergeRows","text":"Merge Cells Vertically","name":"SplitCellHorizontal","text":"Split Cell Horizontally","name":"SplitCell","text":"Split Cell","name":"DeleteCell","text":"Delete Cell","name":"SetTableProperties","text":"Table Properties"],"attributes":"itemsperrow":"8","sizetofit":"true","popupclassname":"reInsertSymbol","name":"InsertSymbol","type":4,"name":"InsertHorizontalRule","type":8,"name":"Superscript","name":"Subscript","type":8,"attributes":"sizetofit":"true","name":"FormatStripper","type":16,"tools":["name":"StripAll","text":"Strip All Formatting","name":"StripCss","text":"Strip Css Formatting","name":"StripFont","text":"Strip Font Elements","name":"StripSpan","text":"Strip Span Elements","name":"StripWord","text":"Strip Word Formatting"],"type":8,"name":"FindAndReplace","shortCut":"CTRL+F","name":"Print","shortCut":"CTRL+P","name":"ToggleScreenMode"]], "commandExecuting":OnClientCommandExecuting,"load":Telerik$Sitefinity$Web$UI$Fields$HtmlField$radEditorToggleAdvancedToolbars,"pasteHtml":OnClientPasteHtml, "dialogOpener":"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl_dialogOpener", $get("ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_htmlEditor_ctl00_ctl00_editControl"));
);
Sys.Application.add_init(function()
$create(Telerik.Web.UI.RadEditor, "ajaxSpellCheckScriptReference":"/WebResource.axd?d=cBs2NBHP9UwTEVxzVUFI9DUXhDj7pCpqu5xZBu3lddkSCX8mxAcMPed7MrGCq_Llgoa7XVCkP3Z2oHx9UV9oFlyZl2Ml2vfAkKTI2bMLHNG141st8i766OggUQT03datRN28SNuQf78ZVFZy9RlQcQ2&t=634463120776860852","clientStateFieldID":"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_ClientState","contentAreaCssFile":"/WebResource.axd?d=EwiD6feqXksi4ha2SThTaQAoEjoqO0IbHmMudT4T5yEtz-PoxPH5ulTPYEk0xvaSH_DIdxv81SCzuIfccEIF8WBPtbda3BlcI6p3vDZouw8meYnovv05Q9064wkZaAebqfDtJbubCv3V1RHj1dYPBwOKRcl3xq0-p14k1j-ITcRrjE8BIQUzIE5w1-a7JEuo0&t=634463120775080852","contentAreaMode":2,"contextMenusJSON":["tagName":"TABLE","tools":["name":"ToggleTableBorder","text":"Show/Hide Border","name":"SetTableProperties","text":"Table Properties","name":"DeleteTable","text":"Delete Table"],"tagName":"TD","tools":["name":"InsertRowAbove","text":"Insert Row Above","name":"InsertRowBelow","text":"Insert Row Below","name":"DeleteRow","text":"Delete Row","name":"InsertColumnLeft","text":"Insert Column to the Left","name":"InsertColumnRight","text":"Insert Column to the Right","name":"DeleteColumn","text":"Delete Column","name":"MergeColumns","text":"Merge Cells Horizontally","name":"MergeRows","text":"Merge Cells Vertically","name":"SplitCellHorizontal","text":"Split Cell Horizontally","name":"SplitCell","text":"Split Cell","name":"DeleteCell","text":"Delete Cell","name":"SetCellProperties","text":"Cell Properties","name":"SetTableProperties","text":"Table Properties"],"tagName":"IMG","tools":["name":"SetImageProperties","text":"Properties...","name":"ImageMapDialog","text":"Image Map Editor"],"tagName":"A","tools":["name":"SetLinkProperties","text":"Properties...","name":"Unlink","text":"Remove Link"],"tools":["name":"Cut","text":"Cut","name":"Copy","text":"Copy","name":"Paste","text":"Paste","name":"PasteFromWord","text":"Paste from Word","name":"PastePlainText","text":"Paste Plain Text","name":"PasteAsHtml","text":"Paste As Html","name":"PasteHtml","text":"Paste Html"]],"cssClasses":[["","Clear Class"],[".test1","Greenyellow"],[".test2","fuchsia"]],"cssFiles":["/Styles/CustomStyles.css"],"editModes":3,"enableUndoRedo":false,"language":"en","modulesJSON":["name":"RadEditorStatistics","visible":false,"attributes":"dockingzone":"Bottom","name":"RadEditorDomInspector","visible":false,"name":"RadEditorNodeInspector","visible":false,"name":"RadEditorHtmlInspector","visible":false],"mozillaFlashOverlayImage":"/WebResource.axd?d=qlTCTLeakSg32wqVeyFmUTuiMtNDW4OC4W-iufQDqqE5-Yqr5HEqhu7HHDsFA2KG8_8XVePbSQj0i8TO3Hm2MVeaTlnaQyTaoPvlglGNmWinFyeel9gzniyGXV5vOtfeiPzrb2f6bDGbuyu00G49ugp-MWD_F0HPI6D5P26vWGM1&t=634463120776860852","newLineMode":2,"skin":"Sitefinity","spellCheckJSON":"configuration":"GnArAUs9MQMVAgpTFxcbXgBkDkohEGM1VFU4KQd+AxNdJg8+e3MKLF4MJjR1EUYCHQcNI3YsOUEVKAFSFwUbVzIQAUoqTxQ1VAsFHR5TOSpqeRcgdHABVlknGwdHTkokGU0VX3g/BzYSOAVTEQYhbCkSIw8kOH8FZlYJHS91HxtaJSlld2IoMFs3BDdEOGwKHlkvKHZKNTYtAwZiICsbbDJNAW0kK0EVYSAjEhxTNShqJi5tYhYkFmM4IRhFEVkYGloBGExICAY6LDR9IHADTDNPAXIQOmNzeTEFOxwNF3BuJBsmSXA3HWsNMSd0T0YuEWIjPE4XGAIWKCRDEBcTTDNPAXMXK0kfViAeZw==","url":"Telerik.Web.UI.SpellCheckHandler.axd","language":"en-US","stripFormattingOptions":370,"tableLayoutCssFile":"","toolAdapterType":"Telerik.Web.UI.Editor.DefaultToolAdapter","toolJSON":["tag":"MainToolbar","tools":["name":"ToggleAdvancedToolbars","text":"Less formatting options","type":8,"name":"InsertOrderedList","name":"InsertUnorderedList","type":8,"name":"LinkManager","shortCut":"CTRL+K","name":"Unlink","shortCut":"CTRL+SHIFT+K","name":"ImageManager","shortCut":"CTRL+G","type":8,"name":"AjaxSpellCheck","type":8,"name":"PasteFromWord","type":8,"attributes":"popupclassname":"reApplyClass","clearclasstext":"Clear Class","name":"ApplyClass","type":2,"name":"CustomTool","name":"RemoveEmpty","text":"Remove Empty Elements","type":8],"tools":["type":8,"name":"JustifyLeft","name":"JustifyRight","name":"JustifyCenter","name":"JustifyFull","type":8,"name":"Indent","name":"Outdent"],"tools":["name":"FontName","shortCut":"CTRL+SHIFT+F","type":2,"type":8,"attributes":"popupwidth":"60px","name":"RealFontSize","type":2,"type":8,"name":"FormatBlock","type":2,"type":8,"attributes":"popupclassname":"reColorPicker","itemsperrow":"10","sizetofit":"true","name":"ForeColor","type":4,"attributes":"popupclassname":"reColorPicker","itemsperrow":"10","sizetofit":"true","name":"BackColor","type":4,"type":8,"name":"MediaManager","name":"FlashManager","name":"DocumentManager"],"tools":["name":"InsertParagraph","attributes":"popupclassname":"reInsertTable","itemsperrow":"8","sizetofit":"true","name":"InsertTable","type":16,"tools":["name":"TableWizard","text":"Table Wizard","name":"InsertRowAbove","text":"Insert Row Above","name":"InsertRowBelow","text":"Insert Row Below","name":"DeleteRow","text":"Delete Row","name":"InsertColumnLeft","text":"Insert Column to the Left","name":"InsertColumnRight","text":"Insert Column to the Right","name":"DeleteColumn","text":"Delete Column","name":"MergeColumns","text":"Merge Cells Horizontally","name":"MergeRows","text":"Merge Cells Vertically","name":"SplitCellHorizontal","text":"Split Cell Horizontally","name":"SplitCell","text":"Split Cell","name":"DeleteCell","text":"Delete Cell","name":"SetTableProperties","text":"Table Properties"],"attributes":"itemsperrow":"8","sizetofit":"true","popupclassname":"reInsertSymbol","name":"InsertSymbol","type":4,"name":"InsertHorizontalRule","type":8,"name":"Superscript","name":"Subscript","type":8,"attributes":"sizetofit":"true","name":"FormatStripper","type":16,"tools":["name":"StripAll","text":"Strip All Formatting","name":"StripCss","text":"Strip Css Formatting","name":"StripFont","text":"Strip Font Elements","name":"StripSpan","text":"Strip Span Elements","name":"StripWord","text":"Strip Word Formatting"],"type":8,"name":"FindAndReplace","shortCut":"CTRL+F","name":"Print","shortCut":"CTRL+P","name":"ToggleScreenMode"]], "commandExecuting":OnClientCommandExecuting,"load":Telerik$Sitefinity$Web$UI$Fields$HtmlField$radEditorToggleAdvancedToolbars,"pasteHtml":OnClientPasteHtml, "dialogOpener":"ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl_dialogOpener", $get("ctl05_ctl00_ctl00_ctl00_ctl00_ctl00_contentEditor_ctl00_ctl00_editControl"));
);
It appears that my template is repeated twice which Im guessing is why when adding the css
as a link in the template the styles are doubled but I have no idea why
thanks in advance
Hello Jack,
Even if you remove the classes tags from the ToolsFile, the styles declared in the template should be included in the dropdown. However, declaring them on the template might cause the behavior you have reported (duplicating the styles) as it might get duplicated in the stylesheet of the page where the HtmlFiled control is dropped.
In that line of reasoning, I'd suggest you to use an external stylesheet and reference it in the editor. For your convenience I'm attaching a sample template and its codebehind where I've referenced my external stylesheet, the corresponding toolsfile and a screenshot of the results achieved.
ControlTemplates.rar
An alternative would be to modify the StandardToolsFile, as you have properly pointed out, and point your custom classes to the external file containing the CSS.
Kind regards,
Boyan Barnev
the Telerik team
Hey Boyan,
After comparing with your code, I have found out my issue. Having ContentAreaMode="Div" in the RadEditor causes the styles to not show up and the behavior I have described. The documentation did mention that the iframe mode manually copies the css to the iframe element while the div mode inherits from the current page which maybe why. I was using the div mode so I had easier access to the contents of the editor for my custom buttons because I had trouble selecting the text within the iframe.
Just an update to the situation.. for some reason i cannot get headers to appear in the apply css drop down
As you can see in the screenshot, the styles are there and is applied but not visible in drop down.
<
classes
>
<
class
name
=
"Heading1"
value
=
"H1"
/>
<
class
name
=
"Heading2"
value
=
"H2"
/>
<
class
name
=
"Heading3"
value
=
"H3"
/>
<
class
name
=
"normal"
value
=
"p"
/>
</
classes
>
Here is my tools xml
<classes> <class name="Clear Class" value="" /> <class name="Header 1" value="h1" /> <class name="Header 2" value="h2" /> <class name="Header 3" value=".h3" /> <class name="normal" value="p" /> <class name="Indigo" value=".test3" /> <class name="Links" value="a.link" /> <class name="Greenyellow" value=".test1" /> <class name="fuchsia" value=".test2" /> </classes>
Hi Jack,
I would kindly ask you to test whether the same issue reproduce when you have the CSS classes declared in an external stylesheet, and let me know. Looking forwards to your reply.
Best wishes,
Boyan Barnev
the Telerik team
Hey Boyan,
The styles are in a external stylesheet as my screenshot shows. It is currently being added through the backend of editortools.
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
namespace
SitefinityWebApp
public
partial
class
EditorTools : System.Web.UI.UserControl
protected
void
Page_Load(
object
sender, EventArgs e)
this
.editControl.ToolsFile =
"~/Tools.xml"
;
this
.editControl.CssFiles.Add(
"~/Styles/CustomStyles.css"
);
Hi Jack,
Actually you don't need to map the template to add your external stylesheet, all you need to do is remove the <classes> node from your ToolsFile, and add the external stylesheet in <cssFiles> node. Then in the CSS file, the editor is looking for particular classes, so if you specify just
h2
this would not be parsed by the content editor, as you're specifying only the HTML element to which your class will be applied, but you're not specifying an actual class. You can do, for example:
h2.Heading2
and this would successfully apply your Heading2 class to all h2 elements. For the sake of clarity i've recorded a short video demonstrating my current setup, I hope you'll find it useful.
Best wishes,
Boyan Barnev
the Telerik team