TinyMCE Quickbars: configure selection, insert, and image controls separately

TinyMCE Quickbars provides separate toolbars for selected text, insertion, and images. Configure or disable each one with its own option. Removing the main toolbar does not define what these contextual controls contain, and showing a Quick Image button does not configure image uploads. Quick Toolbars documentation

A fictional short incident-report editor needs Bold and a link action when the author selects a finding. It should not offer table or local-image insertion whenever the author starts a new paragraph. Keeping the useful selection control while disabling the insertion surface is a smaller change than replacing all editor controls.

Keep the selection toolbar and remove unwanted surfaces

For an application where TinyMCE is already installed and loaded:

tinymce.init({
  selector: '#incident-report',
  plugins: 'quickbars link',
  toolbar: 'undo redo | bold italic | link',
  quickbars_selection_toolbar: 'bold italic | quicklink',
  quickbars_insert_toolbar: false,
  quickbars_image_toolbar: false
});

Merge this with the application's existing loading, licensing, plugins, and configuration. The permanent toolbar provides another route to the enabled editing actions; the nearby selection toolbar offers a shorter route while working in the text. Keep whichever accessible routes your application requires.

quickbars_selection_toolbar accepts a space-separated list of toolbar identifiers. Use the Boolean false to disable a surface. The string 'false' is text, not the documented disabling value.

For the incident report, selecting “water entered through the service hatch” should expose the selection actions. Clicking an ordinary paragraph with only a collapsed cursor is a different context. Check the surface you expect before changing positioning CSS to fix an apparently missing toolbar.

Understand what the insertion buttons actually do

Quickbars documents three plugin-specific controls:

Control Documented purpose
quicklink Insert or edit a link through a compact form
quickimage Insert an image from the local computer
quicktable Insert a 2 by 2 table at 100% width

If a longer report genuinely needs table insertion, enable only that insertion action:

const reportQuickbarOptions = {
  quickbars_insert_toolbar: 'quicktable'
};

Merge that object into the real initialization options; it does not modify an already running editor by itself. Keep the table-editing support the application needs after insertion. A quick table starts with a fixed structure; it does not infer headings or convert a selected data series into the right table.

Treat image insertion and upload as separate work

Enabling quickimage lets the author select a local image. TinyMCE's documentation explicitly requires image-upload configuration for automatic uploads on insertion. Decide how the application's normal save route handles those images before making the button available.

A report can appear correct in the authoring session yet reference image data that the final storage or recipient path does not retain. Test selecting a file, completing the expected upload, saving, and reopening the report through its real delivery route. Do not use a visible thumbnail as proof that a recipient can retrieve the file.

If images are outside the product's scope, keep the insertion option disabled as above. quickbars_image_toolbar: false separately removes the contextual controls that would otherwise appear for an image; it does not remove image nodes already present in the document.

Diagnose one context at a time

Inspect plugin loading and the relevant option first. If a configured identifier is missing, check whether its providing plugin or custom registration exists. A custom action needs implementation before it can appear by name; the custom toolbar guide covers that registration and state handling.

On a narrow report, select a phrase near either edge and inspect whether the control is reachable without covering the sentence being edited. Then collapse the selection, create an empty paragraph, and select an existing image if the application supports one. Confirm that each context shows only its intended actions.

Finish by adding a link to the service-hatch finding, saving, and opening the report as a reader. The link and emphasized wording should remain; floating authoring controls should not become part of the saved report.

Keep reading