Merge pull request #805 from Syncfusion-Content/hotfix/hotfix-v29.1.33

DOCINFRA-2341_merged_using_automation

Author: SyncfusionBuild

ej2-angular-toc.html

@@ -2347,60 +2347,72 @@
     RichTextEditor
     <ul>
       <li><a href="/ej2-angular/rich-text-editor/getting-started">Getting Started</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/module">Feature Modules</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/editor-value">Editor Value</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/editor-mode">Editor Modes</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/toolbar">Toolbar</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/inline-editing">Inline Editing</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/iframe">IFrame Editing Mode</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/style-encapsulation">Style Encapsulation</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/resizable-editor">Resizable Editor</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/read-only-mode">Read-only Mode</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/disable-editor">Disabling the Rich Text Editor</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/character-count">Character Count</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/code-view-support">Code View Support</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/placeholder-text">Placeholder Text</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/basic-text-styling">Basic Text Styling</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/font-styling">Font Family, Size and Color</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/indent-and-outdent">Increase and Decrease Indent</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/text-alignments">Text Alignments</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/headings">Heading Styles</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/quotation-formatting">Quotation Formatting</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/code-block-formatting">Code Block Formatting</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/list-formatting">List Formatting</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/link">Link</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/insert-images">Images</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/audio">Audios</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/video">Videos</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/table">Table</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/remove-formatting">Remove Formatting</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/format-painter">Format Painter</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/emoji-picker">Emoji Picker</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/paste-cleanup">Paste Cleanup</a></li>
+      <li><a href="/ej2-angular/rich-text-editor/module">Feature Module Injection</a></li>
+      <li><a href="/ej2-angular/rich-text-editor/editor-value">Managing Editor Value</a></li>
+      <li>Toolbar
+         <ul>
+            <li><a href="/ej2-angular/rich-text-editor/toolbar/toolbar-types">Toolbar Types</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/toolbar/quick-toolbar">Quick Toolbar</a></li>
+         </ul>
+      </li>
+      <li>Tools
+         <ul>
+            <li><a href="/ej2-angular/rich-text-editor/tools/built-in-tools">Built-in Tools</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/tools/custom-tools">Custom Tools</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/tools/text-formatting">Text formatting and structural</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/tools/styling-tools">Styling Tools</a></li>
+         </ul>
+      </li>
+      <li>Editor Types
+         <ul>
+            <li><a href="/ej2-angular/rich-text-editor/editor-types/editor-mode">Editor Render Mode</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/editor-types/iframe">Iframe Editor</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/editor-types/inline-editing">Inline Editor</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/editor-types/resizable-editor">Resizable Editor</a></li>
+         </ul>
+      </li>
+      <li>Insert Image and Media
+         <ul>
+            <li><a href="/ej2-angular/rich-text-editor/insert-image-media/insert-images">Insert Image</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/insert-image-media/audio">Insert Audio</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/insert-image-media/video">Insert Video</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/insert-image-media/file-browser">File Browser Support</a></li>
+         </ul>
+      </li>
+      <li><a href="/ej2-angular/rich-text-editor/link">Link Manipulation</a></li>
+      <li><a href="/ej2-angular/rich-text-editor/table">Table Manipulation</a></li>
+      <li><a href="/ej2-angular/rich-text-editor/paste-cleanup">Paste Clean-up</a></li>
+      <li>Smart Editing
+         <ul>
+            <li><a href="/ej2-angular/rich-text-editor/smart-editing/mentions">Mention Integration</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/smart-editing/slash-menu">Slash Commands</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/smart-editing/emoji-picker">Emoji Picker</a></li>
+         </ul>
+      </li>
+      <li>Validation and Security
+         <ul>
+            <li><a href="/ej2-angular/rich-text-editor/validation-security/form-validation">Forms Support</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/validation-security/xhtml-validation">Content Validation and Security in XHTML</a></li>
+            <li><a href="/ej2-angular/rich-text-editor/validation-security/read-only-mode">Controlling Editor Access</a></li>
+         </ul>
+      </li>
       <li><a href="/ej2-angular/rich-text-editor/enter-key-configuration">Enter Key Configuration</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/undo-redo">Undo Redo</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/mentions">Mentions</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/form-validation">Forms Support</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/xhtml-validation">XHTML validation</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/prevent-cross-site-scripting">Preventing Cross-Site Scripting (XSS)</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/style">Style Appearance Customization</a></li>
+      <li><a href="/ej2-angular/rich-text-editor/undo-redo">Undo and Redo</a></li>
       <li><a href="/ej2-angular/rich-text-editor/import-and-export">Content Import/Export</a></li>
+      <li><a href="/ej2-angular/rich-text-editor/exec-command">Execute Command</a></li>
+      <li><a href="/ej2-angular/rich-text-editor/style">Style and Appearance Customization</a></li>
+      <li><a href="/ej2-angular/rich-text-editor/style-encapsulation">Style Encapsulation</a></li>
       <li><a href="/ej2-angular/rich-text-editor/spell-grammar-check">Spell and Grammar Check</a></li>
       <li><a href="/ej2-angular/rich-text-editor/third-party-integration">Third-Party Integration</a></li>
       <li><a href="/ej2-angular/rich-text-editor/globalization">Globalization</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/file-browser">File Browser</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/slash-menu">Slash Menu</a></li>
-      <li><a href="/ej2-angular/rich-text-editor/exec-command">ExecuteCommand in Rich Text Editor</a></li>
       <li><a href="/ej2-angular/rich-text-editor/keyboard-support">Keyboard shortcuts</a></li>
       <li><a href="/ej2-angular/rich-text-editor/accessibility">Accessibility</a></li>
       <li>How To
          <ul>
             <li><a href="/ej2-angular/rich-text-editor/how-to/richtexteditor-inside-dialog">Integrating Rich Text Editor in Dialog Components</a></li>
             <li><a href="/ej2-angular/rich-text-editor/how-to/richtexteditor-inside-tab">Integrating Rich Text Editor in Tab Components</a></li>
-            <li><a href="/ej2-angular/rich-text-editor/how-to/add-google-fonts">Add Google fonts</a></li>
             <li><a href="/ej2-angular/rich-text-editor/how-to/change-default-font-family">Change default font-family</a></li>
             <li><a href="/ej2-angular/rich-text-editor/how-to/check-image-size">Check image size</a></li>
-            <li><a href="/ej2-angular/rich-text-editor/how-to/customize-placeholder-style">Customize placeholder style</a></li>
             <li><a href="/ej2-angular/rich-text-editor/how-to/positioning-cursor-at-the-end-of-the-content">Positioning Cursor at Content End in Rich Text Editor</a></li>
             <li><a href="/ej2-angular/rich-text-editor/how-to/capture-ctrls-to-update-the-value">Implementing Ctrl+s Shortcut for Value Updates</a></li>
             <li><a href="/ej2-angular/rich-text-editor/how-to/set-the-cursor-at-the-specific-range">Setting Cursor at Specific Range in Editor</a></li>

ej2-angular/rich-text-editor/editor-mode.md renamed to ej2-angular/rich-text-editor/editor-types/editor-mode.md

@@ -71,7 +71,7 @@ The third-party library such as `Marked` or any other library is used to convert
 * The Supported Selection Tags are `Bold`, `Italic`, `StrikeThrough`, `InlineCode`, `SubScript`, `SuperScript`, `UpperCase`, `LowerCase`.
 * The supported insert commands are `Image`, `Link` and `Table`.
 
-For further details on Markdown editing, refer to the [`Markdown`](../rich-text-editor/markdown)
+For further details on Markdown editing, refer to the [`Markdown`](../../markdown-editor/getting-started)
 
 ```typescript
 

ej2-angular/rich-text-editor/iframe.md renamed to ej2-angular/rich-text-editor/editor-types/iframe.md

@@ -62,4 +62,4 @@ For example, add the following to the `app.component.css` file:
 ## See Also
 
 * [Working with IFrame Editing Mode](./iframe)
-* [Using the Markdown Editor](./markdown)
+* [Using the Markdown Editor](../../markdown-editor/getting-started)

ej2-angular/rich-text-editor/inline-editing.md renamed to ej2-angular/rich-text-editor/editor-types/inline-editing.md

@@ -58,7 +58,7 @@ You can insert audio from either the hosted link or the local machine, by clicki
 
 By default, the audio tool opens the audio dialog, allowing you to insert audio from an online source. Inserting the URL will be added to the `src` attribute of the `<source>` tag.
 
-![Angular Rich Text Editor Audio insert](./images/angular-richtexteditor-audio-web.png)
+![Angular Rich Text Editor Audio insert](../images/angular-richtexteditor-audio-web.png)
 
 ## Uploading Audio from Local Machine
 
@@ -374,15 +374,15 @@ public void SaveFiles(IList<IFormFile> UploadFiles)
 
 Once an audio file has been inserted, you can change it using the Rich Text Editor [quickToolbarSettings](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/quickToolbarSettings/#quicktoolbarsettings) `audioReplace` option. You can replace the audio file using the web URL or the browse option in the audio dialog.
 
-![Angular Rich Text Editor Audio replace](./images/angular-richtexteditor-audio-replace.png)
+![Angular Rich Text Editor Audio replace](../images/angular-richtexteditor-audio-replace.png)
 
 ## Deleting Audios
 
 To remove audio from the Rich Text Editor content, select the audio and click the `audioRemove` button from the quick toolbar. It will delete the audio from the Rich Text Editor content as well as from the service location if the [insertAudioSettings.removeUrl](https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/audioSettingsModel/#removeurl) is given.
 
 Once you select the audio from the local machine, the URL for the audio will be generated. You can remove the audio from the service location by clicking the cross icon.
 
-![Angular Rich Text Editor Audio delete](./images/angular-richtexteditor-audio-del.png)
+![Angular Rich Text Editor Audio delete](../images/angular-richtexteditor-audio-del.png)
 
 ## Configuring Audio Display Position
 

ej2-angular/rich-text-editor/resizable-editor.md renamed to ej2-angular/rich-text-editor/editor-types/resizable-editor.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 });
+        }
+    }
+
+```
+
 ### Image Renaming Feature
 
 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.
@@ -165,7 +251,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:
 
@@ -192,7 +278,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
 
@@ -224,13 +310,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