Adding a font to content editor

Posted by Community Admin on 03-Aug-2018 20:30

Adding a font to content editor

All Replies

Posted by Community Admin on 07-Apr-2011 00:00

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

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

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

Posted by Community Admin on 11-Apr-2011 00:00

Thanks!

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

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.

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

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

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

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.

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

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

Posted by Community Admin on 22-Jul-2014 00:00

Is this still current for 7.0.5100.0 the current version

Posted by Community Admin on 25-Jul-2014 00:00

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

[View:/cfs-file/__key/communityserver-discussions-components-files/295/42670ebb_2D00_ac7c_2D00_4c04_2D00_a66a_2D00_54f360e5dc42_5F00_fe8ef1fb_2D00_d42a_2D00_4a22_2D00_bc43_2D00_99c02885f0f0_2D00_AddCustomFont_2D00_1.zip:320:240]

 
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
 

Posted by Community Admin on 23-Jun-2016 00:00

How do you insert the font files into sitefinity to do this?

Posted by Community Admin on 28-Jun-2016 00:00

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
 

This thread is closed