Content Block Editor - Toggle Advanced formatting options no - Sitefinity - General Discussions

All Replies

Posted by Community Admin on 06-May-2011 00:00

Hi,
I wanted to modify the formatting options that are visible to user when the content editor box opens, So I followed this example and created a custom control and toolsfile.xml. I only wanted to move around the items from one <tools> to another. But after doing that, it doesnt behave the same way. It shows a blank box [see fig1 in the attached image] intead of "more formatting options" and it shows all the tools together. Clicking on the blank box shows all the items with the more formatting options button [see fig2 in attached image].

What should happen is that it should show fig2 when the dialog box opens.
Here's my tools file:

<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" >

<tool name="ToggleAdvancedToolbars"/>

<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"/>

<tool name="FormatBlock"/>

<tool separator="true"/>

<tool name="ForeColor"/>

</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 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>

<colors>

<color value=""/> 

<color value="#000000"/>

<color value="#eeece1"/>

<color value="#1f497d"/>

<color value="#4f81bd"/>

<color value="#c0504d"/>

<color value="#9bbb59"/>

<color value="#8064a2"/>

</colors>

</root>

Is this a bug with sitefinity or radcontrols? I'm using Sitefinity 4.1.
How do I fix this.

Thanks
Nidhi

Posted by Community Admin on 09-May-2011 00:00

Hello Nidhi,

Did you use the template provided by Steve in the forum thread you mentioned? It's missing the radEditorToggleAdvancedToolbars declaration in the template. Please refer to the below template I've provided and the instructions on mapping the template for HtmlField throughout Sitefinity.

1. You need to map the template for HtmlField, to do this use the provided below template:

Copy Code

<%@ Control Language="C#" CodeFile="~/Controls/EditorTemplate.ascx.cs" Inherits="SitefinityWebApp.Controls.EditorTemplate"%>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" 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" AssociatedControlID="editControl" />

<asp:LinkButton ID="expandLink" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander" />

<asp:Panel ID="expandableTarget" runat="server" CssClass="sfEditorWrp sfClearfix">

<telerik:RadEditor

ID="editControl"

runat="server"

Skin="Sitefinity"

Width="100%"

Height="550px"

EnableResize="False"

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">

<FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />

</telerik:RadEditor>

<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>

2. Please find the default ToolsFile we're using for the Editor:

Copy Code

<?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">

<tool name="ToggleAdvancedToolbars"/>

<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" />

</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>

3. Once you have built the project, go to Sitefinity Backend -> Administration->Settings->Advanced->Controls->ViewMap and create and click on the Creae new button.
Fill in the fields accordingly (all without the quotes):
HostType: "Telerik.Sitefinity.Web.UI.Fields.HtmlField"
LayoutTemplatePath:"relative path to the template where you have declared HtmlField control"

Restart the application and you should see the changes in Content Block. Please take a look at this article from our RadEditor documentation if you need any further information regarding modification of the content editor. If the problems persist, please do not hesitate to write back.

All the best,
Boyan Barnev
the Telerik team

Regards,
Boyan Barnev
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 09-May-2011 00:00

This was perfect, thank Boyan.
I just added the attribute toolsfile to the telerik:radeditor control to link it to my custom toolsfile.xml in the code provided by Boyan, and everything works like a charm!

This thread is closed