基于textarea的最简单的html在线编辑器,基于textarea的html在线编辑器

var h = new

HTMLEditor("htmlbox",testbox,"100%",300);

下面是完整的核心js文件代码：

[code]

function

HTMLEditor(id,bindObj,w,h,value)

{this.id=id;this.width=w;this.height= h;this.obj= null;this.Textobj

= null;this.HTMLobj=null;this.body = null;this.value =

value;this.mode= "design";this.bindObj=

bindObj;this.ImagePath="";this.host="http://"+window.location.host;

this.init = function (){

bindObj.style.display="none";this.obj =

document.createElement("div");this.obj.id = this.id;this.obj.name =

this.id;this.obj.parentObj =

this;this.obj.style.width=w;this.obj.style.height=h;this.obj.style.backgroundColor="#FFFFFF";

this.obj.innerHTML='

style="width:100%;height:21px;padding-top:5px;">

style="width:100%;top:30px;height:'+(h-50)+'px;">

style="width:100%;top:50px;height:'+(h-50)+'px;display:none;font-size:9pt;">

style="width:100%;height:15px;font-size:9pt;padding-top:5px;">

style="padding:5px 5px 5px 5px;cursor:hand;"

οnclick=HTMLEditor_changeMode("'+this.id+'","design")>Design

 

style="padding:5px 5px 5px 5px; color:#DDDDDD;cursor:hand;"

οnclick=HTMLEditor_changeMode("'+this.id+'","html")>HTML

';

this.Textobj=this.obj.children[2];this.Textobj.style.border="1px

solid #000000";this.Textobj.style.padding="10px 10px 10px

10px";this.Textobj.style.overflow="auto";this.Textobj.contentEditable="true";

this.HTMLobj=this.obj.children[1];this.HTMLobj.style.border="1px

solid

#000000";this.HTMLobj.style.overflow="auto";this.HTMLobj.style.padding="10px

10px 10px 10px";this.HTMLobj.contentEditable="true";

this.HTMLobj.οnfοcus=function(){try{this.currPos =

document.selection.createRange().duplicate()}catch(e){}};

this.HTMLobj.οnclick=function(){try{this.currPos =

document.selection.createRange().duplicate()}catch(e){}};

this.HTMLobj.οnkeyup=function(){this.parentNode.parentObj.refresh();this.currPos

= document.selection.createRange().duplicate()};

this.HTMLobj.οnchange=function(){this.currPos =

document.selection.createRange().duplicate()};

bindObj.parentNode.appendChild(this.obj);

this.obj.children[0].onmousemove = function() {if

(this.OldObj!=undefined) this.OldObj.style.border="";if

(this.OnMoveObj!=undefined){this.OnMoveObj.style.border="1px solid

#000000";this.OldObj=this.OnMoveObj;}}

this.obj.children[0].onmouseout = function() {if

(this.OnMoveObj!=undefined)this.OnMoveObj.style.border="";}

this.loadToolBar(); this.setValue("

Please

input some words here...

");this.HTMLobj.focus();}

this.loadToolBar = function (){

var atoolbar=new

Array("RemoveFormat","Bold","Italic","Underline","StrikeThrough","Subscript","Superscript","CreateLink","MoveLink","JustifyCenter","JustifyFull","JustifyLeft","JustifyRight","Image","About");

for

(i=0;i

var lv='Font Size';

for (var i=1;i<=7;i++)lv+='

value='+i+'>'+i+'

';

this.obj.children[0].innerHTML+='

style="font-size:9pt;position:relative;top:-5px;left:5px;">

οnchange=\'HTMLEditor_toolbarClick("'+this.id+'","FontSize",this.value);this.selectedIndex=0;\'>'+lv+'

';

lv='Font Color';

var acolor=new

Array("Black","Silver","Gray","White","Maroon","Red","Purple","Fuchsia","Green","Lime","Olive","Yellow","Navy","Blue","Teal","Aqua");

for (i=0;i

value="'+acolor[i]+'" style="background-color:

'+acolor[i]+'">'+acolor[i]+'';

this.obj.children[0].innerHTML+='

style="font-size:9pt;position:relative;top:-5px;left:5px;">

οnchange=\'HTMLEditor_toolbarClick("'+this.id+'","FontColor",this.value);this.selectedIndex=0;\'>'+lv+'

';

lv='Font Name';

var afont=new Array("Arial","Comic Sans MS","Courier

New","Tahoma","Times New Roman","Verdana");

for (i=0;i

value="'+afont[i]+'"

style="font-family:'+afont[i]+';">'+afont[i]+'';

this.obj.children[0].innerHTML+='

style="font-size:9pt;position:relative;top:-5px;left:5px;">

οnchange=\'HTMLEditor_toolbarClick("'+this.id+'","FontName",this.value);this.selectedIndex=0;\'>'+lv+'

';

lv='Characters';

var ach=new

Array(""","","","","","","","¤","∫","∑","∏","√","

分享：

喜欢

0

赠金笔

加载中，请稍候......

评论加载中，请稍候...

发评论

登录名： 密码： 找回密码 注册记住登录状态

昵   称：

评论并转载此博文

发评论

以上网友发言只代表其个人观点，不代表新浪网的观点或立场。