Customizing the toolbars

For this chapter you will need some knowledge of javascript. SimplyEdit has a settings API that allows you to customize the options in some of its toolbars. This API uses javascript objects and arrays.

Before you go wild and extend the editor with extra styles and options, first check if you need them. By making the editable regions as small and specific as possible, you can do without them most of the time. This keeps the toolbars simple and consistent.

Change available text styles

First add a script defining your custom styles. This script tag must be inserted before the SimplyEdit script tag:

<script>
var textSettings = {
    'block': [
        { tag: 'h1', name: 'Heading 1' }
        ,{ tag: 'h2', name: 'Heading 2' }
        ,{ tag: 'p', name: 'Paragraph' }
        ,{ tag: 'p class="special"', name: 'Special Paragraph' }
    ],
    'inline': [
        { tag: 'strong', name: 'Bold', icon: 'fa-bold' }
        ,{ tag: 'em', name: 'Italic', icon: 'fa-italix'}
    ]
}
var mySettings = {
    'simply-text-cursor': textSettings,
    'simply-text-selection': textSettings
};
</script>

Then update the SimplyEdit script by telling it where to find your custom settings:

<script src="//cdn.simplyedit.io/1/simply-edit.js"
    data-api-key="demo"
    data-simply-settings="mySettings"></script>

Important You must include the block tag 'p' in your styles, or the text toolbar won't work.

Both simply-text-cursor and simply-text-selection are toolbars in SimplyEdit. The first one is shown when you put the cursor in an editable field or press <ctr>-<space>. The second is used whenever you select some text. Both have settings for which text styles to show.

The block section is used to fill the dropdown list. These styles are applied to the current block element, e.g. a paragraph or heading.

The inline section instead adds buttons with icons. These styles will be applied to the exact text selection. If you haven't selected a text, the style is applied to the next text you type.

As you can see in the 'Special Paragraph' entry, you can add any valid HTML attribute to a text style.

Add custom text classes

<script>
var textSettings = {
    'class': [
        [
            {'class': 'red', name: 'Red', icon: 'fa-paint-brush'}
            ,{'class': 'green', name: 'Green', icon: 'fa-paint-brush'}
            ,{'class': 'blue', name: 'Blue', icon: 'fa-paint-brush'
        ]
    ]
}
var mySettings = {
    'simply-text-cursor': textSettings,
    'simply-text-selection': textSettings
};
</script>

And again, be sure to update the SimplyEdit script by telling it where to find your custom settings:

<script src="//cdn.simplyedit.io/1/simply-edit.js"
    data-api-key="demo"
    data-simply-settings="mySettings"></script>

This adds an extra button 'Class' to the text toolbars. If you press it, you can now select on the following classes:
'Red', 'Green', 'Blue' and 'Default'.

Because these classes are grouped together in a single list in the class setting, you can select only one of them at a time. They work like a radio toggle. The 'Default' button removes the class again.

If you have other classes that are independent of the others, just add an extra list:

<script>
var textSettings = {
    'class': [
        [
            {'class': 'red', name: 'Red', icon: 'fa-paint-brush'}
            ,{'class': 'green', name: 'Green', icon: 'fa-paint-brush'}
            ,{'class': 'blue', name: 'Blue', icon: 'fa-paint-brush'
        ]
        ,[
             {'class': 'highlight', name : 'Highlight', icon : 'fa-sun-o'}
             ,{'class': 'lowlight', name : 'Lowlight', icon : 'fa-moon-o'}
        ]
    ]
}
var mySettings = {
    'simply-text-cursor': textSettings,
    'simply-text-selection': textSettings
};
</script>

Please note that these classes do not work on a random selection of text. Instead they work on an existing HTML element, which contains the cursor.

Add custom image classes

Add a list of image styles:

<script>
var imageSettings = {
    'class' : [
        [
            {'class': 'shadow', name: 'Shadow', icon: 'fa-moon-o'}
            ,{'class': 'border', name: 'Border', icon: 'fa-square-o'}
        ]
    ]
};
var mySettings = {
    'simply-image': imageSettings
};
</script>

And again add the settings to SimplyEdit:

<script src="//cdn.simplyedit.io/1/simply-edit.js"
    data-api-key="demo"
    data-simply-settings="mySettings"></script>