Nuestro conocimiento compartido. Nuestro tesoro compartido. Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

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: