+1-888-365-2779
Try Now
More in this section

Forums / Sitefinity SDK / How to customize the Content Editor

How to customize the Content Editor

12 posts, 1 answered
  1. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    08 Mar 2011
    Link to this post
    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
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    19 Sep 2016
    09 Mar 2011
    Link to this post
    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
    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
    Copy Code
    <root>
     <tools name="MainToolbar" enabled="true"> <!--you'll be working with the buttons in the main section-->
       <tool name="AjaxSpellCheck" />
       <tool name="InsertSymbol" />
       <tool name="FormatCodeBlock" />
       <tool separator="true"/> <!--you can use tool separators to separate your button-->
       <tool name="EmbedVideo"/> <!--this will be your button-->
       <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!
  3. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    09 Mar 2011
    Link to this post
    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
  4. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    19 Sep 2016
    10 Mar 2011
    Link to this post
    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!
    Answered
  5. Duneel
    Duneel avatar
    166 posts
    Registered:
    08 Dec 2010
    10 Mar 2011
    Link to this post
    Thank you so much Boyan! The xml file did the trick. You guys are great!!
  6. Jack
    Jack avatar
    23 posts
    Registered:
    03 May 2011
    26 Aug 2011
    Link to this post
    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!


  7. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    30 Aug 2011
    Link to this post
    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 >>

  8. Devin
    Devin avatar
    149 posts
    Registered:
    09 Jun 2009
    09 Nov 2011
    Link to this post
    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
  9. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    09 Nov 2011
    Link to this post
    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 >>

  10. Devin
    Devin avatar
    149 posts
    Registered:
    09 Jun 2009
    09 Nov 2011
    Link to this post
    Hi Radoslav,
    I was attempting to add the Apply CSS Class dropdown.  I found a simpler solution here http://www.sitefinity.com/blogs/grishakaranikolov/posts/11-07-25/customizing_the_sitefinity_wysiwyg_editor.aspx.

    Thanks!
    Devin
  11. Ishtiyaq
    Ishtiyaq avatar
    11 posts
    Registered:
    17 Sep 2011
    29 Dec 2011
    Link to this post
    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.
  12. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    03 Jan 2012
    Link to this post
    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 >>

12 posts, 1 answered