We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Any way to add new fonts to RTE

Thread ID:

Created:

Updated:

Platform:

Replies:

118953 Apr 27,2015 07:13 PM Apr 30,2015 08:20 AM ASP.NET MVC 1
loading
Tags: RichTextEditor
Erdem Isikdogan
Asked On April 27, 2015 07:13 PM

Hi,

Are there any way to include new fonts in RTE to the defaults?

I could not find any documentation for this.

Thanks for your helps.

Erdem

Saranya Sivakumar [Syncfusion]
Replied On April 30, 2015 08:20 AM

Hi Erdem

Thanks for using Syncfusion products.

We would like to let you know that we can add new fonts by using the Custom Tool option in RTE control. But we cannot add or edit the default font options present in the RTE control. CustomTool is used to add any controls additionally in the RTE control. We have to create a list and assign it to the ToolsList API which is used to set the ToolsList in RTE as shown in the following code snippet.

<code>

@{List<String> toolsList = new List<string>() { "customTool" };

@{Html.EJ().RTE("rteSample").IFrameAttribute("color:#5C5C5C").ContentTemplate(@<p>

Your RTE content...</p>).ShowFooter(true).ToolsList(toolsList).Tools(tool => tool).CustomTool(custom =>

custom.Name("codeInsert").Css("codeInsert").Action("openDialog").Add())).Clear(clear).FormatStyle(formatStyle).Tables(tables).Links(links).Images(images).Scripts(scripts).Casing(casing).Font(font).Styles(style).Alignment(alignment).Lists(lists).CopyPaste(copyPaste).DoAction(doAction).ClientSideEvents(e=>e.Create("onCreate")).Render();}</code>

After setting ToolsList we have to add custom tool to the RTE as highlighted above. Then we have to render Dropdownlist in the create event of RTE control as shown below.

<code>

function onCreate() {

var ddl = $("#codeInsert");

$("#codeInsert").find("div").remove();

var ddltarget = $('#selectCar')

ddl.append(ddltarget);

$('#selectCar').ejDropDownList({

targetID: "carsList",

width: "200px",

select: "select"

});

}

</code>

After rendering Dropdownlist in the RTE control we have to set the new fonts as the Dropdownlist items by appending the font face style tag with the RTE value as shown in the following code snippet.

<code>

var obj = $("#rteSample").data("ejRTE");

var content = obj.option("value");

obj.option("value", "<font face=Times Roman" + content + "</font>");

</code>

We have to set the font in the select event of the Dropdownlist control. For your convenience we have prepared the sample based on your requirement and it can be downloaded from the following location.

http://www.syncfusion.com/uploads/user/forum/118953/RTECustomTool-597355938.zip

Also we are having an online documention for custom tool option and it can be found under the following link.

http://help.syncfusion.com/ug/js/Documents/customizedtoolsoption.htm

Please let us know if you have further concern.

Regards,

Saranya.S


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;