Adding a font to content editor - General Discussions - General Discussions - Progress Community
 General Discussions

Adding a font to content editor

  • Adding a font to content editor
  • 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
  • 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

    HostType: Telerik.Sitefinity.Modules.GenericContent.Web.UI.ContentBlockDesigner
    LayoutTemplatePath:"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

  • Thanks!
  • 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:
    www.sitefinity.com/.../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.
  • 267987_Tools.rar
    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
  • 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.
  • 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):
    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 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
  • Is this still current for 7.0.5100.0 the current version
  • 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

    42670ebb-ac7c-4c04-a66a-54f360e5dc42_fe8ef1fb-d42a-4a22-bc43-99c02885f0f0-AddCustomFont-1.zip

     
    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
     
  • How do you insert the font files into sitefinity to do this?
  • 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