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

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

前置条件

需要 Node.js（和 npm）。

步骤

  1. 使用 Vite 包创建一个名为 tinymce-svelte-demo 的新 Svelte 项目，例如：

    npm create vite@6 tinymce-svelte-demo -- --template svelte

  2. 切换到项目目录。

    cd tinymce-svelte-demo

  3. 安装项目依赖项。

    npm install

  4. 安装 tinymce-svelte 编辑器组件：

    npm install @tinymce/tinymce-svelte

  5. 打开 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
    license_key: 'gpl',
    scriptSrc='/path/or/url/to/tinymce.min.js'
    value='<p>This is the initial content of the editor.</p>'
    {conf}
  />
</main>

运行应用程序

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

  1. 要启动开发服务器：

    npm run dev

  2. 要停止开发服务器，请在终端或命令提示符中使用 Ctrl+C。

后续步骤