An original example is an equipment-loan notice. Its approved return instruction must stay fixed, while a staff member adds a collection note for an individual borrower. Making the entire editor read-only would block the note. Making the entire document editable would expose the approved instruction to accidental changes.
Protect one section in an otherwise editable document
For an installed and loaded current TinyMCE application, initialize the existing notice textarea with an explicit noneditable class:
tinymce.init({
selector: '#loan-notice',
noneditable_class: 'fixed-instruction'
});
Retain the application's other initialization options, plugin requirements, and license configuration. The fragment changes the editing policy; it is not a complete application installation.
Supply this fictional content through the application's normal initial-data path:
<section class="fixed-instruction">
<h2>Return instruction</h2>
<p>Return the recorder to the equipment counter.</p>
</section>
<p>Collection note: Ask for the padded carrying case.</p>
The class names the protected region. Give it a visible presentation in the editor and explain that the return instruction is fixed, while the collection note can be changed. Do not rely on a subtle background color as the only indication of editability.
TinyMCE defaults noneditable_class to mceNonEditable; this example deliberately configures a different name so the markup and initialization show the same explicit contract.
Reverse the policy for a mostly fixed form
If the notice is mostly approved text and only one note is editable, make the root noneditable and name the editable region:
tinymce.init({
selector: '#loan-notice',
editable_root: false,
editable_class: 'borrower-note'
});
The corresponding content contains an editable island:
<h2>Equipment loan</h2>
<p>Return the recorder to the equipment counter.</p>
<div class="borrower-note">
<p>Ask for the padded carrying case.</p>
</div>
Use this as an alternative configuration, not a second initialization of the same textarea. The documentation explicitly allows editable descendants within a noneditable root. Keep the editable region visible and usable when its text becomes empty, and check the actual keyboard route into and out of it.
For this notice, the root-first policy is appropriate only if staff need to change the borrower note and nothing else. If they also need to add paragraphs freely, the protected-section policy may fit better.
Keep fixed content authoritative on the server
An editor option cannot make a submitted HTML string trustworthy. A requester can bypass the interface, remove a class, or send a changed instruction directly. For content that must match an approved version, keep the authoritative instruction on the server and validate or reconstruct the stored result there.
For the loan notice, retain the approved return-instruction revision separately from the borrower note. The saved record should identify which approved instruction it uses. If the rule changes later, decide deliberately whether existing notices retain their original version or receive an update; a CSS class does not define that policy.
Do not hide a secret in a noneditable section. The region is still content delivered to the browser, and the restriction concerns editing rather than confidentiality.
Check typing, deletion, and reopening
In a development copy of the real application, change the borrower note to “Collect the spare battery with the recorder.” Try typing directly in the approved instruction and deleting across the boundary from the adjacent editable text. Check paste, Undo, and an emptied note region. Those interactions can reveal a boundary problem that a click-only demonstration misses.
Capture the current HTML through the application's usual save route, then reopen the same notice. Confirm that the spare-battery note remains editable and that the approved return instruction still follows the intended policy. The TinyMCE content extraction guide covers reading the current instance instead of an older textarea value.
For plain browser editing, the contenteditable guide explains the underlying attribute. TinyMCE's configured regions add an editor-specific content contract. Finish with the borrower note saved under the right loan record and the approved instruction checked against its authoritative version.