TinyMCE lists: author numbered procedures without losing their structure

Enable TinyMCE's lists plugin for numbered and bulleted lists. Add advlist when authors need marker-style choices, and expose listprops when they need the numbered-list properties dialog. The dialog is active only when the selection or cursor is inside a numbered list. Lists plugin

An original equipment procedure has two steps before an inspection photograph and two after it. The author wants the second list to continue at step 3. A nested warning belongs beneath the second step; it should not become the next top-level instruction. Those are editing decisions about sequence and hierarchy, which need to survive saving.

Give authors the list controls they need

For an existing application with current TinyMCE loaded, adapt this configuration:

tinymce.init({
  selector: '#equipment-procedure',
  plugins: 'lists advlist',
  toolbar: 'undo redo | bullist numlist | outdent indent',
  menu: {
    tools: { title: 'Tools', items: 'listprops' }
  },
  advlist_number_styles: 'default,lower-alpha,lower-roman'
});

Merge this into the existing setup, including its license and loading configuration. Preserve any other plugins and menu items. Ensure the Tools menu is included in the application's menubar; hiding that menu would hide this route to List Properties.

The base lists plugin provides bullist and numlist. The List Styles plugin adds their dropdown choices. Changing to Roman numerals changes the marker presentation; it does not establish whether a step is a child of another step.

Check the sequence across a photograph

Use this small fictional fixture in a development record:

<ol>
  <li>Disconnect the bench supply.</li>
  <li>Inspect the cable jacket.</li>
</ol>
<p>Inspection photograph goes here.</p>
<ol start="3">
  <li>Fit the protective sleeve.</li>
  <li>Record the equipment identifier.</li>
</ol>

Place the cursor in the second numbered list and open Tools, then List Properties. Check the start value available in your installed version and set the intended continuation. TinyMCE also documents mceListProps for opening that dialog from an application action:

procedureEditor.execCommand('mceListProps');

This assumes procedureEditor refers to the initialized instance and the intended list selection has been retained. The action is selection-dependent; opening it while the cursor sits in the photograph paragraph does not identify a numbered list.

The HTML ordered-list guide explains the resulting start and li attributes. Here the authoring problem is exposing those choices and preserving them through the editor and save pipeline.

Keep a warning inside its parent step

Add “Stop if the inner insulation is exposed” as a nested item under the cable inspection. Use the editor's indent and outdent controls to establish the hierarchy. Read the saved HTML and confirm that the warning list is inside that step's li. A paragraph with extra left padding can look nested while carrying no parent-child list structure.

TinyMCE's lists_indent_on_tab option defaults to true. If the product needs Tab to follow a different keyboard route, configure the option deliberately and retain another usable way to indent and outdent. Check that route in the real application rather than assuming the visible indentation establishes keyboard behavior.

Save, reopen, and read the procedure in order

After editing, capture the current instance using the application's save path. The TinyMCE extraction guide covers that boundary. Reopen the record and inspect the second list's start value, the warning's parent step, and the final reader view.

The delivered procedure should read as steps 1 and 2, the photograph, then steps 3 and 4. The warning should stay attached to cable inspection. If a downstream renderer replaces browser markers with custom counters, check that it also honors the saved continuation before handing the procedure to its reader.

Keep reading