hardwrap.html (2572B)
1 <!doctype html> 2 3 <title>CodeMirror: Hard-wrapping Demo</title> 4 <meta charset="utf-8"/> 5 <link rel=stylesheet href="../doc/docs.css"> 6 7 <link rel="stylesheet" href="../lib/codemirror.css"> 8 <script src="../lib/codemirror.js"></script> 9 <script src="../mode/markdown/markdown.js"></script> 10 <script src="../addon/wrap/hardwrap.js"></script> 11 <style type="text/css"> 12 .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;} 13 </style> 14 <div id=nav> 15 <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> 16 17 <ul> 18 <li><a href="../index.html">Home</a> 19 <li><a href="../doc/manual.html">Manual</a> 20 <li><a href="https://github.com/codemirror/codemirror">Code</a> 21 </ul> 22 <ul> 23 <li><a class=active href="#">Hard-wrapping</a> 24 </ul> 25 </div> 26 27 <article> 28 <h2>Hard-wrapping Demo</h2> 29 <form><textarea id="code" name="code">Lorem ipsum dolor sit amet, vim augue dictas constituto ex, 30 sit falli simul viderer te. Graeco scaevola maluisset sit 31 ut, in idque viris praesent sea. Ea sea eirmod indoctum 32 repudiare. Vel noluisse suscipit pericula ut. In ius nulla 33 alienum molestie. Mei essent discere democritum id. 34 35 Equidem ponderum expetendis ius in, mea an erroribus 36 constituto, congue timeam perfecto ad est. Ius ut primis 37 timeam, per in ullum mediocrem. An case vero labitur pri, 38 vel dicit laoreet et. An qui prompta conclusionemque, eam 39 timeam sapientem in, cum dictas epicurei eu. 40 41 Usu cu vide dictas deseruisse, eum choro graece adipiscing 42 ut. Cibo qualisque ius ad, et dicat scripta mea, eam nihil 43 mentitum aliquando cu. Debet aperiam splendide at quo, ad 44 paulo nostro commodo duo. Sea adhuc utinam conclusionemque 45 id, quas doming malorum nec ad. Tollit eruditi vivendum ad 46 ius, eos soleat ignota ad. 47 </textarea></form> 48 49 <p>Demonstration of 50 the <a href="../doc/manual.html#addon_hardwrap">hardwrap</a> addon. 51 The above editor has its change event hooked up to 52 the <code>wrapParagraphsInRange</code> method, so that the paragraphs 53 are reflown as you are typing.</p> 54 55 <script> 56 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 57 mode: "markdown", 58 lineNumbers: true, 59 extraKeys: { 60 "Ctrl-Q": function(cm) { cm.wrapParagraph(cm.getCursor(), options); } 61 } 62 }); 63 var wait, options = {column: 60}, changing = false; 64 editor.on("change", function(cm, change) { 65 if (changing) return; 66 clearTimeout(wait); 67 wait = setTimeout(function() { 68 changing = true; 69 cm.wrapParagraphsInRange(change.from, CodeMirror.changeEnd(change), options); 70 changing = false; 71 }, 200); 72 }); 73 </script> 74 75 </article>