feat: add demos for svelte

Author: yangfuhai

demos/svelte-ts/README.md

@@ -1,38 +1 @@
-# create-svelte
-
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+# AiEditor integrates with Svelte

docs/.vitepress/config.ts

@@ -55,6 +55,7 @@ export default defineConfig({
                             {text: '与 React 整合', link: '/zh/aieditor-with-react'},
                             {text: '与 Vue3 整合', link: '/zh/aieditor-with-vue3'},
                             {text: '与 Vue2 整合', link: '/zh/aieditor-with-vue2'},
+                            {text: '与 Svelte 整合', link: '/zh/aieditor-with-svelte'},
                             {text: '与 Layui 整合', link: '/zh/aieditor-with-layui'},
                         ]
                     },
@@ -137,6 +138,7 @@ export default defineConfig({
                     {text: 'Integrate with React', link: '/aieditor-with-react'},
                     {text: 'Integrate with Vue3', link: '/aieditor-with-vue3'},
                     {text: 'Integrate with Vue2', link: '/aieditor-with-vue2'},
+                    {text: 'Integrate with Svelte', link: '/aieditor-with-svelte'},
                 ]
             },
             {

docs/aieditor-with-svelte.md

@@ -0,0 +1,45 @@
+# AiEditor integrates with Svelte
+
+
+In Svelte, the sample code for using AIEditor is as follows:
+
+
+```html
+<script lang="ts">
+    import {onDestroy, onMount} from 'svelte';
+    import "aieditor/dist/style.css"
+    import type {AiEditor} from "aieditor";
+
+    let aieditor: AiEditor;
+    onMount(async () => {
+        import('aieditor').then(({AiEditor}) => {
+            aieditor = new AiEditor({
+                element: "#editor",
+                placeholder: "Click to Input Content...",
+                content: 'AiEditor is an Open Source Rich Text Editor Designed for AI. ',
+            })
+        })
+    });
+
+    onDestroy(() => {
+        aieditor && aieditor.destroy();
+    });
+</script>
+
+<svelte:head>
+    <title>AIEditor Demo for Svelte</title>
+</svelte:head>
+
+<div>
+    <h1>AIEditor Demo for Svelte</h1>
+    <div id="editor"></div>
+</div>
+
+<style>
+    #editor {
+        height: 600px;
+    }
+</style>
+```
+
+The code is at： https://github.com/aieditor-team/AiEditor/tree/main/demos/svelte-ts

docs/zh/aieditor-with-svelte.md

@@ -0,0 +1,44 @@
+# AiEditor 与 Svelte 整合
+
+
+在 Svelte 中，使用 AIEditor 的示例代码如下：
+
+```html
+<script lang="ts">
+    import {onDestroy, onMount} from 'svelte';
+    import "aieditor/dist/style.css"
+    import type {AiEditor} from "aieditor";
+
+    let aieditor: AiEditor;
+    onMount(async () => {
+        import('aieditor').then(({AiEditor}) => {
+            aieditor = new AiEditor({
+                element: "#editor",
+                placeholder: "Click to Input Content...",
+                content: 'AiEditor is an Open Source Rich Text Editor Designed for AI. ',
+            })
+        })
+    });
+
+    onDestroy(() => {
+        aieditor && aieditor.destroy();
+    });
+</script>
+
+<svelte:head>
+    <title>AIEditor Demo for Svelte</title>
+</svelte:head>
+
+<div>
+    <h1>AIEditor Demo for Svelte</h1>
+    <div id="editor"></div>
+</div>
+
+<style>
+    #editor {
+        height: 600px;
+    }
+</style>
+```
+
+完整代码在： https://github.com/aieditor-team/AiEditor/tree/main/demos/svelte-ts