该官方 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和tinymce-svelte包：

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

  5. （可选）对于高级插件，安装tinymce-premium包：

    npm install tinymce-premium@^8.3

    更多信息，请参阅：安装高级插件。

    有关在打包时配置高级插件的信息，请参阅：使用高级插件。

  6. 使用文本编辑器创建src/editor.js并设置内容如下：

    // Add the @tinymce/tinymce-svelte wrapper to the bundle
import Editor from '@tinymce/tinymce-svelte';

// TinyMCE so the global var exists
import 'tinymce/tinymce';
// DOM model
import 'tinymce/models/dom/model';
// Theme
import 'tinymce/themes/silver';
// Toolbar icons
import 'tinymce/icons/default';
// Editor styles
import 'tinymce/skins/ui/oxide/skin.min.css';

// Import plugins
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/code';
import 'tinymce/plugins/help';
import 'tinymce/plugins/wordcount';

// Import premium plugins from NPM
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
import 'tinymce-premium/plugins/licensekeymanager';

// Content styles, including inline UI like fake cursors
import 'tinymce/skins/content/default/content.js';
import 'tinymce/skins/ui/oxide/content.js';

// Export Editor component for use in Svelte components
export default Editor;

  7. 使用文本编辑器打开src/App.svelte并将内容替换为：

    <script>
import Editor from './editor.js';
let content = '<p>This is the initial content of the editor.</p>';
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>TinyMCE Svelte Demo</h1>
  <Editor
    licenseKey='gpl'
    value={content}
    conf={conf}
  />
</main>

  8. 运行开发服务器：

    npm run dev

    开发服务器使用 Vite 即时打包您的应用。Vite 处理所有import语句并将 TinyMCE 模块包含在开发包中。

  9. 构建生产版本的应用程序：

    npm run build

    此命令将在dist目录中创建一个优化的生产包。

  10. 预览生产构建：

    npm run preview

  11. 更新编辑器组件中的licenseKey属性并包含您的License Key。

后续步骤