← 全部文档

包体积：只加载您用到的插件

本文档中的每个示例以及下载包中的每个演示，加载的都是 all_plugins.min.js——全部插件，无论页面是否用到。这在首次运行时很方便，但在生产环境中是一种浪费。只加载实际用到的插件文件，可以让编辑器从 529 KB 降到 214 KB（gzip），而且不需要构建步骤、不需要打包工具，也不需要修改应用代码——只需换一组 <script> 标签。

实测的预设组合

数字为 rte.js、默认主题 CSS 以及所列插件文件的 gzip 传输大小，基于 2.6.7 版本测得。随后在浏览器中逐一加载每个预设：它能启动、编辑区域可编辑，并且其插件所承诺的功能都存在且可用。最后一列是 58 个默认工具栏按钮中仍可使用的数量。

预设传输大小（gzip）相比 everything工具栏按钮包含的功能
core214 KB-60%52格式设置、列表、表格、链接、图片、查找和替换、撤销。完全不加载插件文件。
blog241 KB-54%52块类型、清单、代码块、Markdown 导出、本地草稿、目录。
documents297 KB-44%52.docx 和 PDF 导出、文档导入、脚注、分页、法律文书列表、交叉引用。
review417 KB-21%56批注、修订跟踪、修订历史、无障碍检查器。
collab437 KB-17%54实时协同编辑，以及协作者需要的审阅功能。
everything529 KB—58all_plugins.min.js：默认方案，也就是什么都不改时得到的结果。

您目前加载的内容

<!-- The default: every plugin, whether the page uses it or not. -->
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.min.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.min.js"></script>

更小的编辑器：blog 预设

把单个打包文件的标签替换为每个插件一个标签。插件之间可以按任意顺序加载；rte.js 要保持在最后。设置写在传给构造函数的配置对象中，而不是单独的文件里——rte.js 已经包含默认值，下载包中也没有需要单独加载的 rte-config.js。

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.min.css">

<!-- Only the plugins this editor uses. Order among plugins does not matter. -->
<script src="/richtexteditor/plugins/blocktypes.js"></script>
<script src="/richtexteditor/plugins/todolist.js"></script>
<script src="/richtexteditor/plugins/insertcode.js"></script>
<script src="/richtexteditor/plugins/markdownexport.js"></script>
<script src="/richtexteditor/plugins/localdraft.js"></script>
<script src="/richtexteditor/plugins/tableofcontents.js"></script>

<script src="/richtexteditor/rte.js"></script>

其他预设的写法相同，只是插件列表不同：

预设plugins/ 中的插件文件
blogblocktypes.js todolist.js insertcode.js markdownexport.js localdraft.js tableofcontents.js
documentsblocktypes.js todolist.js tableofcontents.js documentimport.js docxexport.js pdfexport.js wordexport.js footnotes.js pagination.js multilevellist.js crossreference.js
reviewaitoolkit.js comments.js trackedchanges.js revisionhistory.js accessibilitychecker.js
collabaitoolkit.js yjscollab.js crdt-engine.min.js comments.js trackedchanges.js

仅核心：完全不加载插件文件

核心并不是一个空架子。粗体、斜体和下划线、字体和字号、颜色、对齐、列表、缩进、链接、图片、表格、查找和替换、撤销和重做、HTML 源代码视图以及粘贴清理都在 rte.js 中：不加载任何插件时，58 个默认工具栏按钮中有 52 个可以使用。

<!-- No plugin files. 52 of the 58 default toolbar buttons still work. -->
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.min.css">
<script src="/richtexteditor/rte.js"></script>

<script>
  var editor = new RichTextEditor("#div_editor");
</script>

隐藏不再需要的按钮

// Dropping a plugin file does not remove its toolbar button - the button stays
// and does nothing when pressed. Name the tools you kept, and nothing else shows.
var config = {};
config.toolbar = "{bold,italic,underline}|{insertlink,insertimage}|{blocktypes}|{todolist,insertcode}";
var editor = new RichTextEditor("#div_editor", config);

完整的工具名称列表见工具栏与菜单项参考。

这不能解决什么

  • 核心是下限。rte.js 本身就有 191 KB（gzip），无法再进一步拆分。无论怎样组合 script 标签，都无法低于 core 这一行。
  • 单独的插件文件没有经过压缩——只有合并后的 all_plugins.min.js 经过了压缩。因此上面的数字是基于未压缩的插件源文件测得的，用您自己的压缩工具处理之后，节省的体积只会比表中更多，绝不会更少。
  • 批注需要 aitoolkit.js。在 review 和 collab 预设中它不是可选的：批注的持久化在它里面，没有它时 editor.comments 仍然存在，但每次 add() 都会返回 null，而不会明确报错。它占了这两个预设的大部分体积。如果需要批注，就要加载它。
  • 这里没有任何延迟加载。这些都是加载时的选择：不在 script 标签中的插件，在整个页面生命周期内都不存在。

检查您自己的页面

打开浏览器的网络面板，筛选 richtexteditor，查看传输大小列，而不是报告未压缩字节数的资源大小列。如果列表中有 all_plugins.min.js，上表就是您仍可节省的体积。