TinyMCE Anchor: insert named destinations without losing imported anchor text

TinyMCE's Anchor plugin inserts an ID at the cursor position through its anchor dialog. Enable the Link plugin as well when authors need to create links to those destinations. For imported named anchors containing HTML, inspect allow_html_in_named_anchor: the documented default is false. Anchor plugin

A fictional repair manual contains an older named destination around a short warning. An editor must preserve the warning while adding a link from the opening instructions. Inserting a new destination and deciding how to parse existing anchor contents are separate tasks; check both before migrating the manual.

For an application where current TinyMCE is already loaded:

tinymce.init({
  selector: '#repair-manual',
  plugins: 'anchor link',
  toolbar: 'undo redo | link anchor'
});

Merge these entries with the application's normal license, loading, plugins, and setup. Put the caret immediately before the warning, choose Anchor, and enter a stable identifier such as release-pressure. The documented output shape is an empty anchor at that position:

<p><a id="release-pressure"></a>Release pressure before opening.</p>

Select the referring words near the top of the manual, open Link, and choose the named destination from its anchor choices. A corresponding link has this shape:

<p><a href="#release-pressure">Read the pressure warning</a></p>

The identifier must be unique within the rendered document. Keep its spelling consistent with the fragment link. A descriptive identifier can remain stable when surrounding wording changes; changing the ID requires reviewing references that use it.

Inspect imported anchors that contain markup

An older manual might contain this input:

<a id="release-pressure"><strong>Release pressure first.</strong></a>

The Anchor documentation describes allow_html_in_named_anchor as controlling whether the editor parses and keeps HTML within named anchors. If preserving that shape is an actual application requirement, the documented option is:

const importedAnchorPolicy = {
  allow_html_in_named_anchor: true
};

Add it to the existing initialization configuration deliberately. It does not disable the rest of TinyMCE's content filtering or the application's server-side sanitization. Other configuration can still change the imported markup, so compare the saved result instead of promising exact preservation from one option.

For this manual, record the original warning text, import the document, capture the editor data, save it through the real path, and reload it. Inspect both the destination and the visible warning. A retained ID is insufficient if the warning's words or emphasis disappeared during a different conversion step.

Distinguish the authoring marker from the browser target

The Anchor toolbar control creates or edits anchor elements. The documented command opens its dialog on the intended instance:

editor.execCommand('mceAnchor');

Here editor is the initialized repair-manual instance. Use that instance rather than assuming the page's currently active editor owns the target manual. The command opens a dialog; it does not choose a name or persist the document for the author.

The final reader needs an actual id and a matching href. The same-page anchor guide explains that browser behavior. CKEditor's bookmark import rules are specific to CKEditor; do not assume TinyMCE applies the same conversions to nonempty anchors.

Check the destination after the real save path

Use “Read the pressure warning” in the delivered manual and confirm it reaches the warning. Inspect any sanitizer between the editor and that page: it can remove IDs while leaving link text untouched. If the manual is embedded alongside other documents, also check that another document has not introduced the same ID.

Finally rename the surrounding heading while leaving release-pressure unchanged, save, and repeat the jump. Read the warning where the link lands. The destination should still identify the pressure instruction, with the original safety wording intact and visible to the reader.

Keep reading