You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/rich-text-editor/style.md
+11-10Lines changed: 11 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,13 @@
1
1
---
2
2
layout: post
3
-
title: Style and appearance in Blazor RichTextEditor Component | Syncfusion
4
-
description: Checkout and learn here all about Style and appearance in Syncfusion Blazor RichTextEditor component and more.
3
+
title: Style and appearance in Blazor Rich Text Editor Component | Syncfusion
4
+
description: Checkout and learn here all about Style and appearance in Syncfusion Blazor Rich Text Editor component and more.
5
5
platform: Blazor
6
6
control: RichTextEditor
7
7
documentation: ug
8
8
---
9
9
10
-
# Style and Appearance
10
+
# Styling and Appearance
11
11
12
12
## Set placeholder
13
13
@@ -43,7 +43,8 @@ Use the `e-rte-placeholder` class to define the custom font family, font color,
43
43
44
44
## Source code view
45
45
46
-
The Rich Text Editor enables you to directly edit HTML code through the `Source View` in the text area. Any changes you make in Source view are immediately reflected in the editor's content, giving you greater flexibility and control over your work.
46
+
The Rich Text Editor allows users to directly edit HTML code using the `Source View` mode. Changes made in Source View are instantly reflected in the editor's content, providing enhanced flexibility and control over content formatting.
47
+
47
48
The source code is presented with enhanced formatting and consistent indentation for both block-level and inline HTML elements, resulting in a cleaner, more readable, and user-friendly editing experience.
48
49
49
50
>While the visual alignment of the source code is improved, the editor's underlying value remains unchanged.
@@ -60,7 +61,7 @@ The source code is presented with enhanced formatting and consistent indentation
60
61
61
62
## Customizing editor content
62
63
63
-
Use the following CSS to customize the default Rich Text Editor's content properties like font-family, font-size and color.
64
+
Apply the following CSS to customize the default content styling of the Rich Text Editor like font-family, font-size and color.
64
65
65
66
```css
66
67
/* To change font family and font size */
@@ -80,9 +81,9 @@ Use the following CSS to customize the default Rich Text Editor's content proper
80
81
81
82
82
83
83
-
## Customizing editor toolbar
84
+
## Customize toolbar appearance
84
85
85
-
Use the following CSS to customize the default color of the Rich Text Editor's toolbar icon.
86
+
Apply the following CSS to modify the default color of toolbar icons in the Rich Text Editor.
86
87
87
88
```css
88
89
/* To change font color for toolbar icon */
@@ -112,7 +113,7 @@ Use the following CSS to customize the default color of the Rich Text Editor's t
112
113
```
113
114
114
115
115
-
### Refresh editor
116
+
### Refreshing the editor UI
116
117
117
118
While rendering the Rich Text Editor inside the dialog component, the dialog container and its wrapper elements are styled with display: none, so the editor’s toolbar does not get the proper offset width and will render above the edit area container. To resolve this issue, call the `RefreshUI` method of the RichTextEditor in the dialog's opened event.
118
119
@@ -130,7 +131,7 @@ While rendering the Rich Text Editor inside the dialog component, the dialog con
130
131
131
132
Programmatically highlight a portion of the text in the editor, like setting the background color of the text by applying background style to the particular text using the RichTextEditor [ExecuteCommand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ExecuteCommandOption.html) method and the `jsinterop` method.
132
133
133
-
Refer the jsintrob method in the `<head>` wwwroot/jsinterop.js of the file.
134
+
Refer to the `jsinterop` method in the `<head>` wwwroot/jsinterop.js of the file.
134
135
135
136
{% tabs %}
136
137
{% highlight razor tabtitle="~/_jsinterop.js" %}
@@ -147,7 +148,7 @@ window.RichTextEditor = {
147
148
{% endhighlight %}
148
149
{% endtabs %}
149
150
150
-
Refer script in the `<head>` of the **~/Pages/_Host.cshtml** file.
151
+
Include the script reference in the `<head>` of the **~/Pages/_Host.cshtml** file.
Copy file name to clipboardExpand all lines: blazor/rich-text-editor/toolbar.md
+28-27Lines changed: 28 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,15 @@
1
1
---
2
2
layout: post
3
-
title: Toolbar in Blazor RichTextEditor | Syncfusion
4
-
description: Checkout and learn here all about Toolbar in Syncfusion Blazor RichTextEditor component and much more.
3
+
title: Toolbar Configuration in Blazor Rich Text Editor | Syncfusion
4
+
description: Checkout and learn here all about Toolbar in Syncfusion Blazor Rich Text Editor component and much more.
5
5
platform: Blazor
6
6
control: RichTextEditor
7
7
documentation: ug
8
8
---
9
9
10
-
# Toolbar types in Blazor RichTextEditor
10
+
# Toolbar types in Blazor Rich Text Editor
11
11
12
-
The Rich Text Editor toolbar contains a collection of tools such as bold, Italic, and text alignment buttons that are used to format the content.
12
+
The Rich Text Editor toolbar provides a collection of tools such as Bold, Italic, and text alignment buttons used to format the content.
13
13
14
14
You can customize the toolbar configurations by using the [RichTextEditorToolbarSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Type) property. The types of toolbar are:
15
15
@@ -18,9 +18,9 @@ You can customize the toolbar configurations by using the [RichTextEditorToolbar
18
18
3. Scrollable
19
19
4. Popup
20
20
21
-
## Expand Toolbar
21
+
## Expand toolbar
22
22
23
-
The expand toolbar allows to hide the overflowing items in the next line by using the [ToolbarType.Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Expand) property. By clicking the expand arrow, you can view the overflowing toolbar items. The default mode of toolbar is `Expand`.
23
+
The [Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Expand) toolbar hides overflowing items in the next line using the property. By clicking the expand arrow, you can view the overflowing toolbar items. The default mode of toolbar is `Expand`.
24
24
25
25
{% tabs %}
26
26
{% highlight razor %}
@@ -32,9 +32,9 @@ The expand toolbar allows to hide the overflowing items in the next line by usin
You can display the toolbar items in a row-wise format by using the [ToolbarType.MultiRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_MultiRow) property. All toolbar items are visible always.
37
+
The [MultiRow]((https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_MultiRow)) toolbar displays items in multiple rows, ensuring all items are always visible.
38
38
39
39
{% tabs %}
40
40
{% highlight razor %}
@@ -46,9 +46,9 @@ You can display the toolbar items in a row-wise format by using the [ToolbarType
You can display the toolbar items in a single line with horizontal scrolling by using the [ToolbarType.Scrollable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Scrollable)property.
51
+
The [Scrollable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Scrollable)toolbar displays items in a single row with horizontal scrolling enabled.
52
52
53
53
{% tabs %}
54
54
{% highlight razor %}
@@ -62,7 +62,7 @@ You can display the toolbar items in a single line with horizontal scrolling by
62
62
63
63
## Configuring a popup toolbar
64
64
65
-
You can display the toolbar items in a popup container by setting the [ToolbarType.Popup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Popup) property, which optimizes the toolbar layout for limited space and smaller screens.
65
+
The [Popup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.ToolbarType.html#Syncfusion_Blazor_RichTextEditor_ToolbarType_Popup)toolbar property displays items in a popup container, ideal for limited space or smaller screens.
66
66
67
67
{% tabs %}
68
68
{% highlight razor %}
@@ -74,7 +74,7 @@ You can display the toolbar items in a popup container by setting the [ToolbarTy
By default, toolbar is float at the top of the Rich Text Editor on scrolling. It can be customized by specifying the offset of the floating toolbar from documents top position using [FloatingToolbarOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_FloatingToolbarOffset).
80
80
@@ -101,7 +101,7 @@ The Rich Text Editor allows you to position the toolbar at the top or bottom of
101
101
102
102
By default, the toolbar is displayed at the top of the editor, making all formatting and editing tools immediately accessible above the content.
103
103
104
-
To position the toolbar at the bottom, use the [RichTextEditorToolbarSettings.Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Position) property and set its value to `Bottom`. This places the toolbar below the content area, which can help maintain a cleaner top layout and improve accessibility in certain use cases.
104
+
To move the toolbar to the bottom, use the [RichTextEditorToolbarSettings.Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Position) property and set its value to `Bottom`. This places the toolbar below the content area, which can help maintain a cleaner top layout and improve accessibility in certain use cases.
105
105
106
106
{% tabs %}
107
107
{% highlight razor %}
@@ -113,7 +113,7 @@ To position the toolbar at the bottom, use the [RichTextEditorToolbarSettings.Po
The Rich text editor has quick toolbars that are open as context-menu on clicking the image, link, audio, video and table elements. By default, the below quick toolbar items show on click on the corresponding elements. You can customize the quick toolbar items using the [RichTextEditorQuickToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html) property.
119
119
@@ -126,9 +126,9 @@ The Rich text editor has quick toolbars that are open as context-menu on clickin
|[Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.VideoToolbarCommand.html#fields)|No Default item have it and it support the all toolbar items |
128
128
129
-
### Image quick Toolbar
129
+
### Image quick toolbar
130
130
131
-
You can customize the inserted image in the editor by using the [RichTextEditorQuickToolbarSettings.Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Image) property. The image quick toolbar has the following items.
131
+
Customize the inserted image using the [RichTextEditorQuickToolbarSettings.Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Image) property. The image quick toolbar has the following items.
132
132
133
133
| Image Toolabr items | Description |
134
134
| --------------------| ------------- |
@@ -151,9 +151,9 @@ You can customize the inserted image in the editor by using the [RichTextEditorQ
You can customize the selected link inside the editor through the quick toolbar by using[RichTextEditorQuickToolbarSettings.Link](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Link) property. The quick toolbar for link has the following options.
156
+
Customize the selected link using the [RichTextEditorQuickToolbarSettings.Link](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Link) property. The quick toolbar for link has the following options.
@@ -171,9 +171,9 @@ You can customize the selected link inside the editor through the quick toolbar
171
171
172
172
173
173
174
-
### Table quick Toolbar
174
+
### Table quick toolbar
175
175
176
-
Quick toolbar is opened by clicking the table. You can customize the table by using the [RichTextEditorQuickToolbarSettings.Table](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Table) property. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily.
176
+
The table quick toolbar appears when clicking on a table. You can customize the table by using the [RichTextEditorQuickToolbarSettings.Table](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Table) property. It has different sets of commands to be performed on the table which increases the feasibility to edit the table easily.
The Rich Text Editor allows you to customize the inserted audio by using the [RichTextEditorQuickToolbarSettings.Audio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) property. The audio quick toolbar has the following items.
200
+
Customize the inserted audio using the [RichTextEditorQuickToolbarSettings.Audio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) property. The audio quick toolbar has the following items.
The Rich Text Editor allows you to customize the inserted video by using the [RichTextEditorQuickToolbarSettings.video](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Video) property. The video quick toolbar has the following items.
220
+
Customize the inserted video using the [RichTextEditorQuickToolbarSettings.video](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Video) property. The video quick toolbar has the following items.
@@ -239,9 +239,9 @@ The Rich Text Editor allows you to customize the inserted video by using the [Ri
239
239
240
240
N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/overview?theme=bootstrap5) example to knows how to render and configure the rich text editor tools.
241
241
242
-
### Text quick Toolbar
242
+
### Text quick toolbar
243
243
244
-
By activating the "RichTextEditorQuickToolbarSettings.Text" property, the Rich Text Editor offers the ability to display a quick toolbar when needed. The floating toolbar shows up when you select or focus on editable text. By modifying the "RichTextEditorQuickToolbarSettings.Text" property, the commands shown in the text quick toolbar can be changed.
244
+
By activating the [RichTextEditorQuickToolbarSettings.Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorQuickToolbarSettings_Text) property, the Rich Text Editor offers the ability to display a quick toolbar when needed. The floating toolbar shows up when you select or focus on editable text. By modifying the `RichTextEditorQuickToolbarSettings.Text` property, the commands shown in the text quick toolbar can be changed.
245
245
246
246
{% tabs %}
247
247
{% highlight razor %}
@@ -269,7 +269,8 @@ private List<ToolbarItemModel> textQuickToolbarItems = new List<ToolbarItemModel
269
269
{% endhighlight %}
270
270
{% endtabs %}
271
271
272
-
Refer the following link for more items in the text quick toolbar.
272
+
Refer to the following link for a complete list of available toolbar items:
0 commit comments