Textbox.io Main Demo for Tour

The headline tour demo.

HTML

<script src="https://clouddelivery.textbox.io/1/getEditor?apiKey=1wugguwjiatkm69xmt7w1den1mpvqkxi75mwfmb49lz89o4r"></script>
<div id="editablediv" style="height:450px;width:85%;margin:0 auto 0 auto">
    <h1 style="text-align: center; ">Hi, I'm Textbox.io!</h1>
    <p>Textbox.io's powerful editing tools and simple user interface let your users create great looking HTML anywhere: on the desktop and on mobile.</p><p>This demo shows the Textbox.io Editor in its standard configuration, with its core HTML editing capabilities enabled. These include: text-formatting, tables, hyperlinks, and lists. Other advanced features include:</p><ul><li>Built-in Image Handling &amp; Storage</li><li>File Drag &amp; Drop</li><li>Spell Check &amp; Autocorrect</li><li>Clean Copy-Paste From Microsoft Word</li><li>Cross-Browser Support</li></ul>
</div>

JavaScript

var config_standard = {
    css : {
        // Configure a list of available CSS classes   
        styles : [
            { rule : 'p' },      
            { rule : 'h1'},
            { rule : 'h1.blue', text: 'Blue Heading 1' },
            { rule : 'h2'},
            { rule : 'h3'},
            { rule : 'h4'},
            { rule : 'pre'},
            { rule : '.green', text: 'Green Inline Style' }
        ],
        // Set the editor rendering stylesheets
        documentStyles: 'body { font-size: 1.1em;  color: black;  background-color: rgb(230, 230, 230); font-family: sans-serif;}'
    },
    spelling : { url: 'http://spelling.ephox.com/' },
    ui : {
        toolbar : {
            items : [
                // Limit the toolbar to insert, styles and emphasis
                'undo',
                 'insert',
                'style',
                'emphasis',
                'align',
                'listindent',
                'format',
                'language',
                'tools'
            ]
        }
    }
};


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