Textbox.io Customization Demo

The customization tour demo.

HTML

<script src="https://clouddelivery.textbox.io/1/getEditor?apiKey=1wugguwjiatkm69xmt7w1den1mpvqkxi75mwfmb49lz89o4r"></script>
<div id="editablediv_customize" style="height:540px;width:85%;margin:0 auto 0 auto">
    <h2 style="text-align: center; ">Customize Me</h1>
    <p>Textbox.io can be customized to your application&apos;s needs</p>
    <p>This example has a:</p>
    <ul>
        <li>customized toolbar</li>
        <li>custom styles dropdown</li>
        <li>custom toolbar button</li>
    </ul>
    <p>Run this sample at <a href="http://jsfiddle.net/textboxio/s2kqvud9/">http://jsfiddle.net/textboxio/s2kqvud9/</a></p>
</div>

JavaScript

// Custom Button Item Object
var customButton = {
    id     : 'custom1',
    text   : 'Custom Button 1',
//    icon   : '/path/to/icon1.png',
    action : function () { alert('Custom Button 1 Clicked'); }
};
    
var config_customize = {
   ui : {
    toolbar : {
        items : [
            // Limit the toolbar to insert, styles and emphasis
            'insert', 
            'style', 
            'emphasis', 
            {  
                //  Toolbar group object with custom command
                label  : 'My Toolbar Group',
                items : [customButton]
            }
        ]
    }
  }, 
    css : {
        // Configure a list of available CSS classes   
        styles : [
            { rule : 'p' },      
            { rule : 'h1'},
            { rule : 'h1.blue', text: 'Blue Heading 1' },
            { rule : 'h2'},
            { rule : '.green', text: 'Green Inline Style' }
        ],
        // Set the editor rendering stylesheets
        stylesheets : [ '//textbox.io/jsfiddle/example.css' ]
    },
    spelling : { url: 'http://spelling.ephox.com/' }
};

// Create a Textbox.io Editor for the matched element(s)
var editor_standard = textboxio.replace('#editablediv_customize', config_customize);