Adding a font to content editor

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" /> 

</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

All Replies