BVB Source Codes

Squire Show Demo.html Source code

Return Download Squire: download Demo.html Source code - Download Squire Source code - Type:.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  5.   <meta charset="UTF-8">
  6.   <title>HTML Editor Test</title>
  7.   <style type="text/css" media="screen">
  8.   body {
  9.     position: relative;
  10.     margin: 0 auto;
  11.     padding: 50px;
  12.     width: 540px;
  13.     font: 400 14px/1.24 helvetica, arial, sans-serif;
  14.     text-shadow: 0 1px 0 white;
  15.   }
  16.   h1 {
  17.     font-size: 1.95em;
  18.   }
  19.   span {
  20.     cursor: pointer;
  21.     text-decoration: underline;
  22.   }
  23.   p {
  24.     margin: 5px 0;
  25.   }
  26.   #editor {
  27.     -moz-box-sizing: border-box;
  28.     -webkit-box-sizing: border-box;
  29.     box-sizing: border-box;
  30.     min-height: 200px;
  31.     border: 1px solid #888;
  32.     padding: 1em;
  33.     background: transparent;
  34.     color: #2b2b2b;
  35.     font: 13px/1.35 Helvetica, arial, sans-serif;
  36.     cursor: text;
  37.   }
  38.   a {
  39.     text-decoration: underline;
  40.   }
  41.   h2 {
  42.     font-size: 123.1%;
  43.   }
  44.   h3 {
  45.     font-size: 108%;
  46.   }
  47.   h1,h2,h3,p {
  48.     margin: 1em 0;
  49.   }
  50.   h4,h5,h6 {
  51.     margin: 0;
  52.   }
  53.   ul, ol {
  54.     margin: 0 1em;
  55.     padding: 0 1em;
  56.   }
  57.   blockquote {
  58.     border-left: 2px solid blue;
  59.     margin: 0;
  60.     padding: 0 10px;
  61.   }
  62.   </style>
  63. </head>
  64. <body>
  65. <h1>HTML Editor Test</h1>
  66. <header>
  67.   <p>This is a really simple demo, with the most trivial of UI integrations</p>
  68.   <p>
  69.   <span id="bold">Bold</span>
  70.   <span id="removeBold">Unbold</span>
  71.   <span id="italic">Italic</span>
  72.   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  73.   <span id="removeItalic">Unitalic</span>
  74.   <span id="underline">Underline</span>
  75.   <span id="removeUnderline">Deunderline</span>
  76.   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  77.   <span id="removeAllFormatting">Remove formatting</span>
  78.   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  79.   <span id="setFontSize" class="prompt">Font size</span>
  80.   <span id="setFontFace" class="prompt">Font face</span>
  81.   </p>
  82.   <p>
  83.   <span id="setTextColour" class="prompt">Text colour</span>
  84.   <span id="setHighlightColour" class="prompt">Text highlight</span>
  85.   <span id="makeLink" class="prompt">Link</span>
  86.   </p>
  87.   <p>
  88.     <span id="makeHeader">Make Header</span>
  89.     <span id="increaseQuoteLevel">Quote</span>
  90.     <span id="decreaseQuoteLevel">Dequote</span>
  91.   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  92.     <span id="makeUnorderedList">List</span>
  93.     <span id="removeList">Unlist</span>
  94.     <span id="increaseListLevel">Increase list level</span>
  95.     <span id="decreaseListLevel">Decrease list level</span>
  96.   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  97.   <span id="insertImage" class="prompt">Insert image</span>
  98.   <span id="setHTML" class="prompt">Set HTML</span>
  99.   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  100.     <span id="undo">Undo</span>
  101.     <span id="redo">Redo</span>
  102.   </p>
  103. </header>
  104. <script type="text/javascript" src="build/squire-raw.js"></script>
  105. <div id="editor"></div>
  106. <script type="text/javascript" charset="utf-8">
  107.   var div = document.getElementById( 'editor' );
  108.   var editor = new Squire( div, {
  109.       blockTag: 'p',
  110.       blockAttributes: {'class': 'paragraph'},
  111.       tagAttributes: {
  112.           ul: {'class': 'UL'},
  113.           ol: {'class': 'OL'},
  114.           li: {'class': 'listItem'},
  115.           a: {'target': '_blank'}
  116.       }
  117.   });
  118.   Squire.prototype.makeHeader = function() {
  119.     return this.modifyBlocks( function( frag ) {
  120.       var output = this._doc.createDocumentFragment();
  121.       var block = frag;
  122.       while ( block = Squire.getNextBlock( block ) ) {
  123.         output.appendChild(
  124.           this.createElement( 'h2', [ Squire.empty( block ) ] )
  125.         );
  126.       }
  127.       return output;
  128.     });
  129.   };
  130.  
  131.   document.addEventListener( 'click', function ( e ) {
  132.     var id = e.target.id,
  133.         value;
  134.     if ( id && editor && editor[ id ] ) {
  135.      if ( e.target.className === 'prompt' ) {
  136.        value = prompt( 'Value:' );
  137.       }
  138.       editor[ id ]( value );
  139.     }
  140.   }, false );
  141. </script>
  142. </body>
  143. </html>
  144.  
downloadDemo.html Source code - Download Squire Source code
Related Source Codes/Software:
thor - Thor is a toolkit for building powerful command-li... 2017-01-08
glide - Package Management for Golang h... 2017-01-08
TextFieldEffects - Custom UITextFields effects inspired by Codrops, b... 2017-01-08
flowchart.js - Draws simple SVG flow chart diagrams from textual ... 2017-01-08
RoundedImageView - A fast ImageView that supports rounded corners, ov... 2017-01-07
webpack-demos - a collection of simple demos of Webpack 2017-01-08
amazon-dsstne - Deep Scalable Sparse Tensor Network Engine (DSSTNE... 2017-01-08
rq - Simple job queues for Python ht... 2017-01-08
emmet-vim - emmet for vim: http://emmet.io/ ... 2017-01-08
prose - A Content Editor for GitHub. ht... 2017-01-08
csvkit - A suite of utilities for converting to and working... 2017-02-18
Messenger - This is a native iOS Messenger app, making realtim... 2017-02-18
meteor-up - Production Quality Meteor Deployment 2017-02-18
book-of-modern-frontend-tooling - The Front-end Tooling Book 2017-02-17
sorcery - Magical authentication for Rails 3 & 4 2017-02-17
iScript - Xiami.com script--about shrimp, Baidu's Web site, ... 2017-02-17
AndroidViewHover - An elegant way to show your menu or messages. 2017-02-17
viper - Go configuration with fang 2017-02-17
bypy - The Python client for Baidu Yun (Personal Cloud St... 2017-02-17
ZLSwipeableView - A simple view for building card like interface ins... 2017-02-17

 Back to top