Skip to content

Commit 4f2f1d7

Browse files
svdimitrmarin-bratanov
svdimitr
and
marin-bratanov
authored
Add KB article on changing the default font of the Editor (#135)
* chore(kb): change the default font family of the editor * chode(kb): minor improvements * chore(kb): add additional example to the editor * chore(kb): fix image alt text * chore(kb): fix screenshot DPI, add necessary using statement, fix indentation Co-authored-by: Marin Bratanov <[email protected]>
1 parent 43e0a57 commit 4f2f1d7

File tree

3 files changed

+154
-0
lines changed

3 files changed

+154
-0
lines changed

‎knowledge-base/editor-default-font.md

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
---
2+
title: Set default font family to the Editor in Div mode
3+
description: How to set default font family to the Editor in Div mode
4+
type: how-to
5+
page_title: Set default font family to the Editor in Div mode
6+
slug: editor-kb-default-font
7+
position:
8+
tags:
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>Editor for Blazor</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
22+
23+
## Description
24+
25+
I would like to set a default font typeface to the Editor.
26+
27+
28+
29+
## Solutions
30+
31+
The default font typeface of the content area of the Editor is based on the default font of the browser it is run under. When you are using the Editor in [Div]({%slug editor-edit-modes-div%}) edit mode you can use CSS rules to define the default font-family for the content area of the component. The control exposes a `Class` parameter that takes a custom CSS class which can be used to cascade the required styles.
32+
33+
>caption Set a default font family for the content area of the Editor in Div edit mode
34+
35+
````CSHTML
36+
@* The style rule is important, it matches the Class of the component *@
37+
38+
<style>
39+
.myTelerikEditor div.k-editor-content div.k-content {
40+
font-family: "Arial Black", Gadget, sans-serif;
41+
}
42+
</style>
43+
44+
<TelerikEditor @bind-Value="@TheEditorValue"
45+
Width="650px"
46+
Height="400px"
47+
EditMode="@EditorEditMode.Div"
48+
Class="myTelerikEditor">
49+
</TelerikEditor>
50+
51+
@code{
52+
string TheEditorValue { get; set; }
53+
54+
protected override Task OnInitializedAsync()
55+
{
56+
TheEditorValue = @"
57+
<p>
58+
The Blazor Editor allows your users to edit HTML in a familiar, user-friendly way. Your users do not have to understand HTML in order to create it.
59+
</p>
60+
<p>
61+
The widget <strong>outputs identical HTML</strong> across all major browsers, follows
62+
accessibility standards, and provides API for content manipulation.
63+
</p>
64+
<p>Features include:</p>
65+
<ul>
66+
<li>Text formatting</li>
67+
<li>Bulleted and numbered lists</li>
68+
<li>Hyperlinks</li>
69+
<li>Cross-browser support</li>
70+
<li>Identical HTML output across browsers</li>
71+
<li>Ability to create custom tools, dropdowns, dialogs</li>
72+
</ul>
73+
";
74+
return base.OnInitializedAsync();
75+
}
76+
}
77+
````
78+
79+
>caption The result from the code snippet above
80+
81+
![set the default content font using CSS](images/editor-default-font-family-example.png)
82+
83+
## Additional Example
84+
85+
This example showcases how to set a default font for the content area of the Editor and add that font to the built-in FontFamily tool.
86+
87+
````CSHTML
88+
@using Telerik.Blazor.Components.Editor
89+
90+
<style>
91+
.myTelerikEditor div.k-editor-content div.k-content {
92+
font-family: "Arial Black", Gadget, sans-serif;
93+
}
94+
</style>
95+
96+
<TelerikEditor @bind-Value="@TheEditorValue"
97+
Width="650px"
98+
Height="400px"
99+
EditMode="@EditorEditMode.Div"
100+
Tools="@MyTools"
101+
Class="myTelerikEditor">
102+
</TelerikEditor>
103+
104+
@code{
105+
string TheEditorValue { get; set; }
106+
public List<IEditorTool> MyTools { get; set; }
107+
108+
protected override Task OnInitializedAsync()
109+
{
110+
//initialize the toolbar collection with all built-in tools
111+
MyTools = new List<IEditorTool>(EditorToolSets.Default);
112+
113+
//add the typeface to the default list of fonts
114+
List<EditorDropDownListItem> fontFamilyChoices = new List<EditorDropDownListItem>(EditorDropDownListToolItems.FontFamilyItems);
115+
fontFamilyChoices.Add(new EditorDropDownListItem()
116+
{
117+
Text = "Arial Black",
118+
Value = "Arial Black"
119+
});
120+
121+
MyTools.Add(new FontFamily() { Data = fontFamilyChoices });
122+
123+
TheEditorValue = @"
124+
<p>
125+
The Blazor Editor allows your users to edit HTML in a familiar, user-friendly way. Your users do not have to understand HTML in order to create it.
126+
</p>
127+
<p>
128+
The widget <strong>outputs identical HTML</strong> across all major browsers, follows
129+
accessibility standards, and provides API for content manipulation.
130+
</p>
131+
<p>Features include:</p>
132+
<ul>
133+
<li>Text formatting</li>
134+
<li>Bulleted and numbered lists</li>
135+
<li>Hyperlinks</li>
136+
<li>Cross-browser support</li>
137+
<li>Identical HTML output across browsers</li>
138+
<li>Ability to create custom tools, dropdowns, dialogs</li>
139+
</ul>
140+
";
141+
return base.OnInitializedAsync();
142+
}
143+
}
144+
````
145+
146+
>caption The result from the code snippet above
147+
148+
![set the default content font using CSS and the fond to the Font family tool](images/editor-default-font-family-additional-example.png)
149+
150+
151+
152+
153+
154+

‎knowledge-base/images/editor-default-font-family-additional-example.png

26.7 KB
Loading

‎knowledge-base/images/editor-default-font-family-example.png

23.4 KB
Loading

0 commit comments

Comments
 (0)