Skip to content

Commit 8565473

Browse files
983303: Updated mention-integration.md, miscellaneous.md, paste-cleanup.md, resizable-editor.md, slash-commands.md
1 parent da3744a commit 8565473

File tree

2 files changed

+37
-37
lines changed

2 files changed

+37
-37
lines changed

blazor/rich-text-editor/image.md

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
---
22
layout: post
3-
title: Image in Blazor Rich Text Editor Component | Syncfusion
4-
description: Checkout and learn here all about Image in Syncfusion Blazor Rich Text Editor component and much more.
3+
title: Image in Blazor RichTextEditor Component | Syncfusion
4+
description: Checkout and learn here all about Image in Syncfusion Blazor RichTextEditor component and much more.
55
platform: Blazor
66
control: RichTextEditor
77
documentation: ug
88
---
99

10-
# Image in Blazor Rich Text Editor Component
10+
# Image in Blazor RichTextEditor Component
1111

12-
The Rich Text Editor supports inserting images from online sources and the local computer wherever images are needed in the content. To configure image behavior, use the options in [RichTextEditorImageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html).
12+
Rich Text Editor allows inserting images from online sources and local computer where you want to insert the image in your content. For inserting the image to the Rich Text Editor, the following list of options have been provided in the `RichTextEditorImageSettings`.
1313

1414
| Options | Description |
1515
|----------------|---------|
16-
| AllowedTypes | Specifies the extensions of the image types allowed to insert on bowering and passing the extensions with List<string>. For example, private List<string> AllowedTypes = new List<string> `{ ".jpg", ".png", ".gif" };`|
16+
| AllowedTypes | Specifies the extensions of the image types allowed to insert on bowering and passing the extensions with List<string>. For example, private List<string> AllowedTypes = new List<string> { ".jpg",".png", ".gif" };|
1717
| Display | Sets the default display for an image when it is inserted into the Rich Text Editor. Possible options are: `Inline` and `Break`.|
18-
| Width | Sets the default width of an inserted image. |
19-
| Height | Sets the default height of an inserted image. |
20-
| SaveUrl | Specifies the URL of the controller action that handles image upload. |
21-
| Path | Specifies the location to store the image. It is of string type and it appends to the name of the file or folder where you want to store the image. For example, `"api/Images/"`|
22-
| EnableResize | Enables resizing for images. |
23-
| MinWidth | Sets the minimum width of the image. |
24-
| MaxWidth | Sets the maximum width of the image. |
25-
| MinHeight | Sets the minimum height of the image. |
26-
| MaxHeight | Sets the maximum height of the image. |
27-
| ResizeByPercent | Enables image resizing by percentage. |
18+
| Width | Sets the default width of the image when it is inserted in the Rich Text Editor.|
19+
| Height | Sets the default height of the image when it is inserted in the Rich Text Editor.|
20+
| SaveUrl | Provides URL to map the action result method to save the image.|
21+
| Path | Specifies the location to store the image. It is of string type and it appends to the name of the file or folder where you want to store the image. For example, "api/Images/"|
22+
| EnableResize | Enables resizing for image element.|
23+
| MinWidth | Defines the minimum Width of the image.|
24+
| MaxWidth | Defines the maximum Width of the image.|
25+
| MinHeight | Defines the minimum Height of the image.|
26+
| MaxHeight | Defines the maximum Height of the image.|
27+
| ResizeByPercent | Image resizing should be done by percentage calculation.|
2828

2929
## Upload options
3030

31-
Use the `browse` option in the Image dialog to select an image from the local machine and insert into the Rich Text Editor content.
31+
Through the `browse` option in the Image dialog, select the image from the local machine and insert into the Rich Text Editor content.
3232

33-
If the [Path](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorImageSettings_Path) field is not specified in the [RichTextEditorImageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorImageSettings.html), the image will be converted into base64 and blob url for the image will be created then generated url will be set as `src` property of `<img>` tag as below.
33+
If the path field is not specified in the `RichTextEditorImageSettings`, the image will be converted into base64 and blob url for the image will be created then generated url will be set as `src` property of `<img>` tag as below.
3434

3535
The image has been loaded from the local machine and it will be saved in the given location.
3636

@@ -135,43 +135,43 @@ namespace ImageUpload.Controllers
135135

136136
```
137137

138-
![Blazor Rich Text Editor with Image](./images/blazor-richtexteditor-with-image.png)
138+
![Blazor RichTextEditor with Image](./images/blazor-richtexteditor-with-image.png)
139139

140140
## Image delete
141141

142142
To remove an image from the Rich Text Editor content, select the image and click "Remove" tool from quick toolbar. It will delete the image from the Rich Text Editor content.
143143

144144
After selecting the image from the local machine, the URL for the image will be generated, from there also you can remove the image from the service location by clicking the cross icon as in the following image.
145145

146-
![Removing Image in Blazor Rich Text Editor Content](./images/blazor-richtexteditor-remove-image.png)
146+
![Removing Image in Blazor RichTextEditor Content](./images/blazor-richtexteditor-remove-image.png)
147147

148148
## Insert from web
149149

150150
To insert an image from online source like Google, Ping, and more, enable images tool on the editor’s toolbar. By default, the images tool opens an image dialog that allows to insert an image from online source.
151151

152-
![Inserting Image in Blazor Rich Text Editor Content](./images/blazor-richtexteditor-insert-image.png)
152+
![Inserting Image in Blazor RichTextEditor Content](./images/blazor-richtexteditor-insert-image.png)
153153

154154
## Dimension
155155

156156
Sets the default width and height of the image when it is inserted in the Rich Text Editor using `Width` and `Height` of `RichTextEditorImageSettings`.
157157

158-
The image size can also be changed through the `QuickToolbar` using the `Change Size` option. After clicking the option, a dialog opens where width and height can be specified in pixels.
158+
Through the `QuickToolbar` also you can change the width and height using `Change Size` option. After clicking the option, the image size will open as below. In that specify the width and height of the image in pixel.
159159

160-
![Changing Image Dimension in Blazor Rich Text Editor](./images/blazor-richtexteditor-image-size.png)
160+
![Changing Image Dimension in Blazor RichTextEditor](./images/blazor-richtexteditor-image-size.png)
161161

162-
## Caption and alt text
162+
## Caption and Alt Text
163163

164-
Specify image captions and alternative text using `RichTextEditorQuickToolbarSettings` options such as Image Caption and Alternative Text.
164+
Image caption and alternative text can be specified for the inserted image in the Rich Text Editor using the `RichTextEditorQuickToolbarSettings` options such as Image Caption and Alternative Text.
165165

166-
Use the Alternative Text option to set alt text that displays when the image fails to load.
166+
Through the Alternative Text option, set the alternative text for the image, when the image is not uploaded successfully into the Rich Text Editor.
167167

168-
Clicking Image Caption wraps the image with a caption element, allowing caption text to be entered in the editor.
168+
By clicking the Image Caption, the image will get wrapped in an image element with a caption. Then, you can type caption content inside the Rich Text Editor.
169169

170170
## Display position
171171

172172
Sets the default display for an image when it is inserted in the Rich Text Editor using `Display` field in`RichTextEditorImageSettings`.
173173

174-
N> Available options: Inline and Break.
174+
N> It has two possible options: `Inline` and `Break`.
175175

176176
```cshtml
177177
@@ -189,15 +189,15 @@ N> Available options: Inline and Break.
189189

190190
## Image with link
191191

192-
An image can be used as a hyperlink. When an image is linked, the quick toolbar includes Remove Link, Edit Link, and Open Link options. For more details, see the[link documentation](./link).
192+
The hyperlink itself can be an image in Rich Text Editor. If the image given as hyperlink, the remove, edit, and open links will be added to the quick toolbar of image as below. For further details about link, refer to the [link documentation](./link).
193193

194-
![Blazor Rich Text Editor Image with Link](./images/blazor-richtexteditor-image-link.png)
194+
![Blazor RichTextEditor Image with Link](./images/blazor-richtexteditor-image-link.png)
195195

196196
## Resize
197197

198-
The Rich Text Editor includes built-in support for image resizing. Resize handles appear on the image’s corners when focused, allowing users to resize with the mouse or touch easily. Resizing preserves the aspect ratio.
198+
Rich Text Editor has a built-in image inserting support. The resize points will be appearing on each corner of image when focus. So, users can resize the image using mouse points or thumb through the resize points easily. Also, the resize calculation will be done based on aspect ratio.
199199

200-
![Image Resizing in Blazor Rich Text Editor](./images/blazor-richtexteditor-image-resize.png)
200+
![Image Resizing in Blazor RichTextEditor](./images/blazor-richtexteditor-image-resize.png)
201201

202202
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 know how to render and configure the rich text editor tools.
203203

blazor/rich-text-editor/import-export.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
---
22
layout: post
3-
title: Import and Export in Rich Text Editor | Syncfusion
3+
title: Import and Export in RichTextEditor | Syncfusion
44
description: Checkout and learn here all about import and export in Syncfusion Blazor RichTextEditor component and more.
55
platform: Blazor
66
control: RichTextEditor
77
documentation: ug
88
---
99

10-
# Import and Export in Blazor Rich Text Editor
10+
# Import and Export in Blazor RichTextEditor
1111

1212
## Import to HTML file
1313

@@ -50,7 +50,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/import-html-fil
5050

5151
## Import to RTF file
5252

53-
To import an RTF file into the editor, use the file uploader component and retrieve the file content from the uploader's success event. Then, import the RTF values into the editor.
53+
Import the RTF file into the editor by using the file uploader component and get the RTF file content from the uploader success event. Then, import the RTF values into the editor.
5454

5555
{% tabs %}
5656
{% highlight razor %}
@@ -131,7 +131,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/import-text-fil
131131

132132
## Importing content from Microsoft Word
133133

134-
The Rich Text Editor provides functionality to import content directly from Microsoft Word documents, while preserving the original formatting, structure, and styles. This feature ensures a smooth transition of content from Word to the editor, maintaining elements such as headings, lists, tables, and text styles.
134+
The Rich Text Editor provides functionality to import content directly from Microsoft Word documents, preserving the original formatting and structure. This feature ensures a smooth transition of content from Word to the editor, maintaining elements such as headings, lists, tables, and text styles.
135135

136136
To integrate an `ImportWord` option into the Rich Text Editor toolbar, you can add it as a custom toolbar [items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Items) using the items property in toolbarSettings.
137137

@@ -303,7 +303,7 @@ namespace WordUpload.Controllers
303303

304304
## Export to RTF file
305305

306-
Use the [Syncfusion.DocIO](https://libraries.io/nuget/Syncfusion.DocIO.NET) libraries to export the RTE content to the RTF format. Ensure the Syncfusion.DocIO.NET NuGet package is installed in your project.
306+
Use the [Syncfusion.DocIO](https://libraries.io/nuget/Syncfusion.DocIO.NET) libraries to export the RTE content to the RTF format.
307307

308308
Click **Export**, and use **Syncfusion.DocIO** libraries to convert the RTE content to an RTF file. Use the following code to export the RTF file.
309309

@@ -346,7 +346,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/blazor-rich-tex
346346

347347
## Export to HTML file
348348

349-
Use [Syncfusion.DocIO](https://libraries.io/nuget/Syncfusion.DocIO.NET) libraries to export the RTE content to HTML format. Make sure the required NuGet package is referenced in your project.
349+
Use [Syncfusion.DocIO](https://libraries.io/nuget/Syncfusion.DocIO.NET) libraries to export the RTE content to HTML format.
350350

351351
While clicking on the export button, it makes a call to the Export to HTML service.
352352

0 commit comments

Comments
 (0)