How to customize the Content Editor

Posted by Community Admin on 08-Mar-2011 00:00

Hi,

I want to add a new toolbar button to the Content Editor (HtmlField) control in Sitefinity that will appear globally accross the whole site when the editor is shown. This new button will let the user to embed some video contents along with the other content entry. Can someone please tell me how to achieve this?

Thanks,
Duneel

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

Hello Duneel,

Thank you for contacting Telerik Support.

Follow the below steps to add the button to your Content Block Editor globally.

Open your project in Visual Studio

1. Create a file EditorTools.ascx in the root directory of your SitefinityWebApp project and paste the below sample code inside:

Copy Code

<%@ 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="CSS/myCSS.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"

FixCursorIssue="True"

EditorToolsConfiguration="Custom"

EditorToolsConfigurationKey="tools"> <%--This key has to be the same as the key you add in AppearanceConfig.config--%>

</sf:HtmlField>

</div>

<script type="text/javascript">

$("body").addClass("sfContentBlockDesigner");

</script>

2. Create a folder named Controls in yourSitefinityWebApp project and inside create a file named Tools.xml. Paste the following code inside:

Copy Code

<root>

<tools name="MainToolbar" enabled="true"> 

<tool name="AjaxSpellCheck" />

<tool name="InsertSymbol" />

<tool name="FormatCodeBlock" />

<tool separator="true"/> 

<tool name="EmbedVideo"/> 

<tool separator="true"/>

</tools>

</root>

3. From Sitefinity backend go to Administration>>Settings>>Advanced>>Appearance>>EditorConfigurations click on the Create New button and fill in the values accordingly (all without the quotes):

Key: "tools"
Value: "~/Controls/Tools.xml" (this is the relative path to your Tools.xml file, change it accordingly if you wish to put it in other location)

4. Build The project

5. From Sitefinity backend go to Administration>>Settings>>Advanced>>Controls>>ViewMap click on the Create New button and fill in the values accordingly (all without the quotes):

HostType: Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesigner
LayoutTemplatePath:"~/EditorTools.ascx" (relative path to the template where you have declared HtmlField control)

For more information about customizing your new button's icon and implementing its functionality. please refer to Advanced customizations section of our ASP.NET Editor.

I hope this information helps. Please let me know if I can assist you any further with this service request. Thank you in advance.

Kind regards,
Boyan Barnev
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

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

Hi Boyan,

Your solution worked like a charm. Thanks!!

Since now the tool buttons are defined in the xml file I'm not getting the same set of buttons as the content editor has by default. I need to have the default button set plus the new button to appear as in the attached screenshot. How do I do that?

Thanks,
Duneel

Posted by Community Admin on 10-Mar-2011 00:00

Hello Duneel,

Thank you for getting back to me.

I'm attaching a Tools.xml file containing all the buttons that Editor contains, including your custom button. Please review it and modify it according to your requirements.

I hope this information helps. I will be glad to assist you further.

Kind regards,
Boyan Barnev
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

Posted by Community Admin on 10-Mar-2011 00:00

Thank you so much Boyan! The xml file did the trick. You guys are great!!

Posted by Community Admin on 26-Aug-2011 00:00

Hi Boyan, Im trying to add a custom toolbar button as well. I was able to create the files and set up EditorConfigurations and ViewMap but Im getting the following error when trying to edit a content block:

A required control was not found in the template for "~/EditorTools.ascx". The control must be assignable from the type "Telerik.Sitefinity.Web.UI.ControlDesign.ContentSelector" and must have ID "sharedContentSelector".

EditorTools.ascx code is taken straight from your example.

Any idea would be greatly appreciated!

Posted by Community Admin on 30-Aug-2011 00:00

Hi Jack,

Please try with the bellow template for the HtmlField:

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

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

</telerik:RadEditor>

<sf:RadEditorCustomDialogsExtender runat="server" id="editorCustomDialogsExtender" 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>

</sf:ConditionalTemplate>

</Templates>

</sf:ConditionalTemplateContainer>

Best wishes,
Radoslav Georgiev
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 >>

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

Hi Radoslav,
I tried your code and got this error:

A required control was not found in the template for "~/Controls/EditorTools.ascx". The control must be assignable from type "Telerik.Sitefinity.Web.UI.Fields.HtmlField" and must have ID "htmlEditor".

Thanks!
Devin

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

Hello Devin,

Can you please let me know for which class you have mapped this template. It seems that you have mapped the template for HTML field control for a class (control or designer) that utilizes HTML field control.

All the best,
Radoslav Georgiev
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

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

Hi Radoslav,
I was attempting to add the Apply CSS Class dropdown. I found a simpler solution here www.sitefinity.com/.../customizing_the_sitefinity_wysiwyg_editor.aspx.

Thanks!
Devin

Posted by Community Admin on 29-Dec-2011 00:00

I am having the same Issue. I want to adjust the height of the HtmlField Editor. I am unable to do and try to put the template as you suggested in this post. Please, reply me with recommended adjustment I need to do in this issue.

Regards,
Ahmed.

Posted by Community Admin on 03-Jan-2012 00:00

Hi Ahmed,

Please download the latest Sitefinity SDK. It contains all of the default built in templates for Sitefinity controls. You can take the template for the HTML field from there.

Kind regards,
Radoslav Georgiev
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

This thread is closed

All Replies

A required control was not found in the template for "~/Controls/EditorTools.ascx". The control must be assignable from type "Telerik.Sitefinity.Web.UI.Fields.HtmlField" and must have ID "htmlEditor".