Hi,
How to enable the font family attribute for the default font?
We have an editor for user to construct their email to send email newsletter.
The default font is Arial so when user select Arial, it doesn't have the font tag.
The problem comes when recipient receive the email in Outlook or other email clients that uses Times New Roman as default font.
This will render the text as Times New Roman since there is no font-tag in the email.
Thanks.
How to enable the font family attribute for the default font?
We have an editor for user to construct their email to send email newsletter.
The default font is Arial so when user select Arial, it doesn't have the font tag.
The problem comes when recipient receive the email in Outlook or other email clients that uses Times New Roman as default font.
This will render the text as Times New Roman since there is no font-tag in the email.
Thanks.
3 Answers, 1 is accepted
0
Hello,
The problem that you experience is explained in the following KB article: No FONT tags are applied when I type text in the editor. The FontSize and FontName tools will not apply a font tag to the selected content, if the user selects the same font size and font name as the default one of the browser (content area).
You can use the following code solution to wrap the initial content or the empty content of RadEditor in a span tag with Arial 14px, e.g.
Another way is to wrap the obtained content on the server in a span tag having the desired font-size style in pixels, e.g.
RadEditor1.Content = "<span style='font-family: Arial;font-size: 14px;'>" + RadEditor1.Content + "</span>";
Kind regards,
Rumen
the Telerik team
The problem that you experience is explained in the following KB article: No FONT tags are applied when I type text in the editor. The FontSize and FontName tools will not apply a font tag to the selected content, if the user selects the same font size and font name as the default one of the browser (content area).
You can use the following code solution to wrap the initial content or the empty content of RadEditor in a span tag with Arial 14px, e.g.
Copy Code
<telerik:radeditor runat=
"server"
OnClientLoad=
"OnClientLoad"
ID=
"RadEditor1"
>
</telerik:radeditor>
<script type=
"text/javascript"
>
function
OnClientLoad(editor) {
setTimeout(
function
() {
var
tool = editor.getToolByName(
"RealFontSize"
);
tool.set_value(
"14px"
);
var
args =
new
Telerik.Web.UI.EditorCommandEventArgs(
"RealFontSize"
,
null
,
"14px"
);
editor.fire(
"RealFontSize"
, args);
editor.fire(
"FontName"
, { value:
"Arial"
});
}, 0);
}
</script>
Another way is to wrap the obtained content on the server in a span tag having the desired font-size style in pixels, e.g.
RadEditor1.Content = "<span style='font-family: Arial;font-size: 14px;'>" + RadEditor1.Content + "</span>";
Kind regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Charles
Top achievements
Rank 1
answered on 06 Sep 2017, 03:11 PM
The script above does not work when the editor is in a radPageView. The getToolByName returns null and the .set_value throws an error. Can you come up with a workaround?
0
Hi Charles,
You can try the following approach:
Regards,
Rumen
Progress Telerik
You can try the following approach:
<telerik:RadTabStrip ID=
"RadTab1"
runat=
"server"
OnClientTabSelected=
"OnClientTabSelecting"
SelectedIndex=
"0"
MultiPageID=
"RadMultiPage1"
>
<Tabs>
<telerik:RadTab runat=
"server"
PageViewID=
"RadPageView1"
Text=
"RadTab1"
>
</telerik:RadTab>
<telerik:RadTab runat=
"server"
PageViewID=
"RadPageView2"
Text=
"RadTab2"
>
</telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID=
"RadMultiPage1"
runat=
"server"
>
<telerik:RadPageView ID=
"RadPageView1"
Selected=
"true"
runat=
"server"
>
<telerik:RadEditor ID=
"RadEditor1"
runat=
"server"
OnClientLoad=
"OnClientLoad"
></telerik:RadEditor>
</telerik:RadPageView>
<telerik:RadPageView ID=
"RadPageView2"
runat=
"server"
>
<telerik:RadEditor ID=
"RadEditor2"
runat=
"server"
></telerik:RadEditor>
</telerik:RadPageView>
</telerik:RadMultiPage>
<script>
function
OnClientLoad(editor) {
try
{
setTimeout(
function
() {
var
tool = editor.getToolByName(
"RealFontSize"
);
tool.set_value(
"13px"
);
var
args =
new
Telerik.Web.UI.EditorCommandEventArgs(
"RealFontSize"
,
null
,
"13px"
);
editor.fire(
"RealFontSize"
, args);
editor.fire(
"FontName"
, { value:
"Tahoma"
});
},0);
}
catch
(err) { }
}
function
OnClientTabSelecting(sender, args) {
var
tab = args.get_tab();
if
(tab.get_text() ==
"RadTab2"
) {
setTimeout(
function
() {
var
editor2 = $find(
"<%=RadEditor2.ClientID%>"
);
var
args =
new
Telerik.Web.UI.EditorCommandEventArgs(
"RealFontSize"
,
null
,
"13px"
);
editor2.fire(
"RealFontSize"
, args);
var
tool = editor2.getToolByName(
"RealFontSize"
);
tool.set_value(
"13px"
);
editor2.fire(
"FontName"
, { value:
"Tahoma"
});
}, 100);
}
}
</script>
Regards,
Rumen
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.