Using Textbox.io - Configuration Example

HTML

<script src="http://static.ephox.com/jsfiddle/textboxio/textboxio.js"></script>
<div class="editableDiv">
    <h1>Example.css</h1>
    <p>Stylesheet loaded via Textbox.io configuration object.</p>
</div>

CSS

.editableDiv {
    margin:10px 0;
    height:500px;
}

JavaScript

var config = {
    ui : {
        toolbar : {
            items : [
                // Limit the toolbar to insert, styles and emphasis
                'insert',
                'style',
                'emphasis',
                {
                    label: 'Custom Toolbar Group',
                    items: [ 'removeformat', 'fullscreen' ]
                }
            ]
        }
    },
    css : {
        // Set the editor rendering stylesheets
        stylesheets : [ 'http://static.ephox.com/jsfiddle/example.css' ], 
        // Configure a list of available CSS classes   
        styles : [
            { rule : 'p' },                                 
            { rule : 'h1.blue', text: 'Blue Heading 1' },
            { rule : '.green', text: 'Green Inline Style' }
        ]
    },
    paste : {
        // Override default paste behavior, removing all inline styles
        style : 'clean',
        /* style : 'plain', */
    },
    services : {
        // Enable the example spelling service
        spelling : { url: 'http://spelling.ephox.com/' },   
        // Enable the example image upload service       
        imageupload : { url: 'http://image-storage.ephox.com/' }   
    }
};

var editor = textboxio.replace('.editableDiv', config);