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