diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/basic-text-styling.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/basic-text-styling.md index 412c4abf8a..60bd145152 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/basic-text-styling.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/basic-text-styling.md @@ -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']} | `bold` | -| Italic | ![Italic icon](../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` | -| 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']} | `inline 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']} | `bold` | +| Italic | ![Italic icon](./images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` | +| 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']} | `inline 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. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/resizable-editor.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/resizable-editor.md index db1b3ea1bc..780ec0e6ae 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/resizable-editor.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/resizable-editor.md @@ -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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md index 0b8165fd12..153c4273c0 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/audio.md @@ -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 `` 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 @@ -206,7 +206,7 @@ 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 @@ -214,7 +214,7 @@ To remove audio from the Rich Text Editor content, select the audio and click th 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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md index 3e567adca5..c2b6a8ee9e 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/insert-images.md @@ -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: @@ -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 @@ -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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md index 5794843537..3612ebe93a 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/insert-image-media/video.md @@ -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 `` 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 @@ -211,9 +211,9 @@ 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 @@ -221,7 +221,7 @@ To remove a video from the Rich Text Editor content, select the video and click 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 @@ -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 @@ -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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/emoji-picker.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/emoji-picker.md index 0f03b8ae6f..8009b69b8b 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/emoji-picker.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/emoji-picker.md @@ -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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md index c5f440bddb..76711876e9 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/smart-editing/mentions.md @@ -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) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md index 5a72a7159c..540533adc7 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/table.md @@ -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 @@ -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 @@ -95,7 +95,7 @@ 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 @@ -103,7 +103,7 @@ Sets the default width of the table when it is inserted in the Rich Text Editor 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 @@ -163,7 +163,7 @@ 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 @@ -171,7 +171,7 @@ The table cell split feature allows you to a selected cell can be split both hor 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" %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/built-in-tools.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/built-in-tools.md index 0b71a487a2..282bcdf4a3 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/built-in-tools.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/built-in-tools.md @@ -28,16 +28,16 @@ It provides tools for applying text styles such as bold, italic, underline, stri | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Bold | ![Bold icon](../../images/bold.png) | Text that is thicker and darker than usual. | toolbarSettings: { items: ['Bold']} | -| Italic | ![Italic icon](../../images/italic.png) | Shows a text that is leaned to the right. | toolbarSettings: { items: ['Italic']} | -| Underline | ![Underline icon](../../images/under-line.png) | The underline is added to the selected text. | toolbarSettings: { items: ['Underline']} | -| StrikeThrough | ![StrikeThrough icon](../../images/strikethrough.png) | Apply double line strike through formatting for the selected text. |toolbarSettings: { items: ['StrikeThrough']}| -| ClearFormat | ![ClearFormat icon](../../images/clear-format.png) | The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles.|toolbarSettings: { items: ['ClearFormat']}| -| Blockquote | ![Blockquote icon](../../images/blockquote.png) | Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: ['Blockquote']}| -| SubScript | ![SubScript icon](../../images/sub-script.png) | Makes the selected text as subscript (lower).|toolbarSettings: { items: ['SubScript']}| -| SuperScript | ![SuperScript icon](../../images/super-script.png) | Makes the selected text as superscript (higher).|toolbarSettings: { items: ['SuperScript']}| -| LowerCase | ![LowerCase icon](../../images/lower-case.png) | Change the case of selected text to lower in the content. |toolbarSettings: { items: ['LowerCase']}| -| UpperCase | ![UpperCase icon](../../images/upper-case.png) | Change the case of selected text to upper in the content.|toolbarSettings: { items: ['UpperCase’']}| +| Bold | ![Bold icon](../images/bold.png) | Text that is thicker and darker than usual. | toolbarSettings: { items: ['Bold']} | +| Italic | ![Italic icon](../images/italic.png) | Shows a text that is leaned to the right. | toolbarSettings: { items: ['Italic']} | +| Underline | ![Underline icon](../images/under-line.png) | The underline is added to the selected text. | toolbarSettings: { items: ['Underline']} | +| StrikeThrough | ![StrikeThrough icon](../images/strikethrough.png) | Apply double line strike through formatting for the selected text. |toolbarSettings: { items: ['StrikeThrough']}| +| ClearFormat | ![ClearFormat icon](../images/clear-format.png) | The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles.|toolbarSettings: { items: ['ClearFormat']}| +| Blockquote | ![Blockquote icon](../images/blockquote.png) | Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: ['Blockquote']}| +| SubScript | ![SubScript icon](../images/sub-script.png) | Makes the selected text as subscript (lower).|toolbarSettings: { items: ['SubScript']}| +| SuperScript | ![SuperScript icon](../images/super-script.png) | Makes the selected text as superscript (higher).|toolbarSettings: { items: ['SuperScript']}| +| LowerCase | ![LowerCase icon](../images/lower-case.png) | Change the case of selected text to lower in the content. |toolbarSettings: { items: ['LowerCase']}| +| UpperCase | ![UpperCase icon](../images/upper-case.png) | Change the case of selected text to upper in the content.|toolbarSettings: { items: ['UpperCase’']}| ### Font & styling @@ -45,11 +45,11 @@ Tools in this section allow users to customize font properties such as font fami | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| FontName | ![FontName icon](../../images/font-name.png) | Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor's toolbar. |toolbarSettings: { items: ['FontName']}| -| FontSize | ![FontSize icon](../../images/font-size.png) | Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor's toolbar.|toolbarSettings: { items: ['FontSize']}| -| FontColor | ![FontColor icon](../../images/font-color.png) | Specifies an array of colors can be used in the colors popup for font color.|toolbarSettings: { items: ['FontColor']}| -| BackgroundColor | ![BackgroundColor icon](../../images/background-color.png) | Specifies an array of colors can be used in the colors popup for background color.|toolbarSettings: { items: ['BackgroundColor']}| -| Formats (Paragraph, Headings) | ![Format icon](../../images/formats.png) | An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. |toolbarSettings: { items: ['Formats']}| +| FontName | ![FontName icon](../images/font-name.png) | Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor's toolbar. |toolbarSettings: { items: ['FontName']}| +| FontSize | ![FontSize icon](../images/font-size.png) | Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor's toolbar.|toolbarSettings: { items: ['FontSize']}| +| FontColor | ![FontColor icon](../images/font-color.png) | Specifies an array of colors can be used in the colors popup for font color.|toolbarSettings: { items: ['FontColor']}| +| BackgroundColor | ![BackgroundColor icon](../images/background-color.png) | Specifies an array of colors can be used in the colors popup for background color.|toolbarSettings: { items: ['BackgroundColor']}| +| Formats (Paragraph, Headings) | ![Format icon](../images/formats.png) | An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. |toolbarSettings: { items: ['Formats']}| ### Alignment @@ -57,11 +57,11 @@ This section provides alignment options for the text or content, allowing users | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Alignment | ![Alignment icon](../../images/alignments.png) | Align the content with left, center, and right margin.|toolbarSettings: { items: ['Alignments']}| -| JustifyLeft | ![JustifyLeft icon](../../images/align-left.png) | Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: ['JustifyLeft']} | -| JustifyCenter | ![JustifyCenter icon](../../images/align-center.png) | There is an even space on each side of each line since the text is not aligned to the left or right margins. | toolbarSettings: { items: ['JustifyCenter']} | -| JustifyRight | ![JustifyRight icon](../../images/align-right.png) | Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: ['JustifyRight']} | -| JustifyFull | ![JustifyFull icon](../../images/align-justify.png) | The text is aligned with both right and left margins. | toolbarSettings: { items: ['JustifyFull']} | +| Alignment | ![Alignment icon](../images/alignments.png) | Align the content with left, center, and right margin.|toolbarSettings: { items: ['Alignments']}| +| JustifyLeft | ![JustifyLeft icon](../images/align-left.png) | Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: ['JustifyLeft']} | +| JustifyCenter | ![JustifyCenter icon](../images/align-center.png) | There is an even space on each side of each line since the text is not aligned to the left or right margins. | toolbarSettings: { items: ['JustifyCenter']} | +| JustifyRight | ![JustifyRight icon](../images/align-right.png) | Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: ['JustifyRight']} | +| JustifyFull | ![JustifyFull icon](../images/align-justify.png) | The text is aligned with both right and left margins. | toolbarSettings: { items: ['JustifyFull']} | ### Lists & indentation @@ -69,12 +69,12 @@ Tools here allow users to create ordered and unordered lists, change the list st | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| OrderedList | ![OrderedList icon](../../images/order-list.png) | Create a new list item(numbered). |toolbarSettings: { items: ['OrderedList']}| -| UnorderedList | ![UnorderedList icon](../../images/unorder-list.png) | Create a new list item(bulleted). |toolbarSettings: { items: ['UnorderedList']}| -| NumberFormatList | ![NumberFormatList icon](../../images/number-format.png) | Allows to create list items with various list style types(numbered).|toolbarSettings: { items: ['NumberFormatList']}| -| BulletFormatList | ![BulletFormatList icon](../../images/bullet-format.png) | Allows to create list items with various list style types(bulleted).|toolbarSettings: { items: ['BulletFormatList']}| -| Indent | ![Indent icon](../../images/increase-indent.png) | Allows to increase the indent level of the content.|toolbarSettings: { items: ['Indent']}| -| Outdent | ![Outdent icon](../../images/decrease-indent.png) | Allows to decrease the indent level of the content.|toolbarSettings: { items: ['Outdent']}| +| OrderedList | ![OrderedList icon](../images/order-list.png) | Create a new list item(numbered). |toolbarSettings: { items: ['OrderedList']}| +| UnorderedList | ![UnorderedList icon](../images/unorder-list.png) | Create a new list item(bulleted). |toolbarSettings: { items: ['UnorderedList']}| +| NumberFormatList | ![NumberFormatList icon](../images/number-format.png) | Allows to create list items with various list style types(numbered).|toolbarSettings: { items: ['NumberFormatList']}| +| BulletFormatList | ![BulletFormatList icon](../images/bullet-format.png) | Allows to create list items with various list style types(bulleted).|toolbarSettings: { items: ['BulletFormatList']}| +| Indent | ![Indent icon](../images/increase-indent.png) | Allows to increase the indent level of the content.|toolbarSettings: { items: ['Indent']}| +| Outdent | ![Outdent icon](../images/decrease-indent.png) | Allows to decrease the indent level of the content.|toolbarSettings: { items: ['Outdent']}| ### Hyperlinks @@ -82,8 +82,8 @@ This section provides tools for inserting and managing hyperlinks within the con | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Hyperlink | ![Hyperlink icon](../../images/create-link.png) | Creates a hyperlink to a text or image to a specific location in the content.|toolbarSettings: { items: ['CreateLink']}| -| InsertLink | ![InsertLink icon](../../images/create-link.png) |Allows users to add a link to a particular item. | toolbarSettings: { items: ['InsertLink']} | +| Hyperlink | ![Hyperlink icon](../images/create-link.png) | Creates a hyperlink to a text or image to a specific location in the content.|toolbarSettings: { items: ['CreateLink']}| +| InsertLink | ![InsertLink icon](../images/create-link.png) |Allows users to add a link to a particular item. | toolbarSettings: { items: ['InsertLink']} | #### Link quicktoolbar items @@ -91,9 +91,9 @@ The link quicktoolbar provides tools to manage hyperlinks in the Rich Text Edito | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| OpenLink | ![OpenLink icon](../../images/open-link.png) | To open the URL link that is attached to the selected text. | quickToolbarSettings: { link: ['OpenLink']} | -| EditLink | ![EditLink icon](../../images/edit-link.png) | Allows you to change the URL that has been attached to a specific item. | quickToolbarSettings: { link: ['EditLink']} | -| RemoveLink | ![RemoveLink icon](../../images/remove-link.png) | Allows you to remove the applied link from the selected item. | quickToolbarSettings: { link: ['RemoveLink']} | +| OpenLink | ![OpenLink icon](../images/open-link.png) | To open the URL link that is attached to the selected text. | quickToolbarSettings: { link: ['OpenLink']} | +| EditLink | ![EditLink icon](../images/edit-link.png) | Allows you to change the URL that has been attached to a specific item. | quickToolbarSettings: { link: ['EditLink']} | +| RemoveLink | ![RemoveLink icon](../images/remove-link.png) | Allows you to remove the applied link from the selected item. | quickToolbarSettings: { link: ['RemoveLink']} | ### Images @@ -101,7 +101,7 @@ This section contains the primary tool for inserting images into the editor. | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Insert Image | ![Images icon](../../images/insert-image.png) | Inserts an image from an online source or local computer. |toolbarSettings: { items: ['Image']}| +| Insert Image | ![Images icon](../images/insert-image.png) | Inserts an image from an online source or local computer. |toolbarSettings: { items: ['Image']}| #### Image quicktoolbar items @@ -109,15 +109,15 @@ The image quicktoolbar offers a set of tools to edit images inserted in the Rich | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Replace Image | ![Replace icon](../../images/image-replace.png) | Replace the selected image with another image. | quickToolbarSettings: { image: ['Replace']} | -| Align Image | ![Alignment icon](../../images/alignments.png) | The image can be aligned to the right, left, or center. | quickToolbarSettings: { image: ['Align']} | -| Remove Image | ![Remove icon](../../images/table-remove.png) | Allows to remove the selected image from the editor. | quickToolbarSettings: { image: ['Remove']} | -| OpenImageLink | ![OpenImageLink icon](../../images/open-link.png) | Opens the link that is attached to the selected image. | quickToolbarSettings: { image: ['OpenImageLink']} | -| EditImageLink | ![EditImageLink icon](../../images/edit-link.png) | Allows to edit the link that is attached to the selected image. | quickToolbarSettings: { image: ['EditImageLink']} | -| RemoveImageLink | ![RemoveImageLink icon](../../images/remove-link.png) | Removes the link that is attached to the selected image. | quickToolbarSettings: { image: ['RemoveImageLink']} | -| Display | ![Display icon](../../images/display.png) | Allows you to choose whether an image should be shown inline or as a block. | quickToolbarSettings: { image: ['Display']} | -| AltText | ![AltText icon](../../images/alt-text.png) | To display image description when an image on a Web page cannot be displayed. | quickToolbarSettings: { image: ['AltText']} | -| Dimension | ![Dimension icon](../../images/dimension.png) | Allows you to customize the image’s height and width. | quickToolbarSettings: { image: ['Dimension']} | +| Replace Image | ![Replace icon](../images/image-replace.png) | Replace the selected image with another image. | quickToolbarSettings: { image: ['Replace']} | +| Align Image | ![Alignment icon](../images/alignments.png) | The image can be aligned to the right, left, or center. | quickToolbarSettings: { image: ['Align']} | +| Remove Image | ![Remove icon](../images/table-remove.png) | Allows to remove the selected image from the editor. | quickToolbarSettings: { image: ['Remove']} | +| OpenImageLink | ![OpenImageLink icon](../images/open-link.png) | Opens the link that is attached to the selected image. | quickToolbarSettings: { image: ['OpenImageLink']} | +| EditImageLink | ![EditImageLink icon](../images/edit-link.png) | Allows to edit the link that is attached to the selected image. | quickToolbarSettings: { image: ['EditImageLink']} | +| RemoveImageLink | ![RemoveImageLink icon](../images/remove-link.png) | Removes the link that is attached to the selected image. | quickToolbarSettings: { image: ['RemoveImageLink']} | +| Display | ![Display icon](../images/display.png) | Allows you to choose whether an image should be shown inline or as a block. | quickToolbarSettings: { image: ['Display']} | +| AltText | ![AltText icon](../images/alt-text.png) | To display image description when an image on a Web page cannot be displayed. | quickToolbarSettings: { image: ['AltText']} | +| Dimension | ![Dimension icon](../images/dimension.png) | Allows you to customize the image’s height and width. | quickToolbarSettings: { image: ['Dimension']} | ### Tables @@ -125,7 +125,7 @@ This section offers the main tool for creating tables within the content. | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| CreateTable | ![CreateTable icon](../../images/create-table.png) | Create a table with defined columns and rows. | toolbarSettings: { items: ['CreateTable']} | +| CreateTable | ![CreateTable icon](../images/create-table.png) | Create a table with defined columns and rows. | toolbarSettings: { items: ['CreateTable']} | #### Table quicktoolbar items @@ -133,13 +133,13 @@ The table quicktoolbar provides options for table editing within the Rich Text E | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| RemoveTable | ![RemoveTable icon](../../images/table-remove.png) | Removes the selected table and its contents. | quickToolbarSettings: { table: ['TableRemove']} | -| TableHeader | ![TableHeader icon](../../images/table-headers.png) | Allows you to add a table header. | quickToolbarSettings: { table: ['TableHeader']} | -| TableColumns | ![TableColumns icon](../../images/table-columns.png) | Shows the dropdown to insert a column or delete the selected column. | quickToolbarSettings: { table: ['TableColumns']} | -| TableRows | ![TableRows icon](../../images/table-row.png) | Shows the dropdown to insert a row ors delete the selected row. | quickToolbarSettings: { table: ['TableRows']} | -| TableCellHorizontalAlign | ![TableCellHorizontalAlign icon](../../images/alignments.png) | Allows the table cell content to be aligned horizontally. | quickToolbarSettings: { table: ['TableCellHorizontalAlign']} | -| TableCellVerticalAlign | ![TableCellVerticalAlign icon](../../images/vertical-align.png) | Allows the table cell content to be aligned vertically. | quickToolbarSettings: { table: ['TableCellVerticalAlign']} | -| TableEditProperties | ![TableEditProperties icon](../../images/table-edit.png) | Allows you to change the table width, padding, and cell spacing styles. | quickToolbarSettings: { table: ['TableEditProperties']} | +| RemoveTable | ![RemoveTable icon](../images/table-remove.png) | Removes the selected table and its contents. | quickToolbarSettings: { table: ['TableRemove']} | +| TableHeader | ![TableHeader icon](../images/table-headers.png) | Allows you to add a table header. | quickToolbarSettings: { table: ['TableHeader']} | +| TableColumns | ![TableColumns icon](../images/table-columns.png) | Shows the dropdown to insert a column or delete the selected column. | quickToolbarSettings: { table: ['TableColumns']} | +| TableRows | ![TableRows icon](../images/table-row.png) | Shows the dropdown to insert a row ors delete the selected row. | quickToolbarSettings: { table: ['TableRows']} | +| TableCellHorizontalAlign | ![TableCellHorizontalAlign icon](../images/alignments.png) | Allows the table cell content to be aligned horizontally. | quickToolbarSettings: { table: ['TableCellHorizontalAlign']} | +| TableCellVerticalAlign | ![TableCellVerticalAlign icon](../images/vertical-align.png) | Allows the table cell content to be aligned vertically. | quickToolbarSettings: { table: ['TableCellVerticalAlign']} | +| TableEditProperties | ![TableEditProperties icon](../images/table-edit.png) | Allows you to change the table width, padding, and cell spacing styles. | quickToolbarSettings: { table: ['TableEditProperties']} | ### Undo & redo @@ -147,8 +147,8 @@ These tools allow users to easily undo or redo any changes made within the edito | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Undo | ![Undo icon](../../images/undo.png) | Allows to undo the actions.|toolbarSettings: { items: ['Undo']} | -| Redo | ![Redo icon](../../images/redo.png) | Allows to redo the actions.|toolbarSettings: { items: ['Redo']}| +| Undo | ![Undo icon](../images/undo.png) | Allows to undo the actions.|toolbarSettings: { items: ['Undo']} | +| Redo | ![Redo icon](../images/redo.png) | Allows to redo the actions.|toolbarSettings: { items: ['Redo']}| ### Other tools @@ -156,14 +156,14 @@ This section contains miscellaneous tools such as full-screen mode, print, previ | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| FullScreen | ![FullScreen icon](../../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window.|toolbarSettings: { items: ['FullScreen']}| -| Maximize | ![Maximize icon](../../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: ['Maximize']} | -| Minimize | ![Minimize icon](../../images/minimize.png) | Shrinks the editor to the default width and height. | toolbarSettings: { items: ['Minimize']} | -| Preview | ![Preview icon](../../images/preview.png) | Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: ['Preview']} | -| InsertCode | ![InsertCode icon](../../images/insert-code.png) | Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: ['InsertCode']} | -| Print | ![Print icon](../../images/print.png) | Allows to print the editor content. |toolbarSettings: { items: ['Print']}| -| ClearAll | ![ClearAll icon](../../images/clear-all.png) | Removes all styles that have been applied to the selected text.| toolbarSettings: { items: ['ClearAll']} | -| SourceCode | ![SourceCode icon](../../images/code-view.png) | Rich Text Editor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view.|toolbarSettings: { items: ['SourceCode']}| +| FullScreen | ![FullScreen icon](../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window.|toolbarSettings: { items: ['FullScreen']}| +| Maximize | ![Maximize icon](../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: ['Maximize']} | +| Minimize | ![Minimize icon](../images/minimize.png) | Shrinks the editor to the default width and height. | toolbarSettings: { items: ['Minimize']} | +| Preview | ![Preview icon](../images/preview.png) | Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: ['Preview']} | +| InsertCode | ![InsertCode icon](../images/insert-code.png) | Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: ['InsertCode']} | +| Print | ![Print icon](../images/print.png) | Allows to print the editor content. |toolbarSettings: { items: ['Print']}| +| ClearAll | ![ClearAll icon](../images/clear-all.png) | Removes all styles that have been applied to the selected text.| toolbarSettings: { items: ['ClearAll']} | +| SourceCode | ![SourceCode icon](../images/code-view.png) | Rich Text Editor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view.|toolbarSettings: { items: ['SourceCode']}| ## Removing built-in tool from toolbar diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md index 13473d13b6..8411772b79 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/tools/text-formatting.md @@ -20,15 +20,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']} | `bold` | -| Italic | ![Italic icon](../../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` | -| 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']} | `inline 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']} | `bold` | +| Italic | ![Italic icon](../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` | +| 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']} | `inline 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. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/basic-text-styling.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/basic-text-styling.md index 66e5ca1877..60bd145152 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/basic-text-styling.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/basic-text-styling.md @@ -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']} | `bold` | -| Italic | ![Italic icon](../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` | -| 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']} | `inline 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']} | `bold` | +| Italic | ![Italic icon](./images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` | +| 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']} | `inline 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. diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/inline-editing.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/inline-editing.md index 4ee1707e8b..f029509ac1 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/inline-editing.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/inline-editing.md @@ -45,5 +45,5 @@ This feature enhances the inline editing experience by providing immediate acces {% endtabs %} {% endif %} -![Rich Text Editor InlineMode](../../images/inline.png) +![Rich Text Editor InlineMode](../images/inline.png) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/resizable-editor.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/resizable-editor.md index 3f3a72d8f9..567ccc1d23 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/resizable-editor.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/resizable-editor.md @@ -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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md index d0cb56799a..f74a7d0d28 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/audio.md @@ -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 `` 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 @@ -206,7 +206,7 @@ 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/aspnetcore-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 @@ -214,7 +214,7 @@ To remove audio from the Rich Text Editor content, select the audio and click th 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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md index 42491a51d3..950062f721 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/insert-images.md @@ -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: @@ -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 @@ -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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md index 279a1dc454..89ff68746d 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/insert-image-media/video.md @@ -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 `` 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 @@ -211,9 +211,9 @@ 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 @@ -221,7 +221,7 @@ To remove a video from the Rich Text Editor content, select the video and click 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 @@ -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 @@ -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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/emoji-picker.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/emoji-picker.md index 05297d12e6..cd5ee6bae4 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/emoji-picker.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/emoji-picker.md @@ -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 diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md index bc367b6825..51d0f64c46 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/smart-editing/mentions.md @@ -34,7 +34,7 @@ In the following sample, we configured the following properties with popup dimen {% endhighlight %} {% endtabs %} -![ASP.NET Core mention integration ](../../images/mention-integration.png) +![ASP.NET Core mention integration ](../images/mention-integration.png) > [View Sample](https://ej2.syncfusion.com/aspnetcore/RichTextEditor/MentionIntegration#/bootstrap5) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md index 2861e81148..7a58796065 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/table.md @@ -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 @@ -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 @@ -95,7 +95,7 @@ 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 @@ -103,7 +103,7 @@ Sets the default width of the table when it is inserted in the Rich Text Editor 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 @@ -163,7 +163,7 @@ 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 @@ -171,7 +171,7 @@ The table cell split feature allows you to a selected cell can be split both hor 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" %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/built-in-tools.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/built-in-tools.md index 14230fe2a0..e727c5dde1 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/built-in-tools.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/built-in-tools.md @@ -28,16 +28,16 @@ It provides tools for applying text styles such as bold, italic, underline, stri | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Bold | ![Bold icon](../../images/bold.png) | Text that is thicker and darker than usual. | toolbarSettings: { items: ['Bold']} | -| Italic | ![Italic icon](../../images/italic.png) | Shows a text that is leaned to the right. | toolbarSettings: { items: ['Italic']} | -| Underline | ![Underline icon](../../images/under-line.png) | The underline is added to the selected text. | toolbarSettings: { items: ['Underline']} | -| StrikeThrough | ![StrikeThrough icon](../../images/strikethrough.png) | Apply double line strike through formatting for the selected text. |toolbarSettings: { items: ['StrikeThrough']}| -| ClearFormat | ![ClearFormat icon](../../images/clear-format.png) | The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles.|toolbarSettings: { items: ['ClearFormat']}| -| Blockquote | ![Blockquote icon](../../images/blockquote.png) | Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: ['Blockquote']}| -| SubScript | ![SubScript icon](../../images/sub-script.png) | Makes the selected text as subscript (lower).|toolbarSettings: { items: ['SubScript']}| -| SuperScript | ![SuperScript icon](../../images/super-script.png) | Makes the selected text as superscript (higher).|toolbarSettings: { items: ['SuperScript']}| -| LowerCase | ![LowerCase icon](../../images/lower-case.png) | Change the case of selected text to lower in the content. |toolbarSettings: { items: ['LowerCase']}| -| UpperCase | ![UpperCase icon](../../images/upper-case.png) | Change the case of selected text to upper in the content.|toolbarSettings: { items: ['UpperCase’']}| +| Bold | ![Bold icon](../images/bold.png) | Text that is thicker and darker than usual. | toolbarSettings: { items: ['Bold']} | +| Italic | ![Italic icon](../images/italic.png) | Shows a text that is leaned to the right. | toolbarSettings: { items: ['Italic']} | +| Underline | ![Underline icon](../images/under-line.png) | The underline is added to the selected text. | toolbarSettings: { items: ['Underline']} | +| StrikeThrough | ![StrikeThrough icon](../images/strikethrough.png) | Apply double line strike through formatting for the selected text. |toolbarSettings: { items: ['StrikeThrough']}| +| ClearFormat | ![ClearFormat icon](../images/clear-format.png) | The clear format tool is useful to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the text formatting will be cleared and return to its default formatting styles.|toolbarSettings: { items: ['ClearFormat']}| +| Blockquote | ![Blockquote icon](../images/blockquote.png) | Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: ['Blockquote']}| +| SubScript | ![SubScript icon](../images/sub-script.png) | Makes the selected text as subscript (lower).|toolbarSettings: { items: ['SubScript']}| +| SuperScript | ![SuperScript icon](../images/super-script.png) | Makes the selected text as superscript (higher).|toolbarSettings: { items: ['SuperScript']}| +| LowerCase | ![LowerCase icon](../images/lower-case.png) | Change the case of selected text to lower in the content. |toolbarSettings: { items: ['LowerCase']}| +| UpperCase | ![UpperCase icon](../images/upper-case.png) | Change the case of selected text to upper in the content.|toolbarSettings: { items: ['UpperCase’']}| ### Font & styling @@ -45,11 +45,11 @@ Tools in this section allow users to customize font properties such as font fami | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| FontName | ![FontName icon](../../images/font-name.png) | Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor's toolbar. |toolbarSettings: { items: ['FontName']}| -| FontSize | ![FontSize icon](../../images/font-size.png) | Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor's toolbar.|toolbarSettings: { items: ['FontSize']}| -| FontColor | ![FontColor icon](../../images/font-color.png) | Specifies an array of colors can be used in the colors popup for font color.|toolbarSettings: { items: ['FontColor']}| -| BackgroundColor | ![BackgroundColor icon](../../images/background-color.png) | Specifies an array of colors can be used in the colors popup for background color.|toolbarSettings: { items: ['BackgroundColor']}| -| Formats (Paragraph, Headings) | ![Format icon](../../images/formats.png) | An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. |toolbarSettings: { items: ['Formats']}| +| FontName | ![FontName icon](../images/font-name.png) | Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor's toolbar. |toolbarSettings: { items: ['FontName']}| +| FontSize | ![FontSize icon](../images/font-size.png) | Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor's toolbar.|toolbarSettings: { items: ['FontSize']}| +| FontColor | ![FontColor icon](../images/font-color.png) | Specifies an array of colors can be used in the colors popup for font color.|toolbarSettings: { items: ['FontColor']}| +| BackgroundColor | ![BackgroundColor icon](../images/background-color.png) | Specifies an array of colors can be used in the colors popup for background color.|toolbarSettings: { items: ['BackgroundColor']}| +| Formats (Paragraph, Headings) | ![Format icon](../images/formats.png) | An Object with the options that will appear in the Paragraph Format dropdown from the toolbar. |toolbarSettings: { items: ['Formats']}| ### Alignment @@ -57,11 +57,11 @@ This section provides alignment options for the text or content, allowing users | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Alignment | ![Alignment icon](../../images/alignments.png) | Align the content with left, center, and right margin.|toolbarSettings: { items: ['Alignments']}| -| JustifyLeft | ![JustifyLeft icon](../../images/align-left.png) | Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: ['JustifyLeft']} | -| JustifyCenter | ![JustifyCenter icon](../../images/align-center.png) | There is an even space on each side of each line since the text is not aligned to the left or right margins. | toolbarSettings: { items: ['JustifyCenter']} | -| JustifyRight | ![JustifyRight icon](../../images/align-right.png) | Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: ['JustifyRight']} | -| JustifyFull | ![JustifyFull icon](../../images/align-justify.png) | The text is aligned with both right and left margins. | toolbarSettings: { items: ['JustifyFull']} | +| Alignment | ![Alignment icon](../images/alignments.png) | Align the content with left, center, and right margin.|toolbarSettings: { items: ['Alignments']}| +| JustifyLeft | ![JustifyLeft icon](../images/align-left.png) | Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: ['JustifyLeft']} | +| JustifyCenter | ![JustifyCenter icon](../images/align-center.png) | There is an even space on each side of each line since the text is not aligned to the left or right margins. | toolbarSettings: { items: ['JustifyCenter']} | +| JustifyRight | ![JustifyRight icon](../images/align-right.png) | Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: ['JustifyRight']} | +| JustifyFull | ![JustifyFull icon](../images/align-justify.png) | The text is aligned with both right and left margins. | toolbarSettings: { items: ['JustifyFull']} | ### Lists & indentation @@ -69,12 +69,12 @@ Tools here allow users to create ordered and unordered lists, change the list st | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| OrderedList | ![OrderedList icon](../../images/order-list.png) | Create a new list item(numbered). |toolbarSettings: { items: ['OrderedList']}| -| UnorderedList | ![UnorderedList icon](../../images/unorder-list.png) | Create a new list item(bulleted). |toolbarSettings: { items: ['UnorderedList']}| -| NumberFormatList | ![NumberFormatList icon](../../images/number-format.png) | Allows to create list items with various list style types(numbered).|toolbarSettings: { items: ['NumberFormatList']}| -| BulletFormatList | ![BulletFormatList icon](../../images/bullet-format.png) | Allows to create list items with various list style types(bulleted).|toolbarSettings: { items: ['BulletFormatList']}| -| Indent | ![Indent icon](../../images/increase-indent.png) | Allows to increase the indent level of the content.|toolbarSettings: { items: ['Indent']}| -| Outdent | ![Outdent icon](../../images/decrease-indent.png) | Allows to decrease the indent level of the content.|toolbarSettings: { items: ['Outdent']}| +| OrderedList | ![OrderedList icon](../images/order-list.png) | Create a new list item(numbered). |toolbarSettings: { items: ['OrderedList']}| +| UnorderedList | ![UnorderedList icon](../images/unorder-list.png) | Create a new list item(bulleted). |toolbarSettings: { items: ['UnorderedList']}| +| NumberFormatList | ![NumberFormatList icon](../images/number-format.png) | Allows to create list items with various list style types(numbered).|toolbarSettings: { items: ['NumberFormatList']}| +| BulletFormatList | ![BulletFormatList icon](../images/bullet-format.png) | Allows to create list items with various list style types(bulleted).|toolbarSettings: { items: ['BulletFormatList']}| +| Indent | ![Indent icon](../images/increase-indent.png) | Allows to increase the indent level of the content.|toolbarSettings: { items: ['Indent']}| +| Outdent | ![Outdent icon](../images/decrease-indent.png) | Allows to decrease the indent level of the content.|toolbarSettings: { items: ['Outdent']}| ### Hyperlinks @@ -82,8 +82,8 @@ This section provides tools for inserting and managing hyperlinks within the con | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Hyperlink | ![Hyperlink icon](../../images/create-link.png) | Creates a hyperlink to a text or image to a specific location in the content.|toolbarSettings: { items: ['CreateLink']}| -| InsertLink | ![InsertLink icon](../../images/create-link.png) |Allows users to add a link to a particular item. | toolbarSettings: { items: ['InsertLink']} | +| Hyperlink | ![Hyperlink icon](../images/create-link.png) | Creates a hyperlink to a text or image to a specific location in the content.|toolbarSettings: { items: ['CreateLink']}| +| InsertLink | ![InsertLink icon](../images/create-link.png) |Allows users to add a link to a particular item. | toolbarSettings: { items: ['InsertLink']} | #### Link quicktoolbar items @@ -91,9 +91,9 @@ The link quicktoolbar provides tools to manage hyperlinks in the Rich Text Edito | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| OpenLink | ![OpenLink icon](../../images/open-link.png) | To open the URL link that is attached to the selected text. | quickToolbarSettings: { link: ['OpenLink']} | -| EditLink | ![EditLink icon](../../images/edit-link.png) | Allows you to change the URL that has been attached to a specific item. | quickToolbarSettings: { link: ['EditLink']} | -| RemoveLink | ![RemoveLink icon](../../images/remove-link.png) | Allows you to remove the applied link from the selected item. | quickToolbarSettings: { link: ['RemoveLink']} | +| OpenLink | ![OpenLink icon](../images/open-link.png) | To open the URL link that is attached to the selected text. | quickToolbarSettings: { link: ['OpenLink']} | +| EditLink | ![EditLink icon](../images/edit-link.png) | Allows you to change the URL that has been attached to a specific item. | quickToolbarSettings: { link: ['EditLink']} | +| RemoveLink | ![RemoveLink icon](../images/remove-link.png) | Allows you to remove the applied link from the selected item. | quickToolbarSettings: { link: ['RemoveLink']} | ### Images @@ -101,7 +101,7 @@ This section contains the primary tool for inserting images into the editor. | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Insert Image | ![Images icon](../../images/insert-image.png) | Inserts an image from an online source or local computer. |toolbarSettings: { items: ['Image']}| +| Insert Image | ![Images icon](../images/insert-image.png) | Inserts an image from an online source or local computer. |toolbarSettings: { items: ['Image']}| #### Image quicktoolbar items @@ -109,15 +109,15 @@ The image quicktoolbar offers a set of tools to edit images inserted in the Rich | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Replace Image | ![Replace icon](../../images/image-replace.png) | Replace the selected image with another image. | quickToolbarSettings: { image: ['Replace']} | -| Align Image | ![Alignment icon](../../images/alignments.png) | The image can be aligned to the right, left, or center. | quickToolbarSettings: { image: ['Align']} | -| Remove Image | ![Remove icon](../../images/table-remove.png) | Allows to remove the selected image from the editor. | quickToolbarSettings: { image: ['Remove']} | -| OpenImageLink | ![OpenImageLink icon](../../images/open-link.png) | Opens the link that is attached to the selected image. | quickToolbarSettings: { image: ['OpenImageLink']} | -| EditImageLink | ![EditImageLink icon](../../images/edit-link.png) | Allows to edit the link that is attached to the selected image. | quickToolbarSettings: { image: ['EditImageLink']} | -| RemoveImageLink | ![RemoveImageLink icon](../../images/remove-link.png) | Removes the link that is attached to the selected image. | quickToolbarSettings: { image: ['RemoveImageLink']} | -| Display | ![Display icon](../../images/display.png) | Allows you to choose whether an image should be shown inline or as a block. | quickToolbarSettings: { image: ['Display']} | -| AltText | ![AltText icon](../../images/alt-text.png) | To display image description when an image on a Web page cannot be displayed. | quickToolbarSettings: { image: ['AltText']} | -| Dimension | ![Dimension icon](../../images/dimension.png) | Allows you to customize the image’s height and width. | quickToolbarSettings: { image: ['Dimension']} | +| Replace Image | ![Replace icon](../images/image-replace.png) | Replace the selected image with another image. | quickToolbarSettings: { image: ['Replace']} | +| Align Image | ![Alignment icon](../images/alignments.png) | The image can be aligned to the right, left, or center. | quickToolbarSettings: { image: ['Align']} | +| Remove Image | ![Remove icon](../images/table-remove.png) | Allows to remove the selected image from the editor. | quickToolbarSettings: { image: ['Remove']} | +| OpenImageLink | ![OpenImageLink icon](../images/open-link.png) | Opens the link that is attached to the selected image. | quickToolbarSettings: { image: ['OpenImageLink']} | +| EditImageLink | ![EditImageLink icon](../images/edit-link.png) | Allows to edit the link that is attached to the selected image. | quickToolbarSettings: { image: ['EditImageLink']} | +| RemoveImageLink | ![RemoveImageLink icon](../images/remove-link.png) | Removes the link that is attached to the selected image. | quickToolbarSettings: { image: ['RemoveImageLink']} | +| Display | ![Display icon](../images/display.png) | Allows you to choose whether an image should be shown inline or as a block. | quickToolbarSettings: { image: ['Display']} | +| AltText | ![AltText icon](../images/alt-text.png) | To display image description when an image on a Web page cannot be displayed. | quickToolbarSettings: { image: ['AltText']} | +| Dimension | ![Dimension icon](../images/dimension.png) | Allows you to customize the image’s height and width. | quickToolbarSettings: { image: ['Dimension']} | ### Tables @@ -125,7 +125,7 @@ This section offers the main tool for creating tables within the content. | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| CreateTable | ![CreateTable icon](../../images/create-table.png) | Create a table with defined columns and rows. | toolbarSettings: { items: ['CreateTable']} | +| CreateTable | ![CreateTable icon](../images/create-table.png) | Create a table with defined columns and rows. | toolbarSettings: { items: ['CreateTable']} | #### Table quicktoolbar items @@ -133,13 +133,13 @@ The table quicktoolbar provides options for table editing within the Rich Text E | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| RemoveTable | ![RemoveTable icon](../../images/table-remove.png) | Removes the selected table and its contents. | quickToolbarSettings: { table: ['TableRemove']} | -| TableHeader | ![TableHeader icon](../../images/table-headers.png) | Allows you to add a table header. | quickToolbarSettings: { table: ['TableHeader']} | -| TableColumns | ![TableColumns icon](../../images/table-columns.png) | Shows the dropdown to insert a column or delete the selected column. | quickToolbarSettings: { table: ['TableColumns']} | -| TableRows | ![TableRows icon](../../images/table-row.png) | Shows the dropdown to insert a row ors delete the selected row. | quickToolbarSettings: { table: ['TableRows']} | -| TableCellHorizontalAlign | ![TableCellHorizontalAlign icon](../../images/alignments.png) | Allows the table cell content to be aligned horizontally. | quickToolbarSettings: { table: ['TableCellHorizontalAlign']} | -| TableCellVerticalAlign | ![TableCellVerticalAlign icon](../../images/vertical-align.png) | Allows the table cell content to be aligned vertically. | quickToolbarSettings: { table: ['TableCellVerticalAlign']} | -| TableEditProperties | ![TableEditProperties icon](../../images/table-edit.png) | Allows you to change the table width, padding, and cell spacing styles. | quickToolbarSettings: { table: ['TableEditProperties']} | +| RemoveTable | ![RemoveTable icon](../images/table-remove.png) | Removes the selected table and its contents. | quickToolbarSettings: { table: ['TableRemove']} | +| TableHeader | ![TableHeader icon](../images/table-headers.png) | Allows you to add a table header. | quickToolbarSettings: { table: ['TableHeader']} | +| TableColumns | ![TableColumns icon](../images/table-columns.png) | Shows the dropdown to insert a column or delete the selected column. | quickToolbarSettings: { table: ['TableColumns']} | +| TableRows | ![TableRows icon](../images/table-row.png) | Shows the dropdown to insert a row ors delete the selected row. | quickToolbarSettings: { table: ['TableRows']} | +| TableCellHorizontalAlign | ![TableCellHorizontalAlign icon](../images/alignments.png) | Allows the table cell content to be aligned horizontally. | quickToolbarSettings: { table: ['TableCellHorizontalAlign']} | +| TableCellVerticalAlign | ![TableCellVerticalAlign icon](../images/vertical-align.png) | Allows the table cell content to be aligned vertically. | quickToolbarSettings: { table: ['TableCellVerticalAlign']} | +| TableEditProperties | ![TableEditProperties icon](../images/table-edit.png) | Allows you to change the table width, padding, and cell spacing styles. | quickToolbarSettings: { table: ['TableEditProperties']} | ### Undo & redo @@ -147,8 +147,8 @@ These tools allow users to easily undo or redo any changes made within the edito | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| Undo | ![Undo icon](../../images/undo.png) | Allows to undo the actions.|toolbarSettings: { items: ['Undo']} | -| Redo | ![Redo icon](../../images/redo.png) | Allows to redo the actions.|toolbarSettings: { items: ['Redo']}| +| Undo | ![Undo icon](../images/undo.png) | Allows to undo the actions.|toolbarSettings: { items: ['Undo']} | +| Redo | ![Redo icon](../images/redo.png) | Allows to redo the actions.|toolbarSettings: { items: ['Redo']}| ### Other tools @@ -156,14 +156,14 @@ This section contains miscellaneous tools such as full-screen mode, print, previ | Name | Icons | Summary | Initialization | |----------------|---------|---------|------------------------------------------| -| FullScreen | ![FullScreen icon](../../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window.|toolbarSettings: { items: ['FullScreen']}| -| Maximize | ![Maximize icon](../../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: ['Maximize']} | -| Minimize | ![Minimize icon](../../images/minimize.png) | Shrinks the editor to the default width and height. | toolbarSettings: { items: ['Minimize']} | -| Preview | ![Preview icon](../../images/preview.png) | Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: ['Preview']} | -| InsertCode | ![InsertCode icon](../../images/insert-code.png) | Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: ['InsertCode']} | -| Print | ![Print icon](../../images/print.png) | Allows to print the editor content. |toolbarSettings: { items: ['Print']}| -| ClearAll | ![ClearAll icon](../../images/clear-all.png) | Removes all styles that have been applied to the selected text.| toolbarSettings: { items: ['ClearAll']} | -| SourceCode | ![SourceCode icon](../../images/code-view.png) | Rich Text Editor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view.|toolbarSettings: { items: ['SourceCode']}| +| FullScreen | ![FullScreen icon](../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window.|toolbarSettings: { items: ['FullScreen']}| +| Maximize | ![Maximize icon](../images/maximize.png) | Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: ['Maximize']} | +| Minimize | ![Minimize icon](../images/minimize.png) | Shrinks the editor to the default width and height. | toolbarSettings: { items: ['Minimize']} | +| Preview | ![Preview icon](../images/preview.png) | Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: ['Preview']} | +| InsertCode | ![InsertCode icon](../images/insert-code.png) | Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: ['InsertCode']} | +| Print | ![Print icon](../images/print.png) | Allows to print the editor content. |toolbarSettings: { items: ['Print']}| +| ClearAll | ![ClearAll icon](../images/clear-all.png) | Removes all styles that have been applied to the selected text.| toolbarSettings: { items: ['ClearAll']} | +| SourceCode | ![SourceCode icon](../images/code-view.png) | Rich Text Editor includes the ability for users to directly edit HTML code via “Source View”. If you made any modification in Source view directly, synchronize with Design view.|toolbarSettings: { items: ['SourceCode']}| ## Removing built-in tool from toolbar @@ -176,7 +176,7 @@ Remove the build-in tools from the toolbar by using the [toolbarSettings](https: {% include code-snippet/rich-text-editor/remove-buildin-tool/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Controller.cs" %} -{% include code-snippet/rich-text-editor/audremove-buildin-tool/controller.cs %} +{% include code-snippet/rich-text-editor/remove-buildin-tool/controller.cs %} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md index 8fb0ee5711..8183458077 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/text-formatting.md @@ -20,15 +20,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']} | `bold` | -| Italic | ![Italic icon](../../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` | -| 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']} | `inline 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']} | `bold` | +| Italic | ![Italic icon](../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `italic` | +| 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']} | `inline 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.