1 <!DOCTYPE html>2 <html>3 <head>4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">5 <title></title>6 <script type="text/javascript">7 8 window.addEventListener('load', function(event){9 initialize();10 }, true);11 12 13 var initialize = function() {14 div_editor = document.getElementById('editor');15 newEditor(div_editor);16 };17 18 var newEditor = function(dom) {19 20 var logger = document.createElement('div');21 logger.setAttribute('style', 'border:solid silver; position:absolute; top:0; right:0; bottom:0; width:300px; padding:2px; font-family:monospace; overflow-y:auto;');22 dom.appendChild(logger);23 24 var code = document.createElement('div');25 code.setAttribute('style', 'border:solid lightblue; position:absolute; top:0; right:350px; left:0; bottom:0; overflow:auto; padding:4px; background-color:#F8F8F8;');26 dom.appendChild(code);27 28 var editor = document.createElement('div');29 editor.setAttribute('style', 'height:100%; width:100%; overflow-y:auto; overflow-x:auto; font-family:monospace; font-size:15px; outline:none;');30 editor.setAttribute('contentEditable', true);31 code.appendChild(editor);32 editor.type = 'top';33 editor.focus();34 35 36 editor.addEventListener('keyup', function(event){37 var selection = window.getSelection();38 ////////////////////////////39 // Controlador de eventos40 //////////////////////////41 42 // 1) busco un nodo editable (o el top)43 var n = selection.anchorNode;44 while (n.type == undefined) {45 n = n.parentNode;46 }47 switch (n.type) {48 case 'top':49 log('es un top ! (hago algo)');50 break;51 default:52 log('no hago nada');53 break;54 };55 56 57 /////////58 // LOG59 /////////60 if (event.ctrlKey) {61 if (event.keyCode!= 17) log('control '+event.keyCode);62 if (event.keyCode == 49) {63 64 selection.anchorNode.parentNode.setAttribute('style', 'color:red;');65 }66 } else {67 var selection = window.getSelection().anchorNode;68 //alert(selection);69 70 log(selection.nodeType);71 72 /*log('==================================');73 for (key in selection) {74 log(key + ' = ' + selection[key]);75 }*/76 }77 }, true);78 79 80 var log = function(text) {81 var line = document.createElement('div');82 line.setAttribute('style', 'border-bottom:dotted silver 1px;');83 line.innerHTML = text;84 if(logger.firstChild==null) {85 logger.appendChild(line);86 } else {87 logger.insertBefore(line, logger.firstChild);88 }89 };90 91 92 log ('TreeCoder');93 94 95 };96 97 98 99 </script>100 </head>101 <body>102 103 <div id="editor">104 105 </div> 106 107 </body>108 </html>109 Enlace
El enlace para compartir es: