javascript实现语法分色编辑器...(同时支持动态读取对象方法)[1]

[入库:2005年8月18日] [更新:2007年3月25日]

本文简介:选择自 yanwl 的 blog

最近一段时间忽然想到用javascript理论上可以实现一个复杂的在线编辑器,完全能够支持词法、语法方面的功能,于是试验了一下...效率和简易程度还是令人吃惊的,看来javascript比想象的还要强大...

<html>
 <head>
  <title>silverna demo ver 0.01</title>
  <style>
   div.editbox{
    margin:0 0 0 0;
    padding:0 0 0 0;
    font:16/18px arial;
    border:0px solid #000000;
   }
   p{
    margin:0 0 0 0;
    padding:0 0 0 0;
   }
  </style>
 </head>

 <body style="margin:0 0 0 0;padding:0 0 0 0;word-break:break-all;overflow-x:hidden" onload="editbox.focus()">
 <div id="editbox" class="editbox" style="width:99%;height:80%;" contenteditable="true" onkeydown="return keydown()" onkeyup="keyup()" onclick="getcursorposition()">
 </div>
 <select size="10" style="display:none;position:absolute" id="methods" onkeydown="selectmethod()" onclick="selmethod(this)">
 </body>
</html>


</select>
<script language=jscript>
var testarray = new array();
var testdate = new date();
var teststring = "aaa";
var testval = 1;
var testobj = new myobj;

function myobj()
{
     myobj.prototype.testfunc = function(){};
  this.testproperty = "test";
}
function keydown()
{
 //alert(event.altkey);
 if(event.keycode == 9) //tab 键
 {
  clipboarddata.setdata('text','    ');
  event.srcelement.document.execcommand('paste');
  return false;  
 }
 if(event.keycode == 8) //backspace 键
 {
  var osel = document.selection.createrange();
  var offset = event.srcelement.document.selection.createrange();
  offset.movetopoint(osel.offsetleft, osel.offsettop);
  offset.movestart('character', -4);
  if(offset.text.length < 4) return true;
  for (var i = 0; i < offset.text.length; i++)
  {
   if (offset.text.charat(i) != " ")
   {
    return true;
   }
  }
  offset.select();
  event.srcelement.document.execcommand('delete');
  return false;  
 }
 return true;
}

function keyup()
{
 var osel, offset;
 if(event.keycode == 13)
 {
  teststr = event.srcelement.innertext.substring(0, getcursorposition());
  //alert(teststr);
  var space = "";
  for (var i = teststr.length - 1; i >= 0; i--)
  {
   //alert(teststr.length+":"+teststr.charat(i) + ":" + space.length);
   if (teststr.charat(i) == "\n") break;
   if (teststr.charat(i) == " ")
    space += " ";
   else
    space = "";
  }
  //alert(teststr);
  clipboarddata.setdata('text',space);
  event.srcelement.document.execcommand('paste');
 }
 osel = document.selection.createrange();
 var left = osel.offsetleft;
 var top = osel.offsettop;
    var token = getcurrenttoken(event.srcelement);
 var chars = getcursorposition();

 parsesyntax(event.srcelement);
 offset = event.srcelement.document.selection.createrange();
 offset.movetopoint(left, top);
 offset.select();

 if(event.keycode == 190) //.键
 {
  setmethods(token.postok.slice(0, -1));
 }
}

本文关键:javascript实现语法分色编辑器...(同时支持动态读取对象方法)
  相关方案
Google
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top