<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="UTF-8"> <title>HTML Editor Test</title> <style type="text/css" media="screen"> body { position: relative; margin: 0 auto; padding: 50px; width: 540px; font: 400 14px/1.24 helvetica, arial, sans-serif; text-shadow: 0 1px 0 white; } h1 { font-size: 1.95em; } span { cursor: pointer; text-decoration: underline; } p { margin: 5px 0; } #editor { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 200px; border: 1px solid #888; padding: 1em; background: transparent; color: #2b2b2b; font: 13px/1.35 Helvetica, arial, sans-serif; cursor: text; } a { text-decoration: underline; } h2 { font-size: 123.1%; } h3 { font-size: 108%; } h1,h2,h3,p { margin: 1em 0; } h4,h5,h6 { margin: 0; } ul, ol { margin: 0 1em; padding: 0 1em; } blockquote { border-left: 2px solid blue; margin: 0; padding: 0 10px; } </style> </head> <body> <h1>HTML Editor Test</h1> <header> <p>This is a really simple demo, with the most trivial of UI integrations</p> <p> <span id="bold">Bold</span> <span id="removeBold">Unbold</span> <span id="italic">Italic</span> <span id="removeItalic">Unitalic</span> <span id="underline">Underline</span> <span id="removeUnderline">Deunderline</span> <span id="removeAllFormatting">Remove formatting</span> <span id="setFontSize" class="prompt">Font size</span> <span id="setFontFace" class="prompt">Font face</span> </p> <p> <span id="setTextColour" class="prompt">Text colour</span> <span id="setHighlightColour" class="prompt">Text highlight</span> <span id="makeLink" class="prompt">Link</span> </p> <p> <span id="increaseQuoteLevel">Quote</span> <span id="decreaseQuoteLevel">Dequote</span> <span id="makeUnorderedList">List</span> <span id="removeList">Unlist</span> <span id="increaseListLevel">Increase list level</span> <span id="decreaseListLevel">Decrease list level</span> <span id="insertImage" class="prompt">Insert image</span> <span id="setHTML" class="prompt">Set HTML</span> <span id="undo">Undo</span> <span id="redo">Redo</span> </p> </header> <script type="text/javascript" src="build/squire-raw.js"></script> <div id="editor"></div> <script type="text/javascript" charset="utf-8"> var div = document.getElementById( 'editor' ); var editor = new Squire( div, { blockTag: 'p', blockAttributes: {'class': 'paragraph'}, tagAttributes: { ul: {'class': 'UL'}, ol: {'class': 'OL'}, li: {'class': 'listItem'}, a: {'target': '_blank'} } }); document.addEventListener( 'click', function ( e ) { var id = e.target.id, value; if ( id && editor && editor[ id ] ) { if ( e.target.className === 'prompt' ) { value = prompt( 'Value:' ); } editor[ id ]( value ); } }, false ); </script> </body> </html>