Skip to content

Commit 15c374c

Browse files
danail-vasilevdanail-vasilev
authored
Merge pull request #214 from telerik/DefaultFont
Review Default font
2 parents 7851569 + 42e4e0f commit 15c374c

File tree

2 files changed

+302
-0
lines changed

2 files changed

+302
-0
lines changed

‎controls/editor/how-to/save-content-with-default-font.md‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
---
2+
title: Save Content with Default Font
3+
page_title: Save Content with Default Font | RadEditor for ASP.NET AJAX Documentation
4+
description: Save RadEditor Content with Default Font
5+
slug: editor/how-to/save-content-with-default-font
6+
tags: save, content, with, default, font
7+
published: True
8+
position: 12
9+
---
10+
11+
# Save Content with Default Font
12+
13+
In this article you will see how to save the RadEditor's content with a default font.
14+
15+
Generally, the editor's content is saved in a database without the external style sheets. This means only the inline styles will be preserved when the content is saved in a database.
16+
17+
To define a default font for the editor content when it is submitted to the server, you should use inline styles. You can use one of the following approaches:
18+
19+
1. Define a wrapper element with a particular font for the content area.
20+
21+
>caption Example 1: RadEditor content is wrapped inside an element with a particular font.
22+
23+
````ASP.NET
24+
<telerik:RadEditor ID="RadEditor1" runat="server">
25+
<Content>
26+
<div style="font-family:Arial;font-size:20px;">
27+
some content in editor
28+
</div>
29+
</Content>
30+
</telerik:RadEditor>
31+
````
32+
33+
1. Wrap the editor's content in an element with a desired font on submit.
34+
35+
You can use the editor's [get_html()]({%slug editor/client-side-programming/methods/get_html%}) and [set_html()]({%slug editor/client-side-programming/methods/set_html%}) methods in order to get and set the content inside an element with a particular font before submit.
36+
37+
>caption Example 2: Wrap the editor's content inside an element with a desired font on submit.
38+
39+
````ASP.NET
40+
<script>
41+
function submitContent(sender, args) {
42+
var editor = $find("RadEditor2");
43+
editor.set_html("<div style='font-family:Arial;font-size:20px;'>" + editor.get_html() + "</div>");
44+
}
45+
</script>
46+
<telerik:RadButton ID="RadButton1" runat="server" Text="Submit Editor Content" AutoPostBack="true" OnClientClicked="submitContent" />
47+
<telerik:RadEditor ID="RadEditor2" runat="server">
48+
<Content>
49+
some content in editor
50+
</Content>
51+
</telerik:RadEditor>
52+
````
53+
54+
1. Capture the enter keypress over the editor content area in order and fire the editor's format command.
55+
56+
You can fire a particular font command (e.g., `FontName` or `RealFontSize`). This can be done via the toolbar or automatically by attaching to the [enter keypress of the content area]({%slug editor/client-side-programming/events/onclientload%}).
57+
58+
>caption Example 3: Fire editor's font commands when pressing Enter key in the content area.
59+
60+
````ASP.NET
61+
<script>
62+
function OnClientLoad(editor, args) {
63+
editor.attachEventHandler("onkeydown", function (e) {
64+
if (e.keyCode == 13) {
65+
editor.fire("FontName", { value: "Arial" });
66+
editor.fire("RealFontSize", { value: "20px" });
67+
}
68+
});
69+
}
70+
</script>
71+
<telerik:RadEditor ID="RadEditor3" runat="server" OnClientLoad="OnClientLoad">
72+
<Content>
73+
some content in editor
74+
</Content>
75+
</telerik:RadEditor>
76+
````
77+
78+
1. Define external stylesheets and use CSS inliner tool that will convert them to inline styles.
79+
80+
You can use any external CSS inliner tool to convert the external stylesheets of the editor to inline style. The next example shows an integration sample with the [PreMailer.Net](https://github.com/milkshakesoftware/PreMailer.Net) CSS Inliner Tool.
81+
82+
1. Define the .css files via the CssFiles collection.
83+
1. Read the .css files and place that content inside the style tag of the editor content.
84+
1. Execute the CSS Inliner Tool over the modified content.
85+
86+
>caption Example 4: Use an external CSS inliner tool to convert external stylesheets to inline styles.
87+
88+
````CSS
89+
/*ParagraphStylization.css*/
90+
p {
91+
font-family: Arial;
92+
font-size: 20px;
93+
}
94+
95+
````
96+
````ASP.NET
97+
<telerik:RadEditor runat="server" ID="RadEditor1">
98+
<CssFiles>
99+
<telerik:EditorCssFile Value="~/Styles/ParagraphStylization.css" />
100+
</CssFiles>
101+
<Content>
102+
<p>
103+
some content in paragraph
104+
</p>
105+
</Content>
106+
</telerik:RadEditor>
107+
````
108+
````C#
109+
protected void Button1_Click(object sender, EventArgs e)
110+
{
111+
StringBuilder css = new StringBuilder();
112+
foreach (var item in RadEditor1.CssFiles)
113+
{
114+
EditorCssFile cssFile = (EditorCssFile)item;
115+
string path = Server.MapPath(cssFile.Value);
116+
css.Append(File.ReadAllText(path));
117+
}
118+
119+
string content = RadEditor1.Content;
120+
121+
string rawContent = "<html><head><style>" + css.ToString() + "</style></head><body>" + content + "</body></html>";
122+
123+
var contentInlineStyles = PreMailer.Net.PreMailer.MoveCssInline(rawContent, true);
124+
}
125+
````
126+
````VB
127+
Protected Sub Button1_Click(sender As Object, e As EventArgs)
128+
Dim css As New StringBuilder()
129+
For Each item As var In RadEditor1.CssFiles
130+
Dim cssFile As EditorCssFile = DirectCast(item, EditorCssFile)
131+
Dim path As String = Server.MapPath(cssFile.Value)
132+
css.Append(File.ReadAllText(path))
133+
Next
134+
135+
Dim content As String = RadEditor1.Content
136+
137+
Dim rawContent As String = "<html><head><style>" & css.ToString() & "</style></head><body>" & content & "</body></html>"
138+
139+
Dim contentInlineStyles = PreMailer.Net.PreMailer.MoveCssInline(rawContent, True)
140+
End Sub
141+
````
142+
143+
## See Also
144+
145+
* [RadEditor Spellchecker Overview]({%slug editor/functionality/spellchecker/overview%})
146+
* [spellcheck attribute](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/spellcheck)
147+
* [lang attribute](https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/lang)

‎controls/editor/how-to/save-content-with-predefined-font.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
title: Save Content with Predefined Font
3+
page_title: Save Content with Predefined Font | RadEditor for ASP.NET AJAX Documentation
4+
description: Save RadEditor Content with Predefined Font
5+
slug: editor/how-to/save-content-with-predefined-font
6+
tags: save, content, with, predefined, font
7+
published: True
8+
position: 12
9+
---
10+
11+
# Save Content with Predefined Font
12+
13+
In this article you will see how to save the RadEditor's content with a predefined font.
14+
15+
Generally, the editor's content is saved in a database without the external style sheets. This means only the inline styles will be preserved when the content is saved in a database.
16+
17+
To define a default font for the editor content when it is submitted to the server you should use inline styles. You can use one of the following approaches:
18+
19+
* [Define a wrapper element with a particular font for the content area](#define-a-wrapper-element-with-a-particular-font-for-the-content-area)
20+
* [Wrap the editor's content in an element with a desired font on submit](#wrap-the-editors-content-in-an-element-with-a-desired-font-on-submit)
21+
* [Capture the enter key press over the editor content area in order and fire an editor's format command](#capture-the-enter-key-press-over-the-editor-content-area-in-order-and-fire-an-editors-format-command)
22+
* [Define external stylesheets and use CSS inliner tool that will convert them to inline styles](#define-external-stylesheets-and-use-css-inliner-tool-that-will-convert-them-to-inline-styles)
23+
24+
## Define a wrapper element with a particular font for the content area
25+
26+
You can simply wrap the content of the editor inside an HTML element that has the desired inline font.
27+
28+
>caption Example 1: RadEditor content is wrapped inside an element with a particular font.
29+
30+
````ASP.NET
31+
<telerik:RadEditor ID="RadEditor1" runat="server">
32+
<Content>
33+
<div style="font-family:Arial;font-size:20px;">
34+
some content in editor
35+
</div>
36+
</Content>
37+
</telerik:RadEditor>
38+
````
39+
40+
## Wrap the editor's content in an element with a desired font on submit
41+
42+
You can use the editor's [get_html()]({%slug editor/client-side-programming/methods/get_html%}) and [set_html()]({%slug editor/client-side-programming/methods/set_html%}) methods in order to get and set the content inside an element with a particular font before submit.
43+
44+
>caption Example 2: Wrap editor's content inside an element with a desired font on submit.
45+
46+
````ASP.NET
47+
<script>
48+
function submitContent(sender, args) {
49+
var editor = $find("RadEditor2");
50+
editor.set_html("<div style='font-family:Arial;font-size:20px;'>" + editor.get_html(true) + "</div>");
51+
}
52+
</script>
53+
<telerik:RadButton ID="RadButton1" runat="server" Text="Submit Editor Content" AutoPostBack="true" OnClientClicked="submitContent" />
54+
<telerik:RadEditor ID="RadEditor2" runat="server">
55+
<Content>
56+
some content in editor
57+
</Content>
58+
</telerik:RadEditor>
59+
````
60+
61+
## Capture the enter key press over the editor content area in order and fire an editor's format command
62+
63+
You can fire a particular font command (e.g., `FontName` or `RealFontSize`). This can be done via the toolbar or automatically by attaching to the [enter key press of the content area]({%slug editor/client-side-programming/events/onclientload%}).
64+
65+
>caption Example 3: Fire editor's font commands when pressing enter key in the content area.
66+
67+
````ASP.NET
68+
<script>
69+
function OnClientLoad(editor, args) {
70+
editor.attachEventHandler("onkeydown", function (e) {
71+
if (e.keyCode == 13) {
72+
editor.fire("FontName", { value: "Arial" });
73+
editor.fire("RealFontSize", { value: "20px" });
74+
}
75+
});
76+
}
77+
</script>
78+
<telerik:RadEditor ID="RadEditor3" runat="server" OnClientLoad="OnClientLoad">
79+
<Content>
80+
some content in editor
81+
</Content>
82+
</telerik:RadEditor>
83+
````
84+
85+
## Define external stylesheets and use CSS inliner tool that will convert them to inline styles
86+
87+
You can use any external CSS Inliner Tool to convert the external stylesheets of the editor to inline styles (**Example 4**).
88+
89+
1. Define the .css files via the CssFiles collection.
90+
1. Read the .css files and place that content inside the style tag of the editor content.
91+
1. Execute the CSS Inliner Tool over the modified content.
92+
93+
>caption Example 4: Use an external CSS Inliner Tool to convert external stylesheets to inline styles.
94+
95+
````CSS
96+
/*ParagraphStylization.css*/
97+
p {
98+
font-family: Arial;
99+
font-size: 20px;
100+
}
101+
102+
````
103+
````ASP.NET
104+
<telerik:RadEditor runat="server" ID="RadEditor1">
105+
<CssFiles>
106+
<telerik:EditorCssFile Value="~/Styles/ParagraphStylization.css" />
107+
</CssFiles>
108+
<Content>
109+
<p>
110+
some content in paragraph
111+
</p>
112+
</Content>
113+
</telerik:RadEditor>
114+
````
115+
````C#
116+
protected void Button1_Click(object sender, EventArgs e)
117+
{
118+
StringBuilder css = new StringBuilder();
119+
foreach (var item in RadEditor1.CssFiles)
120+
{
121+
EditorCssFile cssFile = (EditorCssFile)item;
122+
string path = Server.MapPath(cssFile.Value);
123+
css.Append(File.ReadAllText(path));
124+
}
125+
126+
string content = RadEditor1.Content;
127+
128+
string rawContent = "<html><head><style>" + css.ToString() + "</style></head><body>" + content + "</body></html>";
129+
130+
var contentInlineStyles = MyCSSInlinerTool.MoveCssInline(rawContent, true); //Where MyCSSInlinerTool is an external tool that that converts stylesheets to inline styles.
131+
}
132+
````
133+
````VB
134+
Protected Sub Button1_Click(sender As Object, e As EventArgs)
135+
Dim css As New StringBuilder()
136+
For Each item As var In RadEditor1.CssFiles
137+
Dim cssFile As EditorCssFile = DirectCast(item, EditorCssFile)
138+
Dim path As String = Server.MapPath(cssFile.Value)
139+
css.Append(File.ReadAllText(path))
140+
Next
141+
142+
Dim content As String = RadEditor1.Content
143+
144+
Dim rawContent As String = "<html><head><style>" & css.ToString() & "</style></head><body>" & content & "</body></html>"
145+
146+
Dim contentInlineStyles = MyCSSInlinerTool.MoveCssInline(rawContent, True) 'Where MyCSSInlinerTool is an external tool that that converts stylesheets to inline styles.
147+
End Sub
148+
````
149+
150+
## See Also
151+
152+
* [RadEditor OnClientLoad event]({%slug editor/client-side-programming/events/onclientload%})
153+
* [RadEditor get_html() method]({%slug editor/client-side-programming/methods/get_html%})
154+
* [RadEditor set_html() method]({%slug editor/client-side-programming/methods/set_html%})
155+
* [PreMailer.Net](https://github.com/milkshakesoftware/PreMailer.Net)

0 commit comments

Comments
 (0)