Bundle size: load only the plugins you use

Every example in this documentation, and every demo in the download, loads all_plugins.min.js— all of the plugins, whether the page uses them or not. That is convenient for a first run and wasteful in production. Loading only the plugin files you actually use takes the editor from 529 KB to 214 KB gzip, and needs no build step, no bundler and no change to your application code — only different <script> tags.

Measured presets

Figures are gzip transfer size for rte.js plus the default theme CSS plus the plugin files listed, measured on the 2.6.7 build. Each preset was then loaded in a browser: it boots, the surface is editable, and the features its plugins promise are present and working. The last column is how many of the 58 default toolbar buttons still operate.

What you are loading today

<!-- 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>

A smaller editor: the blog preset

Replace the single bundle tag with one tag per plugin. Plugins may load in any order among themselves; keep rte.js last, and rte-config.js before it if you use one.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.min.css">
<script src="/richtexteditor/rte-config.js"></script>

<!-- 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>

The other presets are the same shape with a different plugin list:

Core only: no plugin files at all

The core is not a skeleton. Bold, italic and underline, font and size, colours, alignment, lists, indent, links, images, tables, find & replace, undo and redo, the HTML source view and paste cleanup are all in rte.js: 52 of the 58 default toolbar buttons work with no plugin loaded.

<!-- 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>

Hide the buttons you dropped

// 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);

The full list of tool names is in the toolbar & menu items reference.

What this does not fix

• The core is the floor. rte.js is 191 KB gzip on its own and cannot be subset further. No arrangement of script tags gets below the core row.
• Individual plugin files are not minified — only the combined all_plugins.min.js is. The figures above are therefore measured on unminified plugin sources, so running them through your own minifier makes the saving larger than the table claims, never smaller.
• Comments need aitoolkit.js. In the review and collab presets it is not optional: comment persistence lives there, and without it editor.comments still exists but every add() returns null instead of failing loudly. It is most of the weight of both presets. If you need comments, load it.
• Nothing here is lazy-loaded. These are load-time choices: a plugin that is not in your tags is absent for the life of the page.

Check your own page

Open the browser network panel, filter to richtexteditor, and read the transfer column rather than the resource-size column, which reports uncompressed bytes. If all_plugins.min.js is in that list, the table above is the saving still available to you.