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

成熟的html在线编辑器已经有很多了，例如eWebEditor，以及国外的FCKEditor，等等。
这里是我前段时间自己写的一个极其简单的html编辑器，其宗旨是在实现基本功能的前提下越简单越好，所以最后核心js文件大小只有8.81k。

使用方法非常简单，先建立一个textarea，然后用js将HTMLEditor对象绑定到textarea上即可。
<textarea name="testbox" id="testbox"></textarea>
<script language="javascript">
    var h = new HTMLEditor("htmlbox",testbox,"100%",300);
</script>

下面是完整的核心js文件代码：
==================================================
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='<div style="width:100%;height:21px;padding-top:5px;"></div><div style="width:100%;top:30px;height:'+(h-50)+'px;"></div><div style="width:100%;top:50px;height:'+(h-50)+'px;display:none;font-size:9pt;"></div><div style="width:100%;height:15px;font-size:9pt;padding-top:5px;"><span style="padding:5px 5px 5px 5px;cursor:hand;" onclick=HTMLEditor_changeMode("'+this.id+'","design")>Design</span>  <span style="padding:5px 5px 5px 5px; color:#DDDDDD;cursor:hand;" onclick=HTMLEditor_changeMode("'+this.id+'","html")>HTML</span></div>';
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.onfocus=function(){try{this.currPos = document.selection.createRange().duplicate()}catch(e){}};
this.HTMLobj.onclick=function(){try{this.currPos = document.selection.createRange().duplicate()}catch(e){}};
this.HTMLobj.onkeyup=function(){this.parentNode.parentObj.refresh();this.currPos = document.selection.createRange().duplicate()};
this.HTMLobj.onchange=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("<p>Please input some words here...</p>");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<atoolbar.length;i++)    this.addToolButton(atoolbar[i]);
var lv='<option value="">Font Size</option>';
for (var i=1;i<=7;i++)lv+='<option value='+i+'>'+i+'</option>';
this.obj.children[0].innerHTML+='<span style="font-size:9pt;position:relative;top:-5px;left:5px;"><select onchange=\'HTMLEditor_toolbarClick("'+this.id+'","FontSize",this.value);this.selectedIndex=0;\'>'+lv+'</select></span>';
lv='<option value="">Font Color</option>';
var acolor=new Array("Black","Silver","Gray","White","Maroon","Red","Purple","Fuchsia","Green","Lime","Olive","Yellow","Navy","Blue","Teal","Aqua");
for (i=0;i<acolor.length;i++) lv+='<option value="'+acolor[i]+'" style="background-color: '+acolor[i]+'">'+acolor[i]+'</option>';
this.obj.children[0].innerHTML+='<span style="font-size:9pt;position:relative;top:-5px;left:5px;"><select onchange=\'HTMLEditor_toolbarClick("'+this.id+'","FontColor",this.value);this.selectedIndex=0;\'>'+lv+'</select></span>';
lv='<option value="">Font Name</option>';
var afont=new Array("Arial","Comic Sans MS","Courier New","Tahoma","Times New Roman","Verdana");
for (i=0;i<afont.length;i++) lv+='<option value="'+afont[i]+'" style="font-family:'+afont[i]+';">'+afont[i]+'</option>';
this.obj.children[0].innerHTML+='<span style="font-size:9pt;position:relative;top:-5px;left:5px;"><select onchange=\'HTMLEditor_toolbarClick("'+this.id+'","FontName",this.value);this.selectedIndex=0;\'>'+lv+'</select></span>';
lv='<option value="">Characters</option>';
var ach=new Array("™","©","®","¢","€","¥","£","¤","∫","∑","∏","√","−","±","∞","≈","∝","≡","≠","≤","≥","→","×","·","÷","∂","′","″","∇","‰","°","∴","ℵ","ø","∈","∉","∩","∪","⊂","⊃","⊆","⊇","¬","∧","∨","∃","∀","⇒","⇔","→","↔","α","β","γ","δ","ε","ζ","η","θ","ι","κ","λ","μ","ν","ξ","ο","π","ρ"," σ","ς","τ","υ","φ","χ","ψ","ω","Γ","Δ","Θ","Λ","Ξ","Π","Σ","Φ","Ψ","Ω");
for (i=0;i<ach.length;i++) lv+='<option value="'+ach[i]+'">'+ach[i]+'</option>';
this.obj.children[0].innerHTML+='<span style="font-size:9pt;position:relative;top:-5px;left:5px;"><select onchange=\'HTMLEditor_toolbarClick("'+this.id+'","Characters",this.value);this.selectedIndex=0;\'>'+lv+'</select></span>';}
this.init();}
HTMLEditor.prototype.setValue = function (v){this.value=v;this.Textobj.innerText=v;this.HTMLobj.innerHTML=v;this.refreshBind();}
HTMLEditor.prototype.getValue = function (){return this.value;}
HTMLEditor.prototype.bind = function (obj){this.bindObj=obj;}
HTMLEditor.prototype.refresh=function(){this.value=this.HTMLobj.innerHTML;this.refreshBind();}
HTMLEditor.prototype.doAction=function(cmd,para){HTMLEditor_toolbarClick(this.id,cmd,para);}
HTMLEditor.prototype.refreshBind = function (){if(this.bindObj.tagName=="INPUT") this.bindObj.value=this.value; else this.bindObj.innerText=this.value;}
HTMLEditor.prototype.addToolButton = function (cmd){var h='<span style="padding:1px 1px 1px 1px;cursor: default;" title="'+cmd+'" onclick=HTMLEditor_toolbarClick("'+this.id+'","'+cmd+'") onmouseover="this.parentNode.OnMoveObj=this;"><img border=0 src="images/button.'+cmd.toLowerCase()+'.gif"></span>';this.obj.children[0].innerHTML+=h;}
function HTMLEditor_toolbarClick(id,cmd,para){
var editor=document.getElementById(id).parentObj;if (editor.mode!="design")return;
var edit = document.selection.createRange();
if (cmd=="Bold"||cmd=="Italic"||cmd=="Underline"||cmd=="StrikeThrough"||cmd=="Subscript"||cmd=="Superscript"||cmd=="JustifyCenter"||cmd=="JustifyFull"||cmd=="JustifyLeft"||cmd=="JustifyRight"||cmd=="RemoveFormat")
{if (!edit.text=="")    edit.execCommand(cmd);    else alert("Please select some text first!");}    
else if (cmd == "FontColor")
{if (para != "") edit.execCommand("ForeColor", false, para);}        
else if (cmd == "FontSize")
{if (para != "") edit.execCommand("FontSize", false, para);}
else if (cmd == "FontName")
{if (para != "") edit.execCommand("FontName", false, para);}
else if (cmd == "Image")
{var arg = window.showModalDialog("img-dialog.htm", editor, "dialogHeight: 150px; dialogWidth: 350px;dialogLeft: 250px; dialogTop: 250px; edge: Raised; center: Yes; help: No; resizable: No; status: Yes;");}
else if (cmd=="InsertImage")
{if (para[1]!=""||para[1]!=undefined) alt=' alt="'+para[1]+'"'; else alt='';
    if (editor.HTMLobj.currPos) editor.HTMLobj.currPos.pasteHTML('<img border=0 src="'+para[0]+'"'+alt+'>'); else editor.HTMLobj.innerHTML+='<img border=0 src="'+para[0]+'"'+alt+'>';}
else if (cmd== "CreateLink")
{if (!edit.text=="") edit.execCommand("CreateLink");else alert("Please select some blue text!");}
else if (cmd== "About")
{alert("Mini-HTML Editor\nCreated by wayne.\nIf you have any question please contact me by mail: w.deng@bciasia.com.cn");}
else if (cmd== "MoveLink"){
    if (!edit.text==""){
        if (edit.parentElement().tagName=="A"){var t=edit.parentElement().innerText;edit.parentElement().removeNode(true);edit.text=t;}}
    else
        alert("Please select some blue text of the link!");}
else if (cmd=="Characters")
{if (editor.HTMLobj.currPos) editor.HTMLobj.currPos.text=para; else editor.HTMLobj.innerHTML+=para;}
editor.refresh();}

function HTMLEditor_changeMode(id,mode){
var editor=document.getElementById(id).parentObj;
if (mode=="html")
{with (editor){setValue(editor.HTMLobj.innerHTML);HTMLobj.style.display="none";Textobj.style.display="block";mode="html";Textobj.focus();obj.children[3].children[0].style.color="#dddddd";obj.children[3].children[1].style.color="#000000";obj.children[0].style.filter="Gray() progid:DXImageTransform. Microsoft.Alpha(opacity=20)";obj.children[0].disabled=true;}}
else{with (editor){setValue(editor.Textobj.innerText);Textobj.style.display="none";HTMLobj.style.display="block";mode="design";obj.children[3].children[1].style.color="#dddddd";obj.children[3].children[0].style.color="#000000";obj.children[0].style.filter="";obj.children[0].disabled=false;HTMLobj.focus();}}
editor.value=editor.HTMLobj.innerHTML;}
==============================================================

♡ 点赞 0

☆ 收藏 0

留言区（共0条）