karmaworld/apps/wysihtml5/static/wysihtml5/wysihtml-0.4.17/examples/advanced.html

   1 <!DOCTYPE html>
   2
   3 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
   4 <meta charset="utf-8">
   5
   6 <title>wysihtml5 - Advanced Demo</title>
   7
   8 <style>
   9   body {
  10     font-family: Verdana;
  11     font-size: 11px;
  12   }
  13
  14   h2 {
  15     margin-bottom: 0;
  16   }
  17
  18   small {
  19     display: block;
  20     margin-top: 40px;
  21     font-size: 9px;
  22   }
  23
  24   small,
  25   small a {
  26     color: #666;
  27   }
  28
  29   a {
  30     color: #000;
  31     text-decoration: underline;
  32     cursor: pointer;
  33   }
  34
  35   #toolbar [data-wysihtml5-action] {
  36     float: right;
  37   }
  38
  39   #toolbar,
  40   textarea {
  41     width: 920px;
  42     padding: 5px;
  43     -webkit-box-sizing: border-box;
  44     -ms-box-sizing: border-box;
  45     -moz-box-sizing: border-box;
  46     box-sizing: border-box;
  47   }
  48
  49   textarea {
  50     height: 280px;
  51     border: 2px solid green;
  52     font-family: Verdana;
  53     font-size: 11px;
  54   }
  55
  56   textarea:focus {
  57     color: black;
  58     border: 2px solid black;
  59   }
  60
  61   .wysihtml5-command-active {
  62     font-weight: bold;
  63   }
  64
  65   [data-wysihtml5-dialog] {
  66     margin: 5px 0 0;
  67     padding: 5px;
  68     border: 1px solid #666;
  69   }
  70
  71   a[data-wysihtml5-command-value="red"] {
  72     color: red;
  73   }
  74
  75   a[data-wysihtml5-command-value="green"] {
  76     color: green;
  77   }
  78
  79   a[data-wysihtml5-command-value="blue"] {
  80     color: blue;
  81   }
  82 </style>
  83
  84 <h1>wysihtml5 - Advanced Editor Example</h1>
  85
  86 <form class="ewrapper">
  87   <div class="toolbar" style="display: none;">
  88     <a data-wysihtml5-command="bold" title="CTRL+B">bold</a> |
  89     <a data-wysihtml5-command="italic" title="CTRL+I">italic</a> |
  90     <a data-wysihtml5-command="createLink">link</a> |
  91     <a data-wysihtml5-command="removeLink"><s>link</s></a> |
  92     <a data-wysihtml5-command="insertImage">insert image</a> |
  93     <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a> |
  94     <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a> |
  95     <a data-wysihtml5-command="insertUnorderedList">insertUnorderedList</a> |
  96     <a data-wysihtml5-command="insertOrderedList">insertOrderedList</a> |
  97     <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a> |
  98     <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a> |
  99     <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a> |
 100     <a data-wysihtml5-command="formatCode" data-wysihtml5-command-value="language-html">Code</a> |
 101     <a data-wysihtml5-command="undo">undo</a> |
 102     <a data-wysihtml5-command="redo">redo</a> |
 103     <a data-wysihtml5-command="insertSpeech">speech</a>
 104     <a data-wysihtml5-action="change_view">switch to html view</a>
 105
 106     <div data-wysihtml5-dialog="createLink" style="display: none;">
 107       <label>
 108         Link:
 109         <input data-wysihtml5-dialog-field="href" value="http://">
 110       </label>
 111       <a data-wysihtml5-dialog-action="save">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">Cancel</a>
 112     </div>
 113
 114     <div data-wysihtml5-dialog="insertImage" style="display: none;">
 115       <label>
 116         Image:
 117         <input data-wysihtml5-dialog-field="src" value="http://">
 118       </label>
 119       <label>
 120         Align:
 121         <select data-wysihtml5-dialog-field="className">
 122           <option value="">default</option>
 123           <option value="wysiwyg-float-left">left</option>
 124           <option value="wysiwyg-float-right">right</option>
 125         </select>
 126       </label>
 127       <a data-wysihtml5-dialog-action="save">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">Cancel</a>
 128     </div>
 129
 130   </div>
 131   <textarea class="editable" placeholder="Enter text ..."></textarea>
 132   <br><input type="reset" value="Reset form!">
 133 </form>
 134
 135 <br/><br>asdasdasd:<br/>
 136 <form class="ewrapper">
 137   <div class="toolbar" style="display: none;">
 138     <a data-wysihtml5-command="bold" title="CTRL+B">bold</a> |
 139     <a data-wysihtml5-command="italic" title="CTRL+I">italic</a> |
 140     <a data-wysihtml5-command="createLink">link</a> |
 141     <a data-wysihtml5-command="removeLink"><s>link</s></a> |
 142     <a data-wysihtml5-command="insertImage">insert image</a> |
 143     <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">h1</a> |
 144     <a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">h2</a> |
 145     <a data-wysihtml5-command="insertUnorderedList">insertUnorderedList</a> |
 146     <a data-wysihtml5-command="insertOrderedList">insertOrderedList</a> |
 147     <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="red">red</a> |
 148     <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="green">green</a> |
 149     <a data-wysihtml5-command="foreColor" data-wysihtml5-command-value="blue">blue</a> |
 150     <a data-wysihtml5-command="undo">undo</a> |
 151     <a data-wysihtml5-command="redo">redo</a> |
 152     <a data-wysihtml5-command="insertSpeech">speech</a>
 153     <a data-wysihtml5-action="change_view">switch to html view</a>
 154
 155     <div data-wysihtml5-dialog="createLink" style="display: none;">
 156       <label>
 157         Link:
 158         <input data-wysihtml5-dialog-field="href" value="http://">
 159       </label>
 160       <a data-wysihtml5-dialog-action="save">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">Cancel</a>
 161     </div>
 162
 163     <div data-wysihtml5-dialog="insertImage" style="display: none;">
 164       <label>
 165         Image:
 166         <input data-wysihtml5-dialog-field="src" value="http://">
 167       </label>
 168       <label>
 169         Align:
 170         <select data-wysihtml5-dialog-field="className">
 171           <option value="">default</option>
 172           <option value="wysiwyg-float-left">left</option>
 173           <option value="wysiwyg-float-right">right</option>
 174         </select>
 175       </label>
 176       <a data-wysihtml5-dialog-action="save">OK</a>&nbsp;<a data-wysihtml5-dialog-action="cancel">Cancel</a>
 177     </div>
 178
 179   </div>
 180   <textarea class="editable" placeholder="Enter text ..."></textarea>
 181   <br><input type="reset" value="Reset form!">
 182 </form>
 183
 184 <h2>Events:</h2>
 185 <div id="log"></div>
 186
 187 <small>powered by <a href="https://github.com/xing/wysihtml5" target="_blank">wysihtml5</a>.</small>
 188
 189 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 190
 191 <script src="../parser_rules/advanced_unwrap.js"></script>
 192 <script src="../dist/wysihtml5x-toolbar.min.js"></script>
 193 <script>
 194 var editors = [];
 195
 196   $('.ewrapper').each(function(idx, wrapper) {
 197     var e = new wysihtml5.Editor($(wrapper).find('.editable').get(0), {
 198       toolbar:        $(wrapper).find('.toolbar').get(0),
 199       parserRules:    wysihtml5ParserRules,
 200       stylesheets:  "css/stylesheet.css"
 201       //showToolbarAfterInit: false
 202     });
 203     editors.push(e);
 204   });
 205
 206
 207   /*
 208   var editor = new wysihtml5.Editor("textarea", {
 209     toolbar:        "toolbar",
 210     stylesheets:    "css/stylesheet.css",
 211     parserRules:    wysihtml5ParserRules
 212   });
 213
 214   var log = document.getElementById("log");
 215
 216   editor
 217     .on("load", function() {
 218       log.innerHTML += "<div>load</div>";
 219     })
 220     .on("focus", function() {
 221       log.innerHTML += "<div>focus</div>";
 222     })
 223     .on("blur", function() {
 224       log.innerHTML += "<div>blur</div>";
 225     })
 226     .on("change", function() {
 227       log.innerHTML += "<div>change</div>";
 228     })
 229     .on("paste", function() {
 230       log.innerHTML += "<div>paste</div>";
 231     })
 232     .on("newword:composer", function() {
 233       log.innerHTML += "<div>newword:composer</div>";
 234     })
 235     .on("undo:composer", function() {
 236       log.innerHTML += "<div>undo:composer</div>";
 237     })
 238     .on("redo:composer", function() {
 239       log.innerHTML += "<div>redo:composer</div>";
 240     });*/
 241 </script>