Skip to content

951777: Corrected the image path #4188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 5, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ The table below lists the available text styles in the Rich Text Editor's toolba

| Name | Icons | Summary | Initialization |
|----------------|---------|---------|------------------------------------------|
| Bold | ![Bold icon](.../images/bold.png) | Makes text thicker and darker | toolbarSettings: { items: ['Bold']} | `<b>bold</b>` |
| Italic | ![Italic icon](../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `<em>italic</em>` |
| Underline | ![Underline icon](../images/under-line.png) | Adds a line beneath the text | toolbarSettings: { items: ['Underline']} |
| StrikeThrough | ![StrikeThrough icon](../images/strikethrough.png) | Applies a line through the text. |toolbarSettings: { items: ['StrikeThrough']}|
| InlineCode |![InlineCode icon](../images/inlineCode.png) | Formats text as inline code | toolbarSettings: { items: ['InlineCode']} | `<code>inline code</code>`|
| SubScript | ![SubScript icon](../images/sub-script.png) | Positions text slightly below the normal line |toolbarSettings: { items: ['SubScript']}|
| SuperScript | ![SuperScript icon](../images/super-script.png) | Positions text slightly above the normal line |toolbarSettings: { items: ['SuperScript’']}|
| LowerCase | ![LowerCase icon](../images/lower-case.png) | Converts text to lowercase |toolbarSettings: { items: ['LowerCase']}|
| UpperCase | ![UpperCase icon](../images/upper-case.png) | Converts text to uppercase |toolbarSettings: { items: ['UpperCase’']}|
| Bold | ![Bold icon](./images/bold.png) | Makes text thicker and darker | toolbarSettings: { items: ['Bold']} | `<b>bold</b>` |
| Italic | ![Italic icon](./images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `<em>italic</em>` |
| Underline | ![Underline icon](./images/under-line.png) | Adds a line beneath the text | toolbarSettings: { items: ['Underline']} |
| StrikeThrough | ![StrikeThrough icon](./images/strikethrough.png) | Applies a line through the text. |toolbarSettings: { items: ['StrikeThrough']}|
| InlineCode |![InlineCode icon](./images/inlineCode.png) | Formats text as inline code | toolbarSettings: { items: ['InlineCode']} | `<code>inline code</code>`|
| SubScript | ![SubScript icon](./images/sub-script.png) | Positions text slightly below the normal line |toolbarSettings: { items: ['SubScript']}|
| SuperScript | ![SuperScript icon](./images/super-script.png) | Positions text slightly above the normal line |toolbarSettings: { items: ['SuperScript’']}|
| LowerCase | ![LowerCase icon](./images/lower-case.png) | Converts text to lowercase |toolbarSettings: { items: ['LowerCase']}|
| UpperCase | ![UpperCase icon](./images/upper-case.png) | Converts text to uppercase |toolbarSettings: { items: ['UpperCase’']}|

Please refer to the sample below to add these basic text styling options in the Rich Text Editor.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ The following sample demonstrates the resizable feature.
{% endtabs %}
{% endif %}

![Rich Text Editor Resizable support](../../images/Resizable-Editor.png)
![Rich Text Editor Resizable support](../images/Resizable-Editor.png)

## Setting Editor Resize Limits

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ You can insert audio from either the hosted link or the local machine, by clicki

By default, the audio tool opens the audio dialog, allowing you to insert audio from an online source. Inserting the URL will be added to the `src` attribute of the `<source>` tag.

![Rich Text Editor Audio insert](../../images/aspcore-richtexteditor-audio-web.png)
![Rich Text Editor Audio insert](../images/aspcore-richtexteditor-audio-web.png)

## Uploading Audio from Local Machine

Expand Down Expand Up @@ -206,15 +206,15 @@ N> By default, it doesn't support the `UseDefaultCredentials` property; we need

Once an audio file has been inserted, you can change it using the Rich Text Editor [QuickToolbarSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Audio) `AudioReplace` option. You can replace the audio file using the web URL or the browse option in the audio dialog.

![Rich Text Editor Audio replace](../../images/aspcore-richtexteditor-audio-replace.png)
![Rich Text Editor Audio replace](../images/aspcore-richtexteditor-audio-replace.png)

## Deleting Audios

To remove audio from the Rich Text Editor content, select the audio and click the `audioRemove` button from the quick toolbar. It will delete the audio from the Rich Text Editor content as well as from the service location if the [InsertAudioSettings.RemoveUrl](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorAudioSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorAudioSettings_RemoveUrl) is given.

Once you select the audio from the local machine, the URL for the audio will be generated. You can remove the audio from the service location by clicking the cross icon.

![Rich Text Editor Audio delete](../../images/aspcore-richtexteditor-audio-del.png)
![Rich Text Editor Audio delete](../images/aspcore-richtexteditor-audio-del.png)

## Configuring Audio Display Position

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ To remove an image from the Rich Text Editor content, select the image and click

Once you select the image from the local machine, the URL for the image will be generate. From there, you can remove the image from the service location by clicking the cross icon.

![Rich Text Editor Image delete](../../images/image-del.png)
![Rich Text Editor Image delete](../images/image-del.png)

The following sample explains, how to configure `RemoveUrl` to remove a saved image from the remote service location, when the following image remove actions are performed:

Expand Down Expand Up @@ -194,7 +194,7 @@ Sets the default width and height of the image when it is inserted in the Rich T

Through the quick toolbar, change the width and height using `Change Size` option. Once you click, the Image Size dialog box will open as follows. In that you can specify the width and height of the image in pixel.

![Rich Text Editor Image dimension](../../images/image-size.png)
![Rich Text Editor Image dimension](../images/image-size.png)

## Adding Captions and Alt Text to Images

Expand Down Expand Up @@ -238,13 +238,13 @@ Sets the default display for an image when it is inserted in the Rich Text Edito

The hyperlink itself can be an image in Rich Text Editor. If the image given as hyperlink, remove, edit and open link will be added to the quick toolbar of image. For further details about link, see the [`link documentation`](./link) documentation.

![Rich Text Editor image with link](../../images/image-link.png)
![Rich Text Editor image with link](../images/image-link.png)

## Image Resizing Tools

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.

![Rich Text Editor image resize](../../images/image-resize.png)
![Rich Text Editor image resize](../images/image-resize.png)

## Configuring Allowed Image Types

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,13 @@ You can insert a video from either a hosted link or your local machine by clicki

The insert video dialog opens with the `Embedded code` option selected by default. This allows you to insert a video using embedded code.

![Rich Text Editor Embed URL Video insert](../../images/aspcore-richtexteditor-video-embed.png)
![Rich Text Editor Embed URL Video insert](../images/aspcore-richtexteditor-video-embed.png)

### Inserting Video via Web URL

You can switch to the `Web URL` option by selecting the Web URL checkbox. Inserting a video using the Web URL option will add the video URL as the `src` attribute of the `<source>` tag.

![Rich Text Editor Video insert](../../images/aspcore-richtexteditor-video-web.png)
![Rich Text Editor Video insert](../images/aspcore-richtexteditor-video-web.png)

## Uploading Video from Local Machine

Expand Down Expand Up @@ -211,17 +211,17 @@ N> By default, it doesn't support the `UseDefaultCredentials` property, you can

Once a video file has been inserted, you can replace it using the Rich Text Editor [QuickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Video) `VideoReplace` option. You can replace the video file either by using the embedded code or the web URL and the browse option in the video dialog.

![Rich Text Editor Embed Video replace](../../images/video-replace-embed.png)
![Rich Text Editor Embed Video replace](../images/video-replace-embed.png)

![Rich Text Editor Web Video replace](../../images/video-replace-web.png)
![Rich Text Editor Web Video replace](../images/video-replace-web.png)

## Deleting Video

To remove a video from the Rich Text Editor content, select the video and click the `VideoRemove` button from the quick toolbar. It will delete the video from the Rich Text Editor content as well as from the service location if the [InsertVideoSettings.RemoveUrl](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorVideoSettings_RemoveUrl) is given.

Once you select the video from the local machine, the URL for the video will be generated. You can remove the video from the service location by clicking the cross icon.

![Rich Text Editor Video delete](../../images/video-del.png)
![Rich Text Editor Video delete](../images/video-del.png)


## Adjusting Video Dimensions
Expand All @@ -230,7 +230,7 @@ Set the default width, minWidth, height, and minHeight of the video element when

Through the [QuickToolbarSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorQuickToolbarSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorQuickToolbarSettings_Video), you can also change the width and height using the `Change Size` button. Once you click on the button, the video size dialog will open as below. In that, specify the width and height of the video in pixels.

![Rich Text Editor Video dimension](../../images/video-size.png)
![Rich Text Editor Video dimension](../images/video-size.png)

## Configuring Video Display Position

Expand Down Expand Up @@ -270,7 +270,7 @@ You can disable the resize action by configuring `false` for the [InsertVideoSet

> If the [MinWidth](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorVideoSettings_MinWidth) and [MinHeight](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorVideoSettings_MinHeight) properties are configured, the video resizing does not shrink below the specified values.

![Rich Text Editor video resize](../../images/aspcore-richtexteditor-video-resize.png)
![Rich Text Editor video resize](../images/aspcore-richtexteditor-video-resize.png)

## Customizing the Video Quick Toolbar

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ The following code example shows how to add the emoji picker tool in the Rich Te

Quickly access the emoji picker by pressing the colon (:) key while typing a word prefix in an editor, allowing instant emoji selection and display. Moreover, continue typing in the editor after the colon (:) to filter and refine your search for the desired emojis.

![Rich Text Editor Emoji Picker](../../images/emoji-picker-shorcut.png)
![Rich Text Editor Emoji Picker](../images/emoji-picker-shorcut.png)

## Navigating and Selecting Emojis Using the Keyboard

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ In the following sample, we configured the following properties with popup dimen
{% endhighlight %}
{% endtabs %}

![ASP.NET MVC mention integration ](../../images/mention-integration.png)
![ASP.NET MVC mention integration ](../images/mention-integration.png)

> [View Sample](https://ej2.syncfusion.com/aspnetmvc/RichTextEditor/MentionIntegration#/bootstrap5)

Expand Down
20 changes: 10 additions & 10 deletions ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,25 +47,25 @@ Tables can also be inserted through the `Insert Table` option in the pop-up wher

The `TableHeader` command is available in the quick toolbar, allowing you to add or remove the header row from the inserted table. The following image illustrates the table header.

![Rich Text Editor table header](../images/table_header.png)
![Rich Text Editor table header](./images/table_header.png)

## Inserting Rows

You can insert `Rows` above or below the selected table cell using the quick toolbar. The focused row can also be deleted. The following screenshot shows the available options of the row item.

![Rich Text Editor table row](../images/table_rows.png)
![Rich Text Editor table row](./images/table_rows.png)

## Inserting Columns

`Columns` can be inserted to the left or right of the selected table cell using the quick toolbar. The focused column can also be deleted. The following screenshot shows the available options in inserting column item.

![Rich Text Editor table column](../images/table_column.png)
![Rich Text Editor table column](./images/table_column.png)

## Setting Cell Background Color

Set the background color for each table cell using the `BackgroundColor` command in the quick toolbar.

![Rich Text Editor table background color](../images/table_bg_color.png)
![Rich Text Editor table background color](./images/table_bg_color.png)

## Deleting Tables

Expand All @@ -77,13 +77,13 @@ Delete the entire table using the delete item in the quick toolbar.

Align text inside table cells to the top, middle, or bottom using the `TableCellVerticalAlign` tool in the quick toolbar.

![Rich Text Editor table vertical alignment](../images/table_vertical.png)
![Rich Text Editor table vertical alignment](./images/table_vertical.png)

### Horizontal Alignment

Align text inside table cells to the left, right, or center using the `TableCellHorizontalAlign` tool in the quick toolbar.

![Rich Text Editor table horizontal alignment](../images/table_horizontal.png)
![Rich Text Editor table horizontal alignment](./images/table_horizontal.png)

## Applying Table Styles

Expand All @@ -95,15 +95,15 @@ By Default, provides Dashed border and Alternate rows.

**Alternate border**: Applies an alternating background to table rows.

![Rich Text Editor table styles](../images/table_style.png)
![Rich Text Editor table styles](./images/table_style.png)

## Setting Table and Cell Dimensions

Sets the default width of the table when it is inserted in the Rich Text Editor using the width of [TableSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_TableSettings).

Users can modify the width, cell padding, and cell spacing of selected tables using the properties option in the quick toolbar.

![Rich Text Editor table settings](../images/table_properties.png)
![Rich Text Editor table settings](./images/table_properties.png)

## Table Cell Selection and Formatting

Expand Down Expand Up @@ -163,15 +163,15 @@ The table cell merge feature allows you to merge two or more row and column cell

The following image explains the table merge action.

![Rich Text Editor table cell merge](../images/table_merge.png)
![Rich Text Editor table cell merge](./images/table_merge.png)

### Splitting Table Cells

The table cell split feature allows you to a selected cell can be split both horizontally and vertically.

The following image explains the table split action.

![Rich Text Editor table cell split](../images/table_split.png)
![Rich Text Editor table cell split](./images/table_split.png)

{% if page.publishingplatform == "aspnet-core" %}

Expand Down
Loading