Skip to main content

Outline

At a glance
  • Schema Enforcement: Controlling the whitelist of allowed elements and attributes via valid_elements.
  • Hierarchy Control: Using valid_children to prevent invalid nesting and support complex UI modules.
  • Root Governance: Modifying the forced_root_block to support snippet-based authoring.
  • Clean Data: Eradicating Microsoft Word "noise" with paste-specific schema rules.

In an enterprise-grade digital experience, the Rich Text Editor (TinyMCE) is often the most misused component. While marketers appreciate the "blank canvas" appeal of a WYSIWYG, developers and architects view it as a potential source of technical debt. Unconstrained HTML leads to broken accessibility, inconsistent layouts across devices, and content that cannot be easily migrated or repurposed for headless delivery.

Structural Authoring is the practice of configuring the editor so that it only allows valid, semantic, and on-brand structures. It moves beyond simply providing a "Bold" button and instead enforces a strict schema of what is allowed to exist in the database. As you prepare for the PaaS CMS 13 Developer Certification, you must master the granular controls within the TinyMceOptions API to transition from being a facilitator of "text areas" to an architect of "semantic content fragments." This activity explores the mechanics of element whitelisting, child-nesting constraints, and root-block enforcement.

1. The Whitelist Strategy: valid_elements vs. extended_valid_elements

The first line of structural defense is the element schema. In Optimizely CMS 13, TinyMCE acts as a gatekeeper. Any HTML pasted or typed into the editor that does not match your defined schema is automatically stripped during the cleanup cycle.

The Additive Approach with extended_valid_elements

In most Optimizely implementations, you want to keep the platform's sensible defaults while adding support for modern web standards. extended_valid_elements allows you to add specific attributes or tags to the existing whitelist without re-defining the entire HTML spec. Use this to allow modern tags like <section> or <svg>.

config.Default() .AddSetting("extended_valid_elements", "section[class|id],svg[*],path[*],iframe[src|title|allowfullscreen]");

2. Controlling Hierarchy with valid_children

One of the most frustrating editorial "anti-patterns" is invalid nesting. HTML5 allows for specific nesting (like wrapping a <div> in an <a> tag), but editors often accidentally create structures that browsers interpret inconsistently—such as placing a block-level <h2> inside a <p> tag.

The valid_children setting allows you to explicitly control which tags can live inside others. Prefixing with + adds a valid child, while - removes one. By explicitly forbidding <div> inside <p>, you prevent the editor from creating "div-itis."

config.Default() .AddSetting("valid_children", "+a[div|img|h3|p],-p[div]");

3. Root-Level Governance: forced_root_block

By default, TinyMCE wraps all content in a <p> tag. If an editor types a single word, the database stores <p>Word</p>. While this is generally correct, there are technical scenarios where you might need to change this behavior, particularly for small UI snippets or component-specific properties.

Setting forced_root_block to an empty string allows for "naked" text. This is often used for small properties, like a "Footer link," where the surrounding HTML is already handled by the view. However, be cautious: removing the root block can make paragraph management difficult, as pressing "Enter" will then create <br /> tags instead of new paragraphs.

4. Structural Styling with StyleFormats

In CMS 13, you can use Structural Formats to change the behavior or container of a selection. The wrapper property in a style format tells TinyMCE that the class should be applied to a parent container if possible, or that it should wrap the selection in a new block element.

new { title = "Alert Box", block = "div", classes = "alert alert-warning", wrapper = true }, new { title = "Responsive Table", selector = "table", classes = "table-responsive" }

5. Schema Integrity on Paste: paste_word_valid_elements

The single greatest threat to structural authoring is the "Copy from Word" operation. Microsoft Word and other processors inject thousands of lines of non-standard markup. To enforce safety, you should use the paste_word_valid_elements setting. This defines a second, even stricter schema applied during paste operations, ensuring that only core semantic elements are permitted into your database.

6. Entity Encoding and Data Persistence

How content is stored affects search indexing and API consumption. The entity_encoding setting determines how special characters are handled. Using Raw encoding preserves characters as they are, which is the preferred setting for modern PaaS CMS 13 implementations, making content more readable in the database and easier to consume via Headless JSON APIs.

Conclusion

Enforcing structural constraints in Optimizely CMS 13 is the transition point where a developer moves from providing a simple text editor to building a governed content platform. By leveraging the advanced TinyMceOptions API—specifically properties like valid_children, forced_root_block, and structural style_formats—you ensure that content remains semantic, accessible, and resilient to future design changes. This technical mastery ensures that the Content Management System serves as a reliable source of truth for the entire digital ecosystem, protecting both the developer's code and the brand's visual identity.