{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-auto-save",
  "framework": "angular",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "auto-save",
  "dependencies": [
    "@syncfusion/ej2-angular-richtexteditor"
  ],
  "description": "Rich text editor sample demonstrating automatic saving of edited content.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": true,
    "platformIndex": "https://ai.syncfusion.com/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/rich-text-editor-auto-save.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-auto-save/auto-save.component.ts",
      "content": "/**\n * Rich Text Editor Auto save Sample\n */\nimport { Component, ViewEncapsulation, ViewChild, ElementRef } from '@angular/core';\nimport { ToolbarService, RichTextEditorComponent, LinkService, ImageService, HtmlEditorService, RichTextEditorModule, QuickToolbarService, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService } from '@syncfusion/ej2-angular-richtexteditor';\nimport { ToolbarModule } from '@syncfusion/ej2-angular-navigations';\nimport { SwitchModule } from '@syncfusion/ej2-angular-buttons';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n@Component({\n    selector: 'control-content',\n    templateUrl: 'auto-save.html',\n    styleUrls: ['auto-save.css'],\n    encapsulation: ViewEncapsulation.None,\n    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService],\n    standalone: true,\n    imports: [RichTextEditorModule, SwitchModule]\n})\n\nexport class AutoSaveComponent {\n\n    @ViewChild('autosaveRTE')\n    public rteObj!: RichTextEditorComponent;\n\n    public tools: ToolbarModule = {\n      items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'Blockquote',\n            'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo']\n    };\npublic updateStatus() {\n    document.getElementById('saving')!.style.display = 'block';\n    document.getElementById('saved')!.style.display = 'none';\n    setTimeout(() => {\n      if (!isNullOrUndefined(document.getElementById('saving')) && !isNullOrUndefined(document.getElementById('saved'))) {\n        document.getElementById('saving')!.style.display = 'none';\n        document.getElementById('saved')!.style.display = 'block';\n      }\n    }, 500);\n  }\n\n  public onChange(e: any) {\n    var defaultRTE = this.rteObj;\n    if (e.checked) {\n      defaultRTE.saveInterval = 5000;\n    } else {\n      defaultRTE.saveInterval = 0;\n      setTimeout(() => {\n        document.getElementById('saving')!.style.display = 'none';\n        document.getElementById('saved')!.style.display = 'none';\n      }, 500);\n    }\n  }\n  editorValue: string = `<h2>Welcome to the Rich Text Editor Demo!📝</h2><p style=\"text-align: start;\">Experience the power of modern content editing with advanced formatting, media embedding, and many other features. You can explore this demo for yourself.</p><h5>Explore the Possibilities! 🚀</h5><ul><li><b>Highly customizable</b> -&nbsp;You can configure the toolbar, enable/disable features, and fine-tune the editing experience to match your needs.</li><li><b>Seamless content pasting</b> -&nbsp;Copy and paste from Microsoft Word, Outlook, or other editors or sources while preserving formatting, styles, and structure.</li><li><b>Import Word documents</b> -&nbsp;Convert <b>DOCX</b><b> files</b> into editable HTML content inside the editor using the Import from Word feature.</li><li><b>One-click Export</b> -&nbsp;Save your document as <b>PDF</b> 📄 or <b>Word (DOCX)</b> 📝 with just a single click.</li><li><b>@Mentions</b> -&nbsp;Type&nbsp;<span class=\"e-mention-chip\"><a href=\"mailto:albert@gmail.com\" title=\"albert@gmail.com\">@Albert</a></span> to see available suggestions and tag users in your content.</li><li><b>Image Management</b> -&nbsp;Use the File Manager to browse, upload, and manage images within the editor.</li></ul><p><br/></p><h5>Powerful Features!</h5><p>A quick overview of the essential features of the Rich Text Editor.<br/></p><table class=\"e-rte-table\" style=\"width: 61.0405%; min-width: 0px; height: 82px;\"><thead style=\"height: 31.7073%;\"><tr style=\"height: 31.7073%;\"><th class=\"\" style=\"width: 29.9807%;\">Feature<br/></th><th class=\"\" style=\"width: 70.0193%;\">Description<br/></th></tr></thead><tbody><tr style=\"height: 34.1463%;\"><td class=\"\" style=\"width: 29.981%;\">Text Formatting<br/></td><td style=\"width: 70.0193%;\" class=\"\">Bold, Italic, Underline, Strikethrough, and more.<br/></td></tr><tr style=\"height: 34.1463%;\"><td style=\"width: 29.9807%;\" class=\"\">Lists &amp; Indentation<br/></td><td style=\"width: 70.019%;\" class=\"\">Ordered, unordered, nested lists.<br/></td></tr><tr><td style=\"width: 29.9807%;\">Tables<br/></td><td style=\"width: 70.019%;\" class=\"\">Insert and edit tables with styling.<br/></td></tr><tr><td style=\"width: 29.9807%;\">Media Embedding<br/></td><td style=\"width: 70.019%;\" class=\"\">Images, videos, and iframes.<br/></td></tr><tr><td style=\"width: 29.9807%;\">Mentions<br/></td><td style=\"width: 70.019%;\" class=\"\">Tag users and add comments<br/></td></tr></tbody></table><p><br/></p><h5>Effortless Image Handling!</h5><p>Insert, resize, align, and manage images seamlessly within the editor.<br/></p><p style=\"text-align: center;\"><img alt=\"Sky with sun\" src=\"https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png\" width=\"400\" height=\"200\" style=\"\" class=\"e-rte-image e-imgcenter\" /></p><p><br/></p><p style=\"text-align: center;\"><b>\"Great writing begins with a great editor.\"</b><b> ✍️</b> <br/></p>`;\n}"
    },
    {
      "target": "src/components/rich-text-editor-auto-save/auto-save.css",
      "content": ".current-status {\n    float: right;\n    padding: 11px;\n    margin-right: 22px;\n    font-size: 12px;\n    display: inline-block;\n}\n\n.e-icons.e-icon-refresh::before {\n    content: \"\\e606\";\n}\n\n.btn-text {\n    display: inline;\n    padding: 2px 35px 2px 64px;\n}\n\n.e-icons.e-icon-tick::before {\n    content: \"\\e614\";\n}\n\n.status-text {\n    padding: 4px;\n}\n\n.e-icon-refresh {\n    width: 10px;\n    display: inline-block;\n    animation: spin 2s linear infinite;\n}\n\n@keyframes spin {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n.bootstrap4 .e-icons.e-icon-refresh::before {\n    content: \"\\e710\";\n}\n\n.bootstrap4 .e-icons.e-icon-tick::before {\n    content: \"\\e718\";\n}\n\n.tailwind .e-icons.e-icon-refresh::before,\n.tailwind-dark .e-icons.e-icon-refresh::before,\n.tailwind3 .e-icons.e-icon-refresh::before,\n.tailwind3-dark .e-icons.e-icon-refresh::before {\n    content: \"\\e711\";\n}\n\n.tailwind .e-icons.e-icon-tick::before,\n.tailwind-dark .e-icons.e-icon-tick::before,\n.tailwind3 .e-icons.e-icon-tick::before,\n.tailwind3-dark .e-icons.e-icon-tick::before {\n    content: \"\\e75d\";\n}\n\n.bootstrap5 .e-icons.e-icon-refresh::before,\n.bootstrap5\\.3 .e-icons.e-icon-refresh::before,\n.bootstrap5\\.3-dark .e-icons.e-icon-refresh::before,\n.bootstrap5-dark .e-icons.e-icon-refresh::before,\n.fluent .e-icons.e-icon-refresh::before,\n.fluent-dark .e-icons.e-icon-refresh::before,\n.fluent2 .e-icons.e-icon-refresh::before,\n.fluent2-dark .e-icons.e-icon-refresh::before,\n.material3 .e-icons.e-icon-refresh::before,\n.material3-dark .e-icons.e-icon-refresh::before {\n    content: \"\\e706\";\n}\n\n.bootstrap5 .e-icons.e-icon-tick::before,\n.bootstrap5\\.3 .e-icons.e-icon-tick::before,\n.bootstrap5\\.3-dark .e-icons.e-icon-tick::before,\n.bootstrap5-dark .e-icons.e-icon-tick::before,\n.fluent .e-icons.e-icon-tick::before,\n.fluent-dark .e-icons.e-icon-tick::before,\n.fluent2 .e-icons.e-icon-tick::before,\n.fluent2-dark .e-icons.e-icon-tick::before,\n.material3 .e-icons.e-icon-tick::before,\n.material3-dark .e-icons.e-icon-tick::before {\n    content: \"\\e774\";\n}\n\n.status-text {\n    font-size: 14px;\n    display: inline-block;\n}"
    },
    {
      "target": "src/components/rich-text-editor-auto-save/auto-save.html",
      "content": "<div class=\"col-lg-8 control-section sb-property-border\">\n    <div class=\"control-wrapper\">\n        <div class=\"sample-container\">\n            <div class=\"default-section\">\n                <ejs-richtexteditor id='autosaveRTE' #autosaveRTE [toolbarSettings]='tools' [saveInterval]=\"5000\" placeholder='Start to type a content to save' [enablePersistence]=\"true\" (change)='updateStatus()' [value]=editorValue>\n                </ejs-richtexteditor>\n                <div id='statusEle' class='current-status'>\n                    <div id='saving' style=\"display: none\">\n                        <div class=\"e-icons e-icon-refresh\"> </div>\n                        <p class='status-text'> Saving changes</p>\n                    </div>\n                    <div id='saved' style=\"display: none\">\n                        <span class=\"e-icons e-icon-tick\"> </span>\n                        <p class='status-text'>Changes saved</p>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"col-lg-4 property-section\">\n    <div class=\"property-panel-section\">\n        <div class=\"property-panel-header\">Properties</div>\n        <div class=\"property-panel-content\">\n            <label for=\"checked\" style=\"padding: 10px 70px 10px 0\">Auto Save </label>\n            <ejs-switch id=\"checked\" #checked (change)='onChange($event)' [checked]=\"true\" ></ejs-switch>\n        </div>\n    </div>\n</div>\n\n<link href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">"
    }
  ]
}