The text editor's behaviour and appearance are set by a combination of configuration files in iCM, user privileges, global settings, and your site's CSS.
Using iCM's file manager you can edit the main editor configuration and rules. These are held in the dhtmledit_config.js and dhtmledit_rules.js files.
The settings and rules determine the HTML elements and attributes that are supported in your article content, whether submitted via the article editor, or the iCM API.
Editor Style Sheet
The style of text in the editor is set by the editor style sheet. The editor style sheet is typically a simplified version of the full site style sheet, loaded into the editor so that the content you are working on will look similar to how it will appear when published on your site.
The style sheet can be set globally in the Content Settings, overridden at a subsite level in the Subsite Settings, and even set up when Creating and Editing Template Definitions.
If no display settings are set at any level, a style sheet of defaultarticletext.css is assumed, which (in our standard themes) is routed to a combined version of the theme's style sheet and any custom CSS added as a "skin" in the subsite configuration.
HTML Compliance and Script Protection
By default, the text editor generates HTML 5 compliant content. If all you are doing is creating content using the tab or WYSIWYG editors and inserting content using iCM inlines, you'll have very little to worry about.
If you are using the editor in HTML source view, or adding content using the iCM API, you should be aware of the following.
Removing Tags
The dhtmledit_config.js file has a range of settings that will remove certain tags from your HTML. Three common ones that may catch you out are:
"removeIfNoAttrTags" : [ "a", "img", "span" ] - If these elements don't have any attributes they will be removed (because, for example, an image without a source doesn't make sense)"removeIfEmptyTags" : [ "abbr", "acronym", "strong", "cite", "dfn", "em", "q", "span", "sub", "sup" ] - If these elements are empty, or contain only whitespace, non-breaking spaces, or line breaks, they will be removed"stripImages" : true - image tags are removed by default. This is because the standard editor inserts images using iCM inlines or as related content
This cleanup happens when the editor is switched from the HTML source view to the standard editor view, and when content is added using the API.
The dhtmledit_rules.js file controls the styles that appear in the editor toolbar style drop-down and the auto-format table styles. These rules are also used to filter content. If an HTML element is added to the body of an article that is not present in theses rules, it will be removed.
Invalid Tags
iCM has a script protection feature, replacing certain tags with
The tags that will be removed are:
- script
- iframe
- object
- embed
- applet
- meta
If you need to use one of these tags consider using the iCM script inline. Content paced in an inline is not cleaned up.
Standard Rules
The styles supported by our standard sites are:
[
/* Basic styles */
{ "name" : "Normal", "element" : "p" },
{ "name" : "Heading 2", "element" : "h2" },
{ "name" : "Heading 3", "element" : "h3" },
{ "name" : "Heading 4", "element" : "h4" },
{ "name" : "Heading 5", "element" : "h5" },
{ "name" : "Heading 6", "element" : "h6" },
{ "name" : "Align Left", "element" : "p", "attributes" : { "class" : "alignleft" } },
{ "name" : "Align Centre", "element" : "p", "attributes" : { "class" : "aligncenter" } },
{ "name" : "Align Right", "element" : "p", "attributes" : { "class" : "alignright" } },
/* Table No Border */
{ "name" : "No Border/Styles", "element" : "table", "attributes" : { "class" : "tablenoborder" } },
/* Table Dark */
{ "name" : "Dark", "element" : "table", "attributes" : { "class" : "tabledark" } },
/* Table Light */
{ "name" : "Light", "element" : "table", "attributes" : { "class" : "tablelight" } },
/* Table Primary Colour */
{ "name" : "Primary", "element" : "table", "attributes" : { "class" : "tableprimary" } },
/* Table secondary Colour */
{ "name" : "Secondary", "element" : "table", "attributes" : { "class" : "tablesecondary" } }
/* Info block styling - Supported from Core Resources 19.3.366 */
{ "name" : "Info block", "element" : "p", "attributes" : { "class" : "gi-info" } },
{ "name" : "Alert block", "element" : "p", "attributes" : { "class" : "gi-info gi-info--alert" } },
{ "name" : "Primary block", "element" : "p", "attributes" : { "class" : "gi-info gi-info--primary" } },
{ "name" : "Secondary block", "element" : "p", "attributes" : { "class" : "gi-info gi-info--secondary" } },
/* Body Disclosures - Supported from iCM.NET (Theme) 19.6.338 and iCM4j 19.15.416 */
{ "name" : "Disclosure H2 Start", "element" : "h2", "attributes" : { "class" : "disclosurestart" } },
{ "name" : "Disclosure H3 Start", "element" : "h3", "attributes" : { "class" : "disclosurestart" } },
{ "name" : "Disclosure End", "element" : "p", "attributes" : { "class" : "disclosureend" } }
]
Adding New Styles
This example adds a new style to highlight a block of text.
You'll need to add the new style to the dhtmledit_rules.js and add a style for the new class in your site skin CSS file.
Create a Rule
First add the new rule (called "Callout" in the example below):
The "element" should be a valid HTML element. The "attributes" object can be used to add any number of valid HTML attributes. In this case a CSS class called "callout" will be added, which can be targetted in the site skin.
The Styles drop-down in the article editor will now include the new style:
Add The CSS
When your article is published, text with the new style is output as:
<p class="callout">Note: This is the last major version of iCM that will support Internet Explorer version 8</p>
The callout class can be targetted in your site skin:
.callout {
display: block;
padding: 1em 2em;
background: #eee;
}
Which will style the text as:
Further Information
The Word document related to this page was written when the text editor had a major upgrade between iCM 9 and iCM 10. It contains lots of relevant information.
The two configuration files, dhtmledit_config.js and dhtmledit_rules.js also have lots of comments and examples of all of the available settings.
Share this page
