From f4c7f6ac40f080d809f379ef31ed2d1637c98fcb Mon Sep 17 00:00:00 2001 From: vinithaJeyakumar Date: Fri, 2 May 2025 16:40:35 +0530 Subject: [PATCH] 951777: Corrected the image path -Dev --- .../editor-types/inline-editing.md | 2 +- .../EJ2_ASP.MVC/insert-image-media/audio.md | 6 +- .../insert-image-media/insert-images.md | 8 +- .../EJ2_ASP.MVC/insert-image-media/video.md | 14 +-- .../EJ2_ASP.MVC/smart-editing/emoji-picker.md | 2 +- .../EJ2_ASP.MVC/smart-editing/mentions.md | 2 +- .../EJ2_ASP.MVC/tools/built-in-tools.md | 118 +++++++++--------- .../EJ2_ASP.MVC/tools/text-formatting.md | 18 +-- .../editor-types/inline-editing.md | 2 +- .../editor-types/resizable-editor.md | 2 +- .../insert-image-media/audio.md | 6 +- .../insert-image-media/insert-images.md | 8 +- .../insert-image-media/video.md | 14 +-- .../smart-editing/emoji-picker.md | 2 +- .../EJ2_ASP.NETCORE/smart-editing/mentions.md | 2 +- .../EJ2_ASP.NETCORE/tools/built-in-tools.md | 118 +++++++++--------- .../EJ2_ASP.NETCORE/tools/text-formatting.md | 18 +-- 17 files changed, 171 insertions(+), 171 deletions(-) diff --git a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/inline-editing.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/inline-editing.md index 6908f9f909..e034092740 100644 --- a/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/inline-editing.md +++ b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.MVC/editor-types/inline-editing.md @@ -45,4 +45,4 @@ This feature enhances the inline editing experience by providing immediate acces {% endtabs %} {% endif %} -![Rich Text Editor InlineMode](../../images/inline.png) \ No newline at end of file +![Rich Text Editor InlineMode](../images/inline.png) \ No newline at end of file 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 186e636bc9..4b95a18299 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 73d13f01a3..c38319e1de 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/aspnetmvc-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/aspnetmvc-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/aspnetmvc-js2/Syncfusion.EJ2.RichTextEditor.RichTextEditorVideoSettings.html#Syncfusion_EJ2_RichTextEditor_RichTextEditorVideoSettings_MinWidth) and [MinHeight](https://help.syncfusion.com/cr/aspnetmvc-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/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/editor-types/inline-editing.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/editor-types/inline-editing.md index f3e1bed842..e7b194deb8 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 c936ee017e..0b4c5e5af1 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) ## Restrict resize 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 7ced939bb2..84e5c565db 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 @@ -205,7 +205,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 @@ -213,7 +213,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 377942d6ea..29453c7057 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 @@ -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 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 735eafe477..a2c2ba5d11 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 from 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 @@ -210,9 +210,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 @@ -220,7 +220,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 @@ -228,7 +228,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 @@ -267,7 +267,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) ## See also 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 8a01dcd9fa..034a589ff1 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 238f0784b7..0554f97257 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/tools/built-in-tools.md b/ej2-asp-core-mvc/rich-text-editor/EJ2_ASP.NETCORE/tools/built-in-tools.md index b9fb0bbea7..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 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.