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

Forums / General Discussions / Adding a font to content editor

Adding a font to content editor

11 posts, 0 answered
  1. Ron
    Ron avatar
    12 posts
    Registered:
    08 Jun 2010
    07 Apr 2011
    Link to this post
    I need to add  a font to the drowpdown in the the content editor.

    i've modified the AppeanceConfig

    <?xml version="1.0" encoding="utf-8"?>
    <appearanceConfig xmlns:config="urn:telerik:sitefinity:configuration" xmlns:type="urn:telerik:sitefinity:configuration:type" config:version="4.0.1098.0">
     <editorConfigurations>
      <add value="~/EditorToolsFile.xml" key="toolsFile" />
     </editorConfigurations>
     <frontendThemes>
      <add path="/App_Data/Sitefinity/WebsiteTemplates/SRC/App_Themes/SRC" namespace="" assemblyInfo="" name="SRC" />
     </frontendThemes>
    </appearanceConfig>

    and placed my EditortoolsFile.xml in the root of the site -

    It doesn't use the new Editortoolsfile.xml - do I need to do anything else?

    Thanks
    Ron
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    19 Sep 2016
    08 Apr 2011
    Link to this post
    Hello Ron,

    Do you want to add this font to the Content Block editor, or globally for the whole site? Modifying the AppearanceConfig.config and providing custom toolsfile is not enough - you need to map the template for the Content Block editor. Please find below instructions on how to do this.

    1. Create a file, for example ContentBlockTmp.ascx in a directory, let's say Templates:
    <%@ 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" /><%--Location of your CSS style file--%>
    </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="toolsFile"> <%--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. Modify the contents of file AppearanceConfig.config (App_Data\Sitefinity\Configuration\) to include the relative location of the toolsFile and the EditorToolsConfigurationKey specified in the above template . Add the following inside:
    <editorConfigurations>
        <add value="~/Templates/EditorToolsFile.xml" key="toolsFile" /> <!--This key has to be the same as in your template-->
      </editorConfigurations>
    </appearanceConfig>

    3. Please visit our Ajax RadEditor documentation on setting fonts and tools for the RadEditor.
    4. Map the ContentBlockDesigner template from Administration >> Settings >> Advanced >>Controls >>ViewMap

    : Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesigner
    :"relative path to the template where you have declared HtmlField control"

    I hope this information helps. If you need any further help, please do not hesitate to contact me.


    All the best,
    Boyan Barnev
    the Telerik team

  3. Ron
    Ron avatar
    12 posts
    Registered:
    08 Jun 2010
    11 Apr 2011
    Link to this post
    Thanks!
  4. Newton
    Newton avatar
    7 posts
    Registered:
    19 Apr 2011
    03 May 2011
    Link to this post
    I followed these directions for Sitefinity 4.1, but the fonts I added are still not showing up in the Content Block Editor.

    Update: I got it to work by using the Control code in this post:
    http://www.sitefinity.com/devnet/forums/sitefinity-4-x/general-discussions/4-1-upgrade-issue-4-0-custom-content-designer-no-longer-works.aspx

    However, All I really wanted to do was add a font to the drop down in the Editor, but I had to use a custom ToolsFile.xml.  Would it be possible for you to post the default ToolsFile.xml for Sitefinity 4.1 so the look and feel of the Editor window stays the same, but I can add a font?

    Thank you.
  5. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    19 Sep 2016
    04 May 2011
    Link to this post
    Hello Ron,

    Please find attached the Standard configuration for the ToolsFile we're using. If you need any further assistance, please write back.

    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
  6. Venkat
    Venkat avatar
    105 posts
    Registered:
    20 Nov 2008
    10 May 2011
    Link to this post
    We are using Sitefinity 4.1.

    We want show in the RadEditor tool box the option 'Apply Css Class'  drop down item.
    I have followed the instruction, but the Content Editor still not showing the 'Apply Css Class' dropdown item.

    Can you please clearly explain me how can I add this item to our Content Editor.
  7. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    19 Sep 2016
    14 May 2011
    Link to this post
    Hi Ron,

    We introduced several changes in the template for HtmlField, and that's why the provided sample might not work on Sitefinity 4.1 Please follow the updated steps below:
    1. You need to map the template for HtmlField, to do this use the provided below template:

    <%@ 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>
      
                <style type="text/css">
                    a.link
                    
                            color: #0000ff;  
                            font-weight: normal;  
                            font-style: italic;
                    }
                    .img  
                    {
                        border: none;
                    }
                    .redtext
                    {   
                        color: red;
                    }
                </style>
       
                <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>

    Please note several things:
    First, you will need a codefile specified, where you will set the custom ToolsFile for the Editor (in my case CodeFile="~/Controls/EditorTemplate.ascx.cs).
    Second, you need to specify the styles you'll be using declaratively like I've done inside a <style> tag in the template.
    Next step is to create a codefile where you point the Editor control to the location of your custom ToolsFile
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
      
    namespace SitefinityWebApp.Controls
    {
        public partial class EditorTemplate : System.Web.UI.UserControl
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                editControl.PreRender += new EventHandler(editControl_PreRender);
            }
      
            void editControl_PreRender(object sender, EventArgs e)
            {
                editControl.ToolsFile = "~/Controls/EditorTools.xml";
            }
        }
    }

    2. Please find the default ToolsFile we're using for the Editor, and note the tool I've added - ApplyClass, this is what you need to display the ApplyCSSCLass dropdown in the editor toolbar area.:
    <?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 name="ApplyClass" />
        <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):
    : "Telerik.Sitefinity.Web.UI.Fields.HtmlField"
    :"relative path to the template where you have declared HtmlField control"

    Restart the application and you should have the ApplyCSSClass tool in the toolbar area of the texteditor throughout the website. If you wish to add some more custom CSS files, please take a look at this article from our RadEditor documentation.
    If you need any further information, please do not hesitate to write back.

    Best wishes,
    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
  8. KordaMentha
    KordaMentha avatar
    2 posts
    Registered:
    12 Sep 2008
    22 Jul 2014 in reply to Boyan Barnev
    Link to this post
    Is this still current for 7.0.5100.0 the current version
  9. Stefani Tacheva
    Stefani Tacheva avatar
    718 posts
    Registered:
    09 Sep 2016
    25 Jul 2014
    Link to this post
    Hi,

    We have answered you in the support ticket you have opened. I will share our answer with the community.

    We have found an easy way for adding fonts for Content editor. Please check the attached video that we have recorded for demonstration. Keep in mind that the default fonts will be removed and you will be able to see only the fonts that are added.

    Regards,
    Stefani Tacheva
    Telerik
     
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  10. Stepahnie
    Stepahnie avatar
    18 posts
    Registered:
    19 May 2016
    23 Jun in reply to Stefani Tacheva
    Link to this post
    How do you insert the font files into sitefinity to do this?
  11. Pavel Benov
    Pavel Benov avatar
    21 posts
    Registered:
    29 Sep 2016
    28 Jun
    Link to this post
    Hi Stephanie,

    Have you checked the video (AddCustomFont-1 ) my colleague Stefani posted? Please also check our Documentation on the Text editor settings:

    http://docs.sitefinity.com/text-editor-settings

    Due to our editor being based on the RadEditor control, the changes needed to be made to include Fonts are the same as the ones on the base control, so a good source of information is also RadEditor's documentation on this:

    http://docs.telerik.com/devtools/aspnet-ajax/controls/editor/functionality/toolbars/dropdowns/fonts#adding-fontnames-to-toolsfilexml

    Regards,
    Pavel Benov
    Telerik
     
    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 Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
11 posts, 0 answered