javascript实现语法分色编辑器

时间:2010-03-30 16:51:03  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读: <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...
  正文:

最近一段时间忽然想到用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();

javascript实现语法分色编辑器》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13412.html

 1/6    1 2 3 4 5 6 下一页 尾页


关键字:

关于《javascript实现语法分色编辑器》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td