使用软件包管理器

最后更新：2026-11-04 10:10:15

该官方 TinyMCE Svelte 组件将 TinyMCE 集成到Svelte 应用程序中。创建一个包含 TinyMCE 编辑器的基本 Svelte 应用程序。

有关 TinyMCE 集成的示例，请访问tinymce-svelte storybook。

先决条件

步骤

使用Vite包创建一个名为 tinymce-svelte-demo 的新 Svelte 项目，例如：
```
npm create vite@6 tinymce-svelte-demo -- --template svelte
```
进入项目目录。
```
cd tinymce-svelte-demo
```
安装项目依赖项。
```
npm install
```

安装 tinymce 和 tinymce-svelte 包：

npm install tinymce@^8 @tinymce/tinymce-svelte

（可选）对于高级插件，安装 tinymce-premium 包：
```
npm install tinymce-premium@^8.3
```
更多信息，请参阅：安装高级插件。
安装 vite-plugin-static-copy 开发依赖项：
```
npm install -D vite-plugin-static-copy
```

配置 vite.config.js 以将 TinyMCE 复制到 public/ 目录：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { viteStaticCopy } from 'vite-plugin-static-copy'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    viteStaticCopy({
      targets: [
        { src: 'node_modules/tinymce/*', dest: 'tinymce' }
      ]
    }),
    svelte()
  ],
})

打开 src/App.svelte 并用以下内容替换：

<script>
import Editor from '@tinymce/tinymce-svelte';
let conf = {
  height: 500,
  menubar: false,
  plugins: [
    'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
    'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
    'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount'
  ],
  toolbar: 'undo redo | blocks | ' +
    'bold italic forecolor | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent | ' +
    'removeformat | help',
}
</script>
<main>
  <h1>Hello Tiny</h1>
  <Editor
    licenseKey='gpl'
    scriptSrc='tinymce/tinymce.min.js'
    value='<p>This is the initial content of the editor.</p>'
    {conf}
  />
</main>

运行应用程序

使用 Node.js 开发服务器测试应用程序。

启动开发服务器：
```
npm run dev
```
要停止开发服务器，请在终端或命令提示符中使用 Ctrl+C。

后续步骤

有关其他信息，请参见以下内容：