XHTML Editor JSON Configuration

For XHTML editor elements, configure JSON overrides as needed in the Edit JSON Config Overrides editor interface. You can choose to apply these overrides either as default settings for all users or for individual user groups.

Note

Keep in mind that formatting within the Edit JSON Config Overrides editor differs from that of TinyMCE's formatting. The Edit JSON Config Overrides editor encapsulates key/value pairs within quotes ("") rather than using standard JavaScript formatting (this difference is due to the nature of how the back-end storage of Ingeniux CMS uses the JSON format.).

To configure JSON overrides for XHTML editor:

Navigate to Administration > System Options > CMS > XHTML Editor > JSON.
Choose one of the following steps:
- Click the Default option to modify configurations for all users.
- Click the Group option to modify configurations for a particular user group. Choose the group from the Selected Group drop-down list.
  Version Notes: CMS 10.6 vs. CMS 10.0–10.5
  Groups with checkmarks ✓ in the list have custom configurations.
  If you modify configurations for the Default option and the per individual Group option, each group's configurations automatically overtake the Default option for applicable users.
  If you want to delete configurations from a particular group, complete the step that corresponds with your CMS version:
  For CMS 10.6: Clear the checkbox next to the group, then click Yes in the Restore Defaults dialog that displays.
  CMS 10.0–10.5: Hover over the checkbox next to the group, then click the Restore Defaults minus (-) icon.
Edit the JSON overrides in the editor (for examples, see the section below.)
Caution
If you plan to make configuration changes for more than one user group, ensure you save your changes before switching between groups. If you switch from one to another without saving, you will lose your changes.
Click the Save button in the top-left corner of XHTML Editor JSON Configuration to save your changes.
The JSON overrides will become available in the XHTML editor for applicable users.
Troubleshooting
You may need to reload the page to persist your changes.

Next Steps: Verify your JSON override settings are functioning correctly by opening a Site Tree content item with an XHTML editor and testing the overrides. If the overrides are configured for individual groups, you may need to have a user with the appropriate permissions test them.

For example, to verify the JSON override example #1 configurations, select Formats > My Custom Formats in the XHTML editor. Your custom formats will display in this list, which you configured in the Edit JSON Config Overrides editor.

The following overview provides code examples you can use in the Edit JSON Config Overrides editor.

For complete descriptions of JavaScript override options and JavaScript sample code, refer to the TinyMCE Documentation.

This JSON sample code renders as custom formats in the XHTML editor's Formats drop-down menu. Use this sample to add custom bold and lists without bullets formatting. Modify the code to suit your needs.

Example 1 JSON

{
    "valid_children": "+body[style],+a[div|a|p]",
    "importcss_selector_filter":".IGNOREME",
	"style_formats_merge": true,
	"style_formats": [
	    {"title": "My Custom Formats", "items": [
            {"title": "My Custom Bold", "inline": "b"},
            {"title": "List - No Bullets Inline",
                "selector": "ul",
                "styles": {
                    "list-style-type": "none",
                    "color": "red"
                 }
            },
            {"title": "List - nobullet class", "selector":"ul", "classes":"nobullet"}
        ]}
    ]
}

Options used in this example include:

valid_children

Controls which child elements can reside within specified parent elements.

Control characters:

Plus Sign (+): Adds children to the list of valid elements for the specified parent.
Minus Sign (-): Removes children from the list of valid children for the specified parent.

The above code sample demonstrates how to add style as a valid child of the <body> tag and add <div>, <a>, and <p> tags as a valid child of the <a> tag.

importcss_selector_filter

Enables only import classes from selectors matching the filter. The filter can be a string, regular expression (RegExp), or function.

style_formats_merge

Determines if TinyMCE appends the styles in the style_formats setting to the default style formats or completely replaces them. The default value is false.

style_formats

Adds advanced style formats for text and other elements to the editor. The value of this option renders as styles in the Formats drop-down menu.

For examples of options within style_formats, see TinyMCE Style Formats.

In XHTML editor, the JSON overrides will become available to users with permissions in the Formats > My Custom Formats menu.

Custom Formats in TinyMCE: Example 1

This JSON sample code renders as custom font size formatting in the XHTML editor's Formats drop-down menu. Modify the code to suit your needs.

Example 2 JSON

{
"valid_children": "+body[style],+a[div|a|p]",
"style_formats_merge": true,
"style_formats": [
    {"title": "Font Size", "items": [
            {"title": "8px", "inline": "span", "styles": {"font-size": "8pt"}},
            {"title": "10px", "inline": "span", "styles": {"font-size": "10pt"}},
            {"title": "12px", "inline": "span", "styles": {"font-size":"12pt"}},
            {"title": "24px", "inline": "span", "styles": {"font-size": "24pt"}},
            {"title": "36px", "inline": "span", "styles": {"font-size": "36pt"}},
            {"title": "48px", "inline": "span", "styles": {"font-size": "48pt"}}
                                        ]
    }
                ]      
}

valid_children: Controls which child elements can reside within specified parent elements.
style_formats_merge: Determines if TinyMCE appends the styles in the style_formats_merge setting to the default style formats or completely replaces them. The default value is false.
style_formats: Adds advanced style formats for text and other elements to the editor. The value of this option renders as styles in the Formats drop-down menu.
For examples of options within style_formats, see TinyMCE Style Formats.

In XHTML editor, the JSON overrides will become available to users with permissions in the Formats > Font Size menu.

Custom Formats in TinyMCE: Example 2

Documentation

XHTML Editor JSON Configuration

JSON Override Examples

Example #1

Options

Result

Example #2

Options

Result