{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-auto-save",
  "framework": "vue",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "auto-save",
  "dependencies": [
    "@syncfusion/ej2-vue-buttons",
    "@syncfusion/ej2-vue-richtexteditor"
  ],
  "description": "Rich text editor persists the draft automatically while the user edits its 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": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/rich-text-editor-auto-save.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-auto-save/RichTextEditor.vue",
      "content": "<template>\n<div>\n<div class=\"col-lg-8 control-section\">\n    <div class=\"control-wrapper\">\n        <div class=\"sample-container\">\n            <div class=\"default-section\">\n        <ejs-richtexteditor ref=\"saveObj\" :toolbarSettings=\"toolbarSettings\" enablePersistence=true saveInterval=5000 placeholder=\"Start to type a content to save\" :change=\"updateStatus\">\n          <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> - 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> - 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> - 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> - Save your document as <b>PDF</b> 📄 or <b>Word (DOCX)</b> 📝 with just a single click.</li><li><b>@Mentions</b> - Type <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> - 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 & 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        </ejs-richtexteditor>  \n         <div id='statusEle' class='current-status'>\n                    <div id='saving' v-if=\"Saving\">\n                        <div class=\"e-icons e-icon-refresh\"> </div>\n                        <p class='status-text'> Saving changes</p>\n                    </div>\n                    <div id='saved' v-if=\"Saved\">\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 title=\"Properties\" id=\"property\">\n        <div class='toggle-btn'>\n            <label for=\"checked\" style=\"padding: 10px 70px 10px 0\"> Auto Save </label>\n            <ejs-switch id=\"checked\" :change=\"onChange\" :checked=\"true\"></ejs-switch>\n        </div>\n    </div>\n</div>\n\n\n</div>\n</template>\n<style scoped>\n.control_wrapper {\n    max-width: 500px;\n    margin: auto;\n    border: 1px solid #dddddd;\n    border-radius: 3px;\n}\n\n.control-section {\n    overflow: auto;\n    padding-bottom: 10px;\n    position: relative;\n}\n\n    .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-dark .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    .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-dark .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    .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 {        content: \"\\e774\";\n    }\n\n    .status-text {\n        font-size: 14px;\n        display: inline-block;\n    }\n</style>\n<script>\nimport { RichTextEditorComponent, Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from \"@syncfusion/ej2-vue-richtexteditor\";\nimport { SwitchComponent } from \"@syncfusion/ej2-vue-buttons\";\nexport default {\n  components: {\n    'ejs-richtexteditor': RichTextEditorComponent,\n    'ejs-switch': SwitchComponent\n  },\n  data: function () {\n    return {\n      toolbarSettings: {\n        items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'Blockquote',\n          'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo']\n      },\n      Saving: false,\n      Saved: false\n    };\n  },\n  methods: {\n    updateStatus: function () {\n      this.Saving = true;\n      this.Saved = false;\n      setTimeout(() => {\n        this.Saving = false;\n        this.Saved = true;\n      }, 500);\n    },\n    onChange: function (e) {\n      var proxy = this;\n      if (e.checked) {\n        proxy.$refs.saveObj.ej2Instances.saveInterval = 5000;\n      } else {\n        proxy.$refs.saveObj.ej2Instances.saveInterval = 0;\n        setTimeout(() => {\n          this.Saving = false;\n          this.Saved = false;\n        }, 500);\n      }\n    }\n  },\n  provide: {\n    richtexteditor: [Toolbar, Link, Image, Count, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]\n  }\n}\n</script>"
    },
    {
      "target": "src/components/rich-text-editor-auto-save/RichTextEditorView.vue",
      "content": "<template>\n  <RTE />\n</template>\n\n<script setup>\nimport RTE from '../../components/RichTextEditor.vue'\n</script>"
    }
  ]
}