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: knowledge-base/editor-add-class-to-selected-text.md
+7-8Lines changed: 7 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,22 +22,21 @@ ticketid: 1679881
22
22
23
23
## Description
24
24
25
-
In certain situations, you might want to style the content within the [Editor for Blazor](slug:editor-overview) without relying on inline styles. Specifically, you might need to add CSS classes to `<div>` or `<span>` elements through the editor's toolbar. This knowledge base article guides you on how to add a toolbar custom tool that applies a `<p>` and a CSS class to selected text.
25
+
In certain situations, you might want to style the content within the [Editor for Blazor](slug:editor-overview) without relying on inline styles. Specifically, you might need to add CSS class to specific element of the Editor cotent. This knowledge base article guides you on how to add a [Editor Custom Tool](slug:editor-custom-tools) that applies a `<p>` and a CSS class to selected text.
26
26
27
27
This knowledge base article also answers the following questions:
28
+
28
29
- How can I enhance text styling in the Editor for Blazor using CSS classes?
29
30
- Is it possible to add a toolbar button in the Editor for Blazor that applies styling classes?
30
31
- How do I use custom tools in the Editor for Blazor to manipulate text styling?
31
32
32
33
## Solution
33
34
34
-
To add a class to a `<p>` element or any other element using a toolbar button in the Telerik Editor, create a custom tool that applies the desired class. The following steps and example code illustrate how to achieve this functionality:
35
-
36
-
### Creating a Custom Tool
35
+
To add a custom CSS class to a `<p>` element or any other element using the Editor toolbar button, create a custom tool that applies the desired class. The following steps and example code illustrate how to achieve this functionality:
37
36
38
-
1.**Define a Custom Tool:** Start by defining a custom tool in the Editor toolbar. This tool will specifically target the selected text and apply a CSS class to it.
37
+
1. Define a Custom Tool in the Editor toolbar. This tool will specifically target the selected text and apply a CSS class to it.
39
38
40
-
2.**Leverage JavaScript Interop:** Utilize JavaScript Interop to get the selected text.
39
+
2.Use JavaScript Interop to get the selected text.
41
40
42
41
````RAZOR
43
42
@using Telerik.Blazor.Components.Editor
@@ -94,5 +93,5 @@ To add a class to a `<p>` element or any other element using a toolbar button in
94
93
95
94
-[Editor Overview](slug:editor-overview)
96
95
-[JavaScript Interop in Blazor](https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability)
97
-
-[Editor Custom Tools](slug:custom-tools)
98
-
-[How to Get Selected Text in Editor](slug:editor-get-selection)
96
+
-[Editor Custom Tools](slug:editor-custom-tools)
97
+
-[How to Get Selected Text in Editor](slug:editor-kb-get-selection)
0 commit comments