XHTML Editor JSON Configuration
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.
JSON Override Examples
Example #1
{
"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 adddiv
,a
, andp
tags as a valid child of thea
tag.- Plus Sign (
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 thestyle_formats
setting to the default style formats or completely replaces them. The default value isfalse
.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
Example #2
{
"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 thestyle_formats_merge setting to the default style formats or completely replaces them. The default value isfalse .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
For complete descriptions of JavaScript override options and JavaScript sample code, refer to the TinyMCE Documentation.