Login
Home CMS Documentation Home CMS 10 Administration System Options CMS Settings XHTML Editor JSON

XHTML Editor JSON Configuration

Prerequisites: User groups must exist for administrators to configure the Group option. See Creating Groups for details.
Administrators can configure overrides for XHTML editor (i.e., TinyMCE) settings in the Edit JSON Config Overrides editor. Specify overrides to apply by default or on a "per group" basis.

Formatting within Ingeniux's Edit JSON Config Overrides editor differs from TinyMCE formatting. The Edit JSON Config Overrides editor encapsulates key/value pairs within quotation marks (" ") rather than using standard JavaScript formatting.

To override XHTML editor settings:
  1. Navigate to Administration > System Options > CMS > XHTML Editor > Config JSON.

    Select Option

  2. Choose one of the following steps:
    • Select the Default option to configure JSON overrides for all users.
    • Select the Group option to configure the JSON overrides on a "per group" basis, and select the group from the drop-down list. The JSON overrides only apply to the selected group.
    Additional Information
    Caution
    If you configure multiple options, save your changes after configuring each option. If you switch from one option to another without saving, you lose your changes.

    If groups use JSON overrides, a checkmark (☑) displays next to the group. To clear all the group's configurations, hover over the checkbox and select the Restore Defaults minus (-) icon.

    Restore Defaults

    If you configure overrides for the Default option and the per individual Group option, each group's overrides automatically overtake the Default option for applicable users.

  3. Edit the JSON overrides in the editor. (For details, see the JSON overrides examples below.)

    XHTML Editor JSON Configuration

  4. Click Save. Ingeniux CMS implement JSON overrides in XHTML editors for applicable users.
    Note
    You may need to reload the page to persist your changes.
  5. As a user with appropriate permissions, open a page with an XHTML editor to verify your settings configure TinyMCE as expected.
    Additional Information

    For example, to verify the above configuration in the editor, select Format > Formats. Your custom formats display in Formats with the option (i.e., My Custom Formats) that you assigned in the Edit JSON Config Overrides editor.

    Restore Defaults

JSON Override Examples

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

Example #1

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.
{
    "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
  • 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 example 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, RegExp (regular expression), or function.

    The above example filters on a non-existing string named .IGNOREME. In this case, no filters are in effect.

  • 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.

Result

Custom Formats in TinyMCE: Example 1

Example #2

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.
{
"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"}}
                                        ]
    }
                ]      
}
Options
  • 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.

Result

Custom Formats in TinyMCE: Example 2

Note
Keep in mind that formatting within Ingeniux's 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.).

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