从 Froala 迁移

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

本页面涵盖了从 Froala Editor 3 迁移到 TinyMCE 8 的基本步骤。我们已包含相关程序和文档链接，以协助您完成向 TinyMCE 的迁移。

本节涵盖的内容：

将基础 Froala 配置迁移到 TinyMCE
更新插件列表
迁移自定义工具栏布局
配置内联模式
迁移自定义按钮
迁移自定义下拉工具栏按钮

将基础 Froala 配置迁移到 TinyMCE

要从基础的 Froala 3 配置迁移到基础的 TinyMCE 8 配置，您需要：

用 TinyMCE 源脚本替换 Froala 链接和源脚本。
用 tinymce.init 函数替换 Froala 编辑器变量赋值。

用 TinyMCE 源脚本替换 Froala 链接和源脚本

移除位于目标 HTML 页面 <head> 中的 Froala 链接和源脚本。例如：

<link href='/path/to/froala-editor/base/directory/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='/path/to/froala-editor/base/directory/js/froala_editor.pkgd.min.js'></script>
<link href='/path/to/froala-editor/base/directory/css/froala_style.min.css' rel='stylesheet' type='text/css' />

在页面的 <head> 中插入 TinyMCE 源脚本。
- 对于 Tiny Cloud 部署：
```
<script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js' referrerpolicy='origin' crossorigin='anonymous'></script>
```
  用您的 Tiny Cloud API key 替换 no-api-key。
- 对于自托管的 TinyMCE 部署：
```
<script src='/path/to/tinymce/base/directory/tinymce.min.js'></script>
```
  用包含 tinymce.min.js 的 tinymce/ 目录的相对路径替换 /path/to/tinymce/base/directory。

有关 TinyMCE 部署类型的信息，请参阅：安装 TinyMCE。

用 tinymce.init 函数替换 Froala 编辑器变量赋值

要在页面正文中为 <textarea> 元素插入编辑器，例如：

<form method='post'>
  <textarea id='myeditor'>Enter your comment here!</textarea>
</form>

移除 Froala 编辑器变量赋值脚本。

<script>
  const editor = new FroalaEditor('textarea#myeditor')
</script>

添加 tinymce.init 函数。

<script>
  tinymce.init({ selector: '#myeditor' });
</script>

有关配置 selector 设置的信息，请参阅：Basic Setup。

示例：基础配置

以下示例展示了一个初始的 Froala 配置和迁移后的 TinyMCE 配置。

Froala 3 - 基础配置

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <link href='/path/to/froala-editor/base/directory/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
    <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/froala_editor.pkgd.min.js'></script>
    <link href='/path/to/froala-editor/base/directory/css/froala_style.min.css' rel='stylesheet' type='text/css' />
  </head>
  <body>
    <form method='post'>
      <textarea id='basic_froala'>Hello, World! I'm a froala editor!</textarea>
    </form>
    <script>
      const editor = new FroalaEditor('textarea#basic_froala')
    </script>
  </body>
</html>

TinyMCE 8 - 基础配置

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <script src='https://cdn.tiny.cloud/1/my-api-key/tinymce/5/tinymce.min.js' referrerpolicy='origin' crossorigin='anonymous'></script>
  </head>
  <body>
    <form method='post'>
      <textarea id='tiny_basic'>Hello, World! I'm a tiny editor!</textarea>
    </form>
    <script>
      tinymce.init({ selector: 'textarea#tiny_basic' });
    </script>
  </body>
</html>

附加信息

有关以下内容的信息：

开始使用 TinyMCE，请参阅：TinyMCE Quick Start。
安装 TinyMCE，请参阅：安装 TinyMCE。

更新插件列表

某些 Froala 核心功能是通过 TinyMCE 的插件实现的；而某些 Froala 插件提供的功能则是 TinyMCE 的核心功能。

例如：

Froala 将有序列表作为核心功能的一部分，但 lists 插件为 TinyMCE 提供有序列表功能。
在 Froala 中添加字体大小选项需要插件，但 fontsize 是 TinyMCE 的核心功能。

要为TinyMCE编辑器添加插件，请添加plugins选项，并提供一个以空格分隔的要包含的插件列表，如下所示。你应该从页面中删除任何Froala源脚本和Froala链接。

示例：启用插件

以下示例展示了如何在Froala和TinyMCE编辑器中包含或启用插件。

Froala 3 - 启用插件

<head>
  <meta charset='utf-8'>
  <link href='/path/to/froala-editor/base/directory/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/froala_editor.pkgd.min.js'></script>
  <link href='/path/to/froala-editor/base/directory/css/froala_style.min.css' rel='stylesheet' type='text/css' />
  <!-- 示例：Froala插件脚本 -->
  <!-- 颜色插件 -->
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/plugins/colors.min.js'></script>
  <link href='/path/to/froala-editor/base/directory/css/plugins/colors.min.css' rel='stylesheet' type='text/css' />
  <!-- 表情插件 -->
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/plugins/emoticons.min.js'></script>
  <link href='../css/plugins/emoticons.min.css' rel='stylesheet' type='text/css' />
  <!-- 字体系列插件 -->
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/plugins/font_family.min.js'></script>
  <!-- 字体大小插件 -->
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/plugins/font_size.min.js'></script>
  <!-- 帮助插件 -->
  <script type='text/javascript' src='/path/to/froala-editor/base/directory/js/plugins/help.min.js'></script>
  <link href='/path/to/froala-editor/base/directory/css/plugins/help.min.css ' rel='stylesheet' type='text/css' />
</head>

TinyMCE 8 - 启用插件

<script>
  tinymce.init({
    selector: '#tiny_editor',
    plugins: 'emoticons wordcount help code lists'
  });
</script>

关于插件的附加信息

有关为TinyMCE启用插件的信息，请参阅：集成和设置选项：插件。
有关TinyMCE插件列表，请参阅：向TinyMCE添加插件。

迁移自定义工具栏布局

要将自定义工具栏布局从Froala迁移到TinyMCE：

将toolbarButtons选项更改为toolbar。
更新工具栏项目列表。
根据需要更新plugin选项。

将`toolbarButtons`选项更改为`toolbar`

将Froala选项toolbarButtons重命名为toolbar。

更新工具栏项目列表

Froala和TinyMCE使用不同的格式来列出工具栏项目。

Froala接受作为字符串二维数组的工具栏按钮列表，每个数组定义一组工具栏项目。例如：

toolbarButtons: [['undo', 'redo'], ['paragraphFormat'], ['bold', 'italic'],
['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'],
['formatOL', 'formatUL'], ['indent', 'outdent']]

TinyMCE接受一个以空格分隔的字符串，并使用水平条(|)来分组项目。例如：

toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | numlist bullist | outdent indent'

将工具栏项目的名称替换为TinyMCE的名称。例如：

工具栏按钮	Froala	TinyMCE
格式/样式选择器	`paragraphFormat`	`blocks`
有序列表	`formatOl`	`numlist`
无序列表	`formatUL`	`bullist`

根据需要更新`plugin`选项

可能需要更新插件列表，如在更新插件列表中所示。例如，TinyMCE工具栏项目；numlist和bullist需要lists插件。

有关带有所需插件的工具栏项目列表，请参阅：TinyMCE可用的工具栏按钮。

示例：自定义工具栏布局

以下示例展示了Froala中的自定义工具栏布局以及迁移到TinyMCE后的相同布局。

Froala 3 - 创建自定义工具栏布局

<h2>Froala自定义工具栏</h2>
  <form method='post'>
    <textarea id=froala_custom_toolbar>Hello, World! I'm a froala editor!</textarea>
  </form>
<script>
  const editor = new FroalaEditor('textarea#froala_custom_toolbar', {
    paragraphFormatSelection: true ,
    toolbarButtons: [['undo', 'redo'], ['paragraphFormat'], ['bold', 'italic'],
    ['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'],
    ['formatOL', 'formatUL'], ['indent', 'outdent']]
  })
</script>

TinyMCE 8 - 创建自定义工具栏布局

<h2>TinyMCE 自定义工具栏</h2>
  <form method='post'>
    <textarea id='tiny_custom_toolbar'>Hello, World! I'm a tiny editor!</textarea>
  </form>
<script>
  tinymce.init({
    selector: '#tiny_custom_toolbar',
    plugins: 'lists',
    toolbar: 'undo redo | blocks | bold italic ' +
      '| alignleft aligncenter alignright alignjustify ' +
      '| numlist bullist | outdent indent',
  });
</script>

关于自定义工具栏的更多信息

有关自定义 TinyMCE 工具栏的信息，请参见：用户界面选项：工具栏。
有关工具栏项目的列表，请参见：TinyMCE 可用的工具栏按钮。

配置内联模式

从 Froala 迁移到 TinyMCE 时，toolbarInline 选项将更改为 inline。您应该考虑的一些额外设置包括：

示例：启用内联模式

以下示例展示了 Froala 和 TinyMCE 的内联模式配置。

Froala 3 - 配置内联模式

<h3>Froala 内联模式</h3>
  <form method='post'>
    <div id=froala_custom_inline_toolbar>Hello, World! I'm a froala editor!</div>
  </form>
<script>
  const editor = new FroalaEditor('div#froala_custom_inline_toolbar', {
    toolbarInline: true,
    charCounterCount: false
  })
</script>

TinyMCE 8 - 配置内联模式

<h3>TinyMCE 内联模式</h3>
  <form method='post'>
    <div id='tiny_custom_inline_toolbar'>Hello, World! I'm a tiny editor!</div>
  </form>
<script>
  tinymce.init({
    selector: '#tiny_custom_inline_toolbar',
    inline: true
  });
</script>

内联模式的更多信息

有关以下内容的信息：

内联编辑模式，请参见：设置内联编辑模式。
配置快速工具栏，请参见：快速工具栏插件。
配置上下文工具栏，请参见：上下文工具栏。
配置上下文菜单，请参见：上下文菜单。
禁用 TinyMCE 菜单栏，请参见：用户界面选项：菜单栏。
TinyMCE 无干扰编辑模式，请参见：TinyMCE 无干扰编辑模式。

迁移自定义按钮

TinyMCE 的 addButton 选项用于代替 Froala 的 RegisterCommand 选项。

有关 addButton 选项的入门信息，请参见：工具栏按钮。

示例：自定义工具栏按钮

以下示例展示了一个具有基本配置和两个自定义工具栏按钮的 Froala 编辑器和一个 TinyMCE 编辑器。

Froala 3 - 创建自定义工具栏按钮

<h2>Froala 自定义按钮</h2>
  <form method='post'>
    <textarea id=froala_custom_button>Hello, World! I'm a froala editor!</textarea>
  </form>
<script>
  FroalaEditor.DefineIcon('mybutton1', {NAME: 'star', SVG_KEY: 'star'});
  FroalaEditor.RegisterCommand('mybutton1', {
    title: 'My Button',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
      this.html.insert('&nbsp;<strong>It\'s my button!</strong>&nbsp;');
    }
  });

  FroalaEditor.RegisterCommand('My&#160;Button', {
    title: 'My Button',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
      this.html.insert('&nbsp;<strong>It\'s my other button!</strong>&nbsp;');
    }
  });

  const editor = new FroalaEditor('textarea#froala_custom_button',{
    toolbarButtons: [['mybutton1'],['My&#160;Button']]
  })
</script>

TinyMCE 8 - 创建自定义工具栏按钮

<h2>TinyMCE 自定义按钮</h2>
  <form method='post'>
    <textarea id='tiny_custom_button'>Hello, World! I'm a tiny editor!</textarea>
  </form>
<script>
  tinymce.init({
    selector: '#tiny_custom_button',
    toolbar: 'myButton1 | myButton2',
    setup: (editor) => {
      editor.ui.registry.addButton('myButton1', {
        icon: 'user',
        onAction: (_) => {
          editor.insertContent('&nbsp;<strong>It\'s my icon button!</strong>&nbsp;');
        }
      });

      editor.ui.registry.addButton('myButton2', {
        text: 'My Button',
        onAction: (_) => {
          editor.insertContent('&nbsp;<strong>It\'s my text button!</strong>&nbsp;');
        }
      });
    }
  });
</script>

关于自定义工具栏按钮的补充信息

有关创建自定义工具栏按钮的概览，请参阅：工具栏按钮。
有关可用的工具栏按钮类型以及自定义工具栏按钮示例的信息，请参阅：工具栏按钮类型。

迁移自定义下拉式工具栏按钮

TinyMCE 的 addMenuButton 选项用于取代 Froala 的 RegisterCommand type: dropdown 选项。

有关 addMenuButton 选项入门的信息，请参阅：工具栏按钮和工具栏按钮类型：菜单按钮。

示例：自定义下拉式按钮

以下示例展示了一个带有基本配置和自定义下拉式工具栏按钮的 Froala 编辑器和 TinyMCE 编辑器。

Froala 3 - 创建自定义下拉式按钮

<h2>Froala 自定义下拉式按钮</h2>
  <form method='post'>
    <textarea id='froala_custom_button_menu'>Hello, World! I'm a froala editor!</textarea>
  </form>
<script>
  const option_values = {
    'Opt1': '<strong>You clicked menu item 1!</strong>',
    'Opt2': '<em>You clicked menu item 2!</em>'
  };
  FroalaEditor.DefineIcon('mybuttonmenu', {NAME: 'plus', SVG_KEY: 'add'});
  FroalaEditor.RegisterCommand('mybuttonmenu', {
    title: 'My Other Button Menu',
    type: 'dropdown',
    focus: false,
    undo: false,
    refreshAfterCallback: true,
    options: {
      'Opt1': 'Menu item 1',
      'Opt2': 'Menu item 2'
    },
    callback: function (cmd, val) {
      this.html.insert(option_values[val]);
    }
  });
  const editor = new FroalaEditor('textarea#froala_custom_button_menu', {
    toolbarButtons: [['mybuttonmenu']]
  })
</script>

TinyMCE 8 - 创建自定义下拉式按钮

<h2>TinyMCE 自定义下拉式按钮</h2>
  <form method='post'>
    <textarea id='tiny_custom_button_menu'>Hello, World! I'm a tiny editor!</textarea>
  </form>
<script>
  tinymce.init({
    selector: '#tiny_custom_button_menu',
    toolbar: 'my_button',
    setup: (editor) => {
      editor.ui.registry.addMenuButton('my_button', {
        text: 'My button menu',
        icon: 'gamma',
        fetch: (callback) => {
          const items = [
            {
              type: 'menuitem',
              text: 'Menu item 1',
              onAction: () => {
                editor.insertContent('&nbsp;<strong>You clicked menu item 1!</strong>');
              }
            },
            {
              type: 'menuitem',
              text: 'Menu item 2',
              icon: 'user',
              onAction: () => {
                editor.insertContent('&nbsp;<em>You clicked menu item 2!</em>');
              }
            }
          ];
          callback(items);
        }
      });
    }
  });
</script>

关于下拉式按钮的补充信息

有关创建下拉式按钮的信息，请参阅：工具栏按钮类型：菜单按钮。