Skip to main content

Create inline styles (MT4)

This page applies to:MindTouch 4

This article covers how to add inline styles to your MindTouch Editor so that you can apply styles within a MindTouch page. After completing this tutorial you will be able to add custom Styles to the Style dropdown in the MindTouch Editor.  

Use Case

Within documentation there is a feature available in desktop authoring tools that allow the author to apply a specific set of styles to a paragraph/section of text.  This provides a more granular control over the styling output for portions of an article.

Within the MindTouch Editor we have this out of the box with some preformatted styling which are seen in the style dropdown:

styles dropdown menu in editor.png

When you apply a Style through this drop down it is adding elements on the source side of the page which you can then target with CSS.  The elements will most likely be Divs but can also be Spans.

Adding custom styles

To add custom styles we'll need to modify the Editor configuration in the Control Panel which is accessible by going to Tools -> Control Panel -> Editor  

From here you'll add the following block of code:

CKEDITOR.editorConfig = function( config )
config.stylesSet.push({ name : 'Paragraph Format', element : 'div', wrap:true, attributes : { 'class' : 'pformat', 'title' :
'Formatted_Paragraph' } });
config.stylesSet.push({ name : 'Sentence Format', element : 'div', wrap:true, attributes : { 'class' : 'sformat', 'title' :
'Formatted_Sentence' } });


Code Breakdown

This block of text is the base configuration needed for the MindTouch editor to know that you are adding new elements to it

CKEDITOR.editorConfig = function( config )



Within the { } you'll add the new styles options.  You can add as many as you want in the following format:

config.stylesSet.push({ name : 'Paragraph Format', element : 'div', wrap:true, attributes : { 'class' : 'pformat', 'title' :'Formatted_Paragraph' } });

config.stylesSet.push - This is the name of the styles override for the editor

name - This is the name that you want to appear in the Styles dropdown, in this case Paragraph Format

element - This is the element that we are going to add to the text that I've highlighted to apply the style to, in this case we're going to add a div but you can also make this a span

wrap - This will note that the element is wrapping around the text/content that you've highlighted

attributes - The attributes will be added to the div information.  In this case we are identifying a class and a title for the div.

Once we have configured the Styles within the control panel we can then hit save on the editor configuration and go to the front end.

editor configuration dialog.png

Applying styles in the Editor

Now that we've added the styles to the editor, we can click on the Style dropdown and see the following:

custom styles in styles dropdown.png

We can highlight some text now and then select one of the styles like the Paragraph Format.  Once we apply the style if we go into the souce view for the page (View -> Source) we will be able to see the new div that is wrapped around the text that we highlighted:

<div class="pformat style-wrap" title="Formatted_Paragraph">

Now we can go into the Control Panel and in the Custom Site CSS section we can add new styling/formatting to target the pformat div in this case and it will be applied to all content that is wrapped in that div.  

Best Practice: Adding a "More" Option

If you have many custom styles to add into the editor, the height of the Styles drop-down may become too large for some screen resolutions. In this case, feel free to add the following option to define how many custom styles are shown, before displaying a "More" option:

config.styles_maxUserDefined = 2;

In the above option, the integer is the number of items you would like to be shown before a "More" option is displayed. An example of adding this into your existing custom styles is below:

CKEDITOR.editorConfig = function( config )

config.stylesSet.push({ name : 'Complete', element : 'div', wrap:true, attributes : { 'class' : 'complete', 'title' :'Complete' } });
config.stylesSet.push({ name : 'In Progress', element : 'div', wrap:true, attributes : { 'class' : 'inprogress', 'title' :'In Progress' } });
config.stylesSet.push({ name : 'Not Started', element : 'div', wrap:true, attributes : { 'class' : 'notstarted', 'title' :'Not Started'} });

config.styles_maxUserDefined = 2;


This would then display the first two options, and then a "More" option for additional styles:

more option in styles dropdown.png

What's Next

If you already have styles identified that you'd like to import into MindTouch you can do so through the Custom Site CSS section.  

  • Was this article helpful?