Using Textbox.io - Configuration Example

HTML

<script src="https://s3.amazonaws.com/ephox-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 = {
    css : {
        // Configure a list of available CSS classes   
        styles : [
            { rule : 'p' },                                 
            { rule : 'h1.blue', text: 'Blue Heading 1' },
            { rule : '.green', text: 'Green Inline Style' }
        ],
        // Set the editor rendering stylesheets
        stylesheets : [ 'http://static.ephox.com/jsfiddle/example.css' ]
    },    
    paste : {
        // Override default paste behavior, removing all inline styles
        style : 'clean'                                     
    },
    //spelling : { url: 'http://spelling.example.com/service' },
    ui : {
        toolbar : {
            items : [
                // Limit the toolbar to insert, styles and emphasis
                'insert',
                'style',
                'emphasis',
                'tools',
                {
                    label: 'Custom Toolbar Group',
                    items: [ 'removeformat', 'fullscreen' ]
                }
            ]
        }
    }
};

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