Integrated latest changes at 04-30-2025 1:32:13 AM

Author: SyncfusionBuild

ej2-angular/rich-text-editor/insert-image-media/insert-images.md

@@ -100,6 +100,92 @@ Configure [insertImageSettings.removeUrl](https://ej2.syncfusion.com/angular/doc
 
 Set the [insertImageSettings.saveFormat](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/imageSettingsModel/#saveformat) property to determine whether the image should be saved as Blob or Base64, aligning with your application's requirements.
 
+```typescript
+
+import { Component } from '@angular/core';
+import { ToolbarService, QuickToolbarService, LinkService, HtmlEditorService, ImageService,} from '@syncfusion/ej2-angular-richtexteditor';
+import { UploadingEventArgs } from '@syncfusion/ej2-angular-inputs';
+
+@Component({
+  selector: 'app-root',
+  template: `<ejs-richtexteditor id='' [toolbarSettings]='toolbarSettings' [insertImageSettings] = 'insertImageSettings' >
+    </ejs-richtexteditor>`,
+  providers: [ ToolbarService, QuickToolbarService, LinkService, ImageService, HtmlEditorService ],
+})
+
+export class AppComponent {
+  public toolbarSettings: object = {
+    items: ['Image'],
+  };
+  public insertImageSettings: Object = {
+    saveUrl: "[SERVICE_HOSTED_PATH]/api/Home/SaveImage",
+    path: "[SERVICE_HOSTED_PATH]/Uploads/"
+  };
+}
+
+```
+
+```csharp
+
+public class HomeController : Controller
+    {
+        private IHostingEnvironment hostingEnv;
+
+        public HomeController(IHostingEnvironment env)
+        {
+            hostingEnv = env;
+        }
+
+        public IActionResult Index()
+        {
+            return View();
+        }
+
+        [AcceptVerbs("Post")]
+        public void SaveImage(IList<IFormFile> UploadFiles)
+        {
+            try
+            {
+                foreach (IFormFile file in UploadFiles)
+                {
+                    if (UploadFiles != null)
+                    {
+                        string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
+                        filename = hostingEnv.WebRootPath + "\\Uploads" + $@"\{filename}";
+
+                        // Create a new directory, if it does not exists
+                        if (!Directory.Exists(hostingEnv.WebRootPath + "\\Uploads"))
+                        {
+                            Directory.CreateDirectory(hostingEnv.WebRootPath + "\\Uploads");
+                        }
+
+                        if (!System.IO.File.Exists(filename))
+                        {
+                            using (FileStream fs = System.IO.File.Create(filename))
+                            {
+                                file.CopyTo(fs);
+                                fs.Flush();
+                            }
+                            Response.StatusCode = 200;
+                        }
+                    }
+                }
+            }
+            catch (Exception)
+            {
+                Response.StatusCode = 204;
+            }
+        }
+
+        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+        public IActionResult Error()
+        {
+            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
+        }
+    }
+
+```
+
 ### Rename images before inserting
 
 You can use the [insertImageSettings](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#insertimagesettings) property, to specify the server handler to upload the selected image. Then by binding the [fileUploadSuccess](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/#fileuploadsuccess) event, you can receive the modified file name from the server and update it in the Rich Text Editor's insert image dialog.

ej2-angular/rich-text-editor/insert-image-media/video.md

@@ -421,8 +421,6 @@ Once a video file has been inserted, you can replace it using the Rich Text Edit
 
 ![Angular Rich Text Editor Embed Video Replace](../images/angular-richtexteditor-video-replace-embed.png)
 
-![Angular Rich Text Editor Web Video Replace](../images/angular-richtexteditor-video-replace-web.png)
-
 ## Deleting video
 
 To remove a video from the Rich Text Editor content, select the video and click the `videoRemove` button from the quick toolbar. It will delete the video from the Rich Text Editor content as well as from the service location if the [insertVideoSettings.removeUrl](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/videoSettingsModel/#removeurl) is given.

ej2-angular/rich-text-editor/module.md

@@ -12,13 +12,13 @@ domainurl: ##DomainURL##
 
 The Angular Rich Text Editor component follows a modular architecture, enabling users to include or exclude features as needed to ensure optimal performance and customization.
 
-## What is a Module in Angular Rich Text Editor?
+## What is a module in Angular Rich Text Editor?
 
 In the Angular Rich Text Editor, a module refers to a self-contained feature or functionality that can be selectively enabled or disabled. These modules are provided as part of the @syncfusion/ej2-angular-richtexteditor package and can be injected to extend the editor's capabilities.
 
 For example, modules such as `Toolbar`, `Link`, `Image`, `HtmlEditor`, and `QuickToolbar` enable specific tools and behavior in the Rich Text Editor interface.
 
-## How to Import and Inject Modules
+## How to import and inject modules
 
 To use a module in the Angular Rich Text Editor, you must:
 
@@ -40,7 +40,7 @@ The following example demonstrates how to import and inject modules.
 
 {% previewsample "page.domainurl/samples/rich-text-editor/module-inject" %}
 
-## Available Modules in Rich Text Editor
+## Available modules in Rich Text Editor
 
 | Module | Description |
 |------|-------------|

ej2-angular/rich-text-editor/smart-editing/emoji-picker.md

@@ -14,9 +14,9 @@ An emoji picker is a tool designed for adding emojis or emoticons to text with e
 
 ## Configuring emoji picker tool in the toolbar
 
-Add the `EmojiPicker` tool to the Rich Text Editor toolbar using the `toolbarSettings` [items](../api/rich-text-editor/toolbarSettings/#items) property.
+Add the `EmojiPicker` tool to the Rich Text Editor toolbar using the `toolbarSettings` [items](https://helpej2.syncfusion.com/angular/documentation/api/rich-text-editor/toolbarSettingsModel/#items) property.
 
-By default, a predefined set of emojis is configured. However, these icons can be customized according to specific needs by using the  [emojiPickerSettings](../api/rich-text-editor/richTextEditorModel/#emojiPickerSettings) property.
+By default, a predefined set of emojis is configured. However, these icons can be customized according to specific needs by using the  [emojiPickerSettings](https://helpej2.syncfusion.com/angular/documentation/api/rich-text-editor/#emojipickersettings) property.
 
 ```ts
 
@@ -109,11 +109,11 @@ export class AppComponent {
 
 ```
 
-Additionally, you have the option to customize the icons of toolbar items using the [iconCss](../api/rich-text-editor/emojiIconsSet/#iconCss) and [code](../api/rich-text-editor/emojiIconsSet/#code) properties. The `iconCSS` property allows you to define a custom CSS class for the toolbar item icon, while the `code` property enables you to specify the Unicode character code for the icon.
+Additionally, you have the option to customize the icons of toolbar items using the [iconCss](https://helpej2.syncfusion.com/angular/documentation/api/rich-text-editor/emojiIconsSet/#iconcss) and [code](https://helpej2.syncfusion.com/angular/documentation/api/rich-text-editor/emojiIconsSet/#code) properties. The `iconCSS` property allows you to define a custom CSS class for the toolbar item icon, while the `code` property enables you to specify the Unicode character code for the icon.
 
 When both `iconCSS` and `code` properties are provided, the `iconCSS` property takes precedence in determining the appearance of the toolbar item icon.
 
-Additionally, you have the option to enhance the user experience by implementing a filtering feature for efficiently managing a large dataset of emojis. By setting the [showSearchBox](../api/rich-text-editor/emojiSettings/#showSearchBox) property to `true` (which is the default value), users will be able to utilize a search box to filter the displayed emojis according to their preferences.
+Additionally, you have the option to enhance the user experience by implementing a filtering feature for efficiently managing a large dataset of emojis. By setting the [showSearchBox](https://helpej2.syncfusion.com/angular/documentation/api/rich-text-editor/emojiSettingsModel/#showsearchbox) property to `true` (which is the default value), users will be able to utilize a search box to filter the displayed emojis according to their preferences.
 
 The following code example shows how to add the emoji picker tool in the Rich Text Editor.
 
@@ -135,7 +135,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.
 
-![Angular Rich Text Editor Emoji Picker](./images/angular-richtexteditor-emoji-picker-web.png)
+![Angular Rich Text Editor Emoji Picker](../images/angular-richtexteditor-emoji-picker-web.png)
 
 ## Navigating and selecting emojis using the keyboard
 

ej2-angular/rich-text-editor/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']} | `<b>bold</b>` |
-| Italic | ![Italic icon](./images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `<em>italic</em>` |
-| Underline | ![Underline icon](./images/under-line.png) | Adds a line beneath the text | toolbarSettings: { items: ['Underline']} |
-| StrikeThrough | ![StrikeThrough icon](./images/strikethrough.png) | Applies a line through the text. |toolbarSettings: { items: ['StrikeThrough']}|
-| InlineCode |![InlineCode icon](./images/inlineCode.png) | Formats text as inline code | toolbarSettings: { items: ['InlineCode']} | `<code>inline code</code>`|
-| SubScript | ![SubScript icon](./images/sub-script.png) | Positions text slightly below the normal line |toolbarSettings: { items: ['SubScript']}|
-| SuperScript | ![SuperScript icon](./images/super-script.png) | Positions text slightly above the normal line |toolbarSettings: { items: ['SuperScript’']}|
-| LowerCase | ![LowerCase icon](./images/lower-case.png) |  Converts text to lowercase |toolbarSettings: { items: ['LowerCase']}|
-| UpperCase | ![UpperCase icon](./images/upper-case.png) | Converts text to uppercase |toolbarSettings: { items: ['UpperCase’']}|
+| Bold  | ![Bold icon](.../images/bold.png) | Makes text thicker and darker | toolbarSettings: { items: ['Bold']} | `<b>bold</b>` |
+| Italic | ![Italic icon](../images/italic.png) | Slants text to the right | toolbarSettings: { items: ['Italic']} | `<em>italic</em>` |
+| Underline | ![Underline icon](../images/under-line.png) | Adds a line beneath the text | toolbarSettings: { items: ['Underline']} |
+| StrikeThrough | ![StrikeThrough icon](../images/strikethrough.png) | Applies a line through the text. |toolbarSettings: { items: ['StrikeThrough']}|
+| InlineCode |![InlineCode icon](../images/inlineCode.png) | Formats text as inline code | toolbarSettings: { items: ['InlineCode']} | `<code>inline code</code>`|
+| SubScript | ![SubScript icon](../images/sub-script.png) | Positions text slightly below the normal line |toolbarSettings: { items: ['SubScript']}|
+| SuperScript | ![SuperScript icon](../images/super-script.png) | Positions text slightly above the normal line |toolbarSettings: { items: ['SuperScript’']}|
+| LowerCase | ![LowerCase icon](../images/lower-case.png) |  Converts text to lowercase |toolbarSettings: { items: ['LowerCase']}|
+| UpperCase | ![UpperCase icon](../images/upper-case.png) | Converts text to uppercase |toolbarSettings: { items: ['UpperCase’']}|
 
 Please refer to the sample below to add these basic text styling options in the Rich Text Editor.