了解 TinyMCE 的编辑器加载

此信息仅与 Tiny Cloud 用户相关。自托管 TinyMCE 开源版本的用户不受编辑器加载限制，但必须遵守开源许可证。

编辑器加载是指应用程序中每次初始化 TinyMCE 时发生的事件。编辑器会触发 'init' 事件以指示加载成功。例如，如果 100 个用户各自加载 TinyMCE 10 次，结果将产生 1,000 次编辑器加载。

初始化编辑器的过程包括几个步骤。

  1. 集成者在网页上初始化一个或多个编辑器，通常通过 tinymce.init({ …​ }) 方法完成。

  2. init 方法的 selector 属性决定应将哪些元素替换为编辑器实例。例如：如果选择器是 textarea 且页面上有 5 个 textarea 元素，则会创建 5 个编辑器实例。

    每个编辑器实例都会执行相同的初始化序列，然后触发 init 事件。即使编辑器不可见，也会触发此事件。

  3. 'init' 事件是编辑器完成加载过程的最终指示器。此时，编辑器已成功初始化并准备好供用户交互。

如何计算编辑器加载次数？

每次新的 TinyMCE 编辑器实例完成初始化序列并触发 init 事件时，都会计算一次编辑器加载。

如果页面上有多个编辑器会怎样？

页面上的每个编辑器实例都计为一次编辑器加载。例如，如果页面上有十个编辑器，则一次页面刷新会产生十次编辑器加载。

如何跟踪编辑器加载？

要在外部分析或日志服务中记录编辑器加载，请使用 init_instance_callback 选项。该回调函数在每个编辑器实例触发 init 事件后立即运行一次，因此每次调用对应一次编辑器加载。

tinymce.init({
  selector: 'textarea', // change this value according to your HTML
  init_instance_callback: (editor) => {
    // Replace myService with the analytics or logging service used by the application.
    // 添加应用程序需要跟踪的其他编辑器属性。
    myService.log({
      event: 'editor-load',
      editorId: editor.id,
      page: window.location.pathname
    });
  }
});

回调函数接收 Editor 实例，因此发送到服务的对象可以包含编辑器的任何属性。示例使用了 editor.id，因为它标识了页面上哪个编辑器已加载。

editor.id 值是编辑器替换的元素的 id 属性。当该元素没有 id 时，如果页面上没有其他元素具有该 id，编辑器将使用其 name 属性，否则生成类似 mce_0 的标识符。生成的标识符可能在页面加载之间变化，因此请为每个目标元素分配唯一的 id 以跟踪特定编辑器的加载。

通过在 setup 选项中将监听器绑定到 init 事件，也可以达到相同效果，例如 editor.once('init', () => myService.log({ editorId: editor.id }))。当唯一需要记录加载时，init_instance_callback 选项更简单。

哪些情况可能导致编辑器加载次数过多？

最明显的情况是在单个页面上使用多个编辑器（见上文）。例如：

  • 在多个部分嵌入 TinyMCE 编辑器的电子邮件构建应用程序

  • 高流量网站上具有多个编辑器实例的公开页面

如何获得无限制的编辑器加载？

您可以通过以下三种方式之一获得无限制的编辑器加载：

  • 可以自托管 TinyMCE 的开源版本，且不受编辑器加载限制。

  • TinyMCE 的开源版本也可通过第三方托管的 CDN 获得，且不受编辑器加载限制。

  • 对于具有 Premium 功能的 Tiny MCE 企业版，联系我们的销售团队以获取自定义报价。

有关年度计划计费、超额定价和其他计费相关问题，请访问TinyMCE 按使用量计费的工作原理。