一款垃圾中的極品HTML編輯器(兼容IE OR FF)
更新時(shí)間：2007年04月18日 00:00:00 投稿：mdxy-dxy
這篇文章主要介紹了一款垃圾中的極品HTML編輯器(兼容IE OR FF)
這東東實(shí)現(xiàn)了一些常用的功能,今天剛完成,大家多給點(diǎn)建議!
在FF下不完善,有些功能暫時(shí)還沒(méi)實(shí)現(xiàn)!
這也是本人寫(xiě)的第一個(gè)編輯器哦，做得不好，千萬(wàn)別丟雞蛋過(guò)來(lái)．．．
先閃人！
復(fù)制代碼 代碼如下:
/*******************************************
一款垃圾中的極品FreeEditor(2006-08-22)
This JavaScript was writen by CXP.
*******************************************/
var colorType;
var currentMode="Design"; //當(dāng)前模式
var ie=document.all?true:false;
document.onclick=function(){
}
function format(str,arg){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var obj=window.frames["design"];
if(!ie){
var sAlert="";
switch(str){
case "Cut":
sAlert = "你的瀏覽器安全設(shè)置不允許編輯器自動(dòng)執(zhí)行剪切操作,請(qǐng)使用鍵盤(pán)快捷鍵(Ctrl+X)來(lái)完成";
break;
case "Copy":
sAlert = "你的瀏覽器安全設(shè)置不允許編輯器自動(dòng)執(zhí)行拷貝操作,請(qǐng)使用鍵盤(pán)快捷鍵(Ctrl+C)來(lái)完成";
break;
case "Paste":
sAlert = "你的瀏覽器安全設(shè)置不允許編輯器自動(dòng)執(zhí)行粘貼操作,請(qǐng)使用鍵盤(pán)快捷鍵(Ctrl+V)來(lái)完成";
break;
}
if(sAlert!=""){
alert(sAlert);
return;
}
}
obj.focus();
if(arg){
return obj.document.execCommand(str,false,arg);
}
else{
if(ie){
obj.document.execCommand(str);
}
else{
obj.document.execCommand(str,false,false);
}
}
obj.focus();
}
//顯示顏色菜單
function showColorMenu(obj,e){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var target=document.all?e.srcElement:e.target;
var colorMode=target.getAttribute("title");
switch(colorMode){
case "背景顏色":
colorType="BodyBackColor";
break;
case "字體背景顏色":
colorType="backColor";
break;
case "字體顏色":
colorType="foreColor";
break;
default:
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
var db=window.frames["design"].document;
var height=125;
if(colorType=="foreColor"){
height=145;
}
var color=showModalDialog("dialog/color.html",window,"dialogWidth:263px;dialogHeight:"+height+"px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";px");
if(color!=null){
if(colorType=="BodyBackColor"){
db.body.style.backgroundColor=color;
return;
}
else if(colorType=="foreColor"){
var arr=color.split("|");
if(arr.length==2){
format(colorType,arr[0]);
//設(shè)置發(fā)光濾鏡,IEOnly
if(db.selection.type.toLowerCase()!="none"){
var selectText=db.selection.createRange().htmlText;
selectText="<span style=\"height:18px;filter:Glow(color="+arr[0]+",Strength=2);\">"+selectText+"</span>";
insertHTML(selectText);
return;
}
}
}
format(colorType,color);
}
}
else{
if(colorType=="backColor"){
alert(’待完善!’);
return;
}
FFOpenWidnow("dialog/color.html",263,112,top+25,left);
}
}
//顯示插入圖片窗口
function showImageMenu(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
var path=showModalDialog("dialog/image.html","","dialogWidth:390px;dialogHeight:120px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";px");
if(path==null){
return;
}
format("insertImage",path);
}
else{
FFOpenWidnow("dialog/image.html",385,100,top+25,left);
}
}
//顯示插入FLASH窗口
function showFlashMenu(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj);
if(document.all){
var path=showModalDialog("dialog/FLASH.html","","dialogWidth:402px;dialogHeight:139px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+(top+138)+";px");
if(path==null){
return;
}
var arr=path.split("|");
var str="<OBJECT codeBase=’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0’ classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000’ width=’"+arr[1]+"’ height=’"+arr[2]+"’><PARAM NAME=movie VALUE=’"+arr[0]+"’><PARAM NAME=quality VALUE=high><embed src=’"+arr[0]+"’ quality=high pluginspage=’http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash’ type=’application/x-shockwave-flash’ width=’"+arr[1]+"’ height=’"+arr[2]+"’></embed></OBJECT>";
insertHTML(str);
}
else{
alert(’待完善’);
return;
}
}
//顯示插入Face窗口
function showFaceMenu(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/face.html",window,"dialogWidth:280px;dialogHeight:215px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";px");
}
else{
FFOpenWidnow("dialog/face.html",280,180,top+25,left);
}
}
//顯示fieldSet窗口
function showFieldSetMenu(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/fieldSet.html",window,"dialogWidth:330px;dialogHeight:120px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";px");
}
else{
FFOpenWidnow("dialog/fieldSet.html",330,100,top+25,left);
}
}
function getWidth(obj){
var ParentObj=obj;
var left=obj.offsetLeft;
while(ParentObj=ParentObj.offsetParent){
left+=ParentObj.offsetLeft;
}
return left;
}
function getHeight(obj){
var ParentObj=obj;
var top=obj.offsetTop;
while(ParentObj=ParentObj.offsetParent){
top+=ParentObj.offsetTop;
}
return top;
}
function showMediaMenu(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj);
if(document.all){
showModalDialog("dialog/media.html",window,"dialogWidth:330px;dialogHeight:119px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+(top+138)+";");
}
else{
alert(’待完善’);
}
}
//顯示插入文件窗口
function showFileMenu(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/file.html",window,"dialogWidth:390px;dialogHeight:115px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/file.html",380,100,top+25,left);
}
}
function setColor(color){
if(color==""){
return;
}
if(colorType=="BodyBackColor"){
window.frames["design"].document.body.style.backgroundColor=color;
return;
}
format(colorType,color);
}
//插入字幕
function showMarqueeMenu(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/marquee.html",window,"dialogWidth:439px;dialogHeight:260px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/marquee.html",435,220,top+25,left);
}
}
//插入特殊字符
function showSymbolMenu(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/symbol.html",window,"dialogWidth:385px;dialogHeight:235px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/symbol.html",370,190,top+25,left);
}
}
//插入文件
function insertFile(txt){
var arr=txt.split(".");
var fileName=getFileName(arr[arr.length-1]);
var str="<img src=\"img\/file\/"+fileName+"\" border=0><a href=\""+txt+"\" target=\"_blank\">";
arr=txt.split("/");
fileName=arr[arr.length-1];
str+=fileName+"</a>";
var db=window.frames["design"].document;
insertHTML(str);
}
//插入當(dāng)前時(shí)間
function insertTime(b){
var d=new Date();
var year,month,day,hour,minute,second;
year=d.getFullYear();
month=d.getMonth();
day=d.getDate();
hour=d.getHours();
minute=d.getMinutes();
second=d.getSeconds();
var str;
if(b){
str=year+"-"+month+"-"+day;
}
else{
str=hour+":"+minute+":"+second;
}
insertHTML(str);
}
//插入引用
function insertQuote(){
var str="<TABLE style=\"BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted\" cellSpacing=0 cellPadding=6 width=\"95%\" align=center border=0><TBODY><TR><TD style=\"WORD-WRAP: break-word\" bgColor=\"#f3f3f3\" valign=\"top\"><FONT style=\"FONT-WEIGHT: bold; COLOR: green;font-size:13px;\">引用：</FONT><BR></TD></TR></TBODY></TABLE>";
insertHTML(str);
}
//插入單選框
function insertRadio(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/radio.html",window,"dialogWidth:275px;dialogHeight:156px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/radio.html",270,125,top+25,left);
}
}
//插入復(fù)選框
function insertCheckBox(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/checkbox.html",window,"dialogWidth:275px;dialogHeight:156px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/checkbox.html",270,125,top+25,left);
}
}
//插入復(fù)選框
function insertInputText(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/text.html",window,"dialogWidth:275px;dialogHeight:156px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/text.html",270,125,top+25,left);
}
}
//插入多行文本框
function insertTextArea(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/textarea.html",window,"dialogWidth:305px;dialogHeight:250px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/textarea.html",300,250,top+25,left,true);
}
}
//插入表格
function insertTable(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/table.html",window,"dialogWidth:265px;dialogHeight:239px;help:no;status:no;scroll:no;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/table.html",256,210,top+25,left,true);
}
}
//插入下拉列表
function insertSelect(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/select.html",window,"dialogWidth:380px;dialogHeight:250px;help:no;status:no;scroll:auto;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/select.html",380,250,top+25,left);
}
}
//插入按鈕
function insertButton(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/button.html",window,"dialogWidth:239px;dialogHeight:170px;help:no;status:no;scroll:auto;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/button.html",236,139,top+25,left);
}
}
//插入表單
function insertForm(obj){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
var left,top;
left=getWidth(obj);
top=getHeight(obj)+138;
if(document.all){
showModalDialog("dialog/form.html",window,"dialogWidth:239px;dialogHeight:170px;help:no;status:no;scroll:auto;dialogLeft:"+left+";dialogTop:"+top+";");
}
else{
FFOpenWidnow("dialog/form.html",236,139,top+25,left);
}
}
//設(shè)置模式
function setMode(modeType,btnObj){
if(currentMode==modeType){
return;
}
btnObj.style.border="1px solid #000000";
var cObj;
if(currentMode=="Preview"){
cObj=document.getElementById("preview");
}
else if(currentMode=="Design"){
cObj=document.getElementById("design");
}
else{
cObj=document.getElementById("textCode");
}
document.getElementById("bnt"+currentMode).style.border="1px solid #999999";
switch(modeType){
case "Code": //代碼
var obj=document.getElementById("textCode");
var db=window.frames["design"].document.body;
var HTMLCode=db.innerHTML;
//防止FF在沒(méi)有任何代碼前產(chǎn)生的換行
if(HTMLCode=="<br>\n" || HTMLCode=="<br>"){
HTMLCode="";
}
obj.value=HTMLCode;
cObj.style.display="none";
obj.style.display="block";
break;
case "Design": //設(shè)計(jì)
cObj.style.display="none";
document.getElementById("design").style.display="block";
break;
case "Preview":
var obj=window.frames["preview"].document.body;
var db=window.frames["design"].document.body;
obj.style.backgroundColor=db.style.backgroundColor;
if(currentMode=="Code"){
obj.innerHTML=cObj.value;
}
else{
var str=db.innerHTML;
obj.innerHTML=str;
}
cObj.style.display="none";
document.getElementById("preview").style.display="block";
break;
}
currentMode=modeType; //設(shè)置當(dāng)前模式
}
//創(chuàng)建鏈接
function createLink(){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
if(document.all){
format("CreateLink");
}
else{
var str=window.prompt("Enter Link Location (Example:http://www.baidu.com/ or ftp://127.0.0.1/)","http://");
if(str==null || str=="http://" || str=="") return;
format("CreateLink", str);
}
}
//新建
function newPage(){
if(currentMode!="Design"){ //非設(shè)計(jì)模式
return;
}
window.frames["design"].document.body.innerHTML="";
}
//設(shè)置字體
function setFaceFamily(obj){
var val=obj.options[obj.selectedIndex].value;
if(val=="") return;
format("fontname",val);
}
//設(shè)置字號(hào)
function setFaceSize(obj){
var val=obj.options[obj.selectedIndex].text;
if(val=="字號(hào)") return;
format("fontsize",val);
}
function getFileName(str){
str=str.toLowerCase();
var name;
switch(str){
case "avi":
name="avi.gif";
break;
case "bmp":
name="bmp.gif";
break;
case "chm":
name="chm.gif";
break;
case "doc":
name="doc.gif";
break;
case "exe":
name="exe.gif";
break;
case "gif":
name="gif.gif";
break;
case "html":
name="html.gif";
break;
case "htm":
name="html.gif";
break;
case "jpg":
name="jpg.gif";
break;
case "mdb":
name="mdb.gif";
break;
case "mid":
name="mid.gif";
break;
case "mp3":
name="mp3.gif";
break;
case "pdf":
name="pdf.gif";
break;
case "ppt":
name="ppt.gif";
break;
case "rar":
name="rar.gif";
break;
case "rm":
name="rm.gif";
break;
case "rmvb":
name="rm.gif";
break;
case "swf":
name="swf.gif";
break;
case "txt":
name="txt.gif";
break;
case "xls":
name="xls.gif";
break;
case "zip":
name="zip.gif";
break;
default:
name="unknow.gif";
break;
}
return name;
}
function setFocus(){
window.frames["design"].focus();
}
//插入HTML代碼
function insertHTML(str){
if(ie){
setFocus();
window.frames["design"].document.selection.createRange().pasteHTML(str);
}
else{
var newStr=window.frames["design"].document.body.innerHTML;
if(newStr.toLowerCase()=="<br>" || newStr.toLowerCase()=="<br>\n"){
window.frames["design"].document.body.innerHTML=str;
}
else{
window.frames["design"].document.body.innerHTML+=str;
}
}
setFocus();
}
//FF打開(kāi)窗口
function FFOpenWidnow(url,w,h,top,left){
window.open(url,"","location=no,menubar=no,toolbar=no,dependent=yes,dialog=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=no,width="+w+",height="+h+",screenX="+left+",screenY="+top);
}
本地下載
相關(guān)文章
FckEditor 中文配置手冊(cè),對(duì)于fckeditor不是很熟悉的朋友可以看下?？焖俚恼莆者@個(gè)應(yīng)用比較廣泛的網(wǎng)頁(yè)在線編輯器。2009-10-10
FCKEditor SyntaxHighlighter整合實(shí)現(xiàn)代碼高亮顯示
近日做個(gè)小網(wǎng)站，用到了代碼高亮嵌入顯示功能，想將FCKeditor和dp.SyntaxHighlighter結(jié)合使用。2009-06-06
asp.net FCKeditor 2.6.3 配置說(shuō)明
FCKeditor是一個(gè)功能強(qiáng)大支持所見(jiàn)即所得功能的文本編輯器，可以為用戶(hù)提供微軟office軟件一樣的在線文檔編輯服務(wù)。2010-01-01
在使用 UEditor 編輯器 時(shí)遇到了跨域的問(wèn)題，導(dǎo)致無(wú)法發(fā)圖片，原因是由于 iframe 中的 src 跨域造成的2013-06-06
這篇文章主要介紹了UEditor百度編輯器安裝與使用方法分享,需要的朋友可以參考下2017-03-03
FCKeditor 圖片上傳進(jìn)度條不動(dòng)的解決方法
開(kāi)發(fā)的“歷史五千年”網(wǎng)站，使用FCKeditor，在本地上傳圖片一切正常，但昨天晚上實(shí)際向網(wǎng)絡(luò)服務(wù)器（Windows Server 2003）發(fā)送圖片時(shí)，發(fā)送圖像進(jìn)度條一直在滾動(dòng)，無(wú)法關(guān)閉，通過(guò)FTP服務(wù)器查看服務(wù)器，圖片已經(jīng)傳送上去，但這個(gè)滾動(dòng)條卻無(wú)法結(jié)束。2011-08-08
ckeditor syntaxhighlighter代碼高亮插件，完美修復(fù)
昨天匆忙發(fā)了個(gè)更新版，今天去找ckeditor的api文檔看了很久，終于找到解決辦法了2011-08-08
一、部署方式： 1、直接把壓縮目錄中的文件拷貝到您的網(wǎng)站發(fā)布目錄下； 2、配置對(duì)應(yīng)WEB-INF下文件，把eWebEditor文件夾下WEB-INF/web.xml中2008-10-10
解決SyntaxHighlighter 代碼高亮不換行問(wèn)題的解決方法
用SyntaxHighlighter 語(yǔ)法高亮插件的朋友可能都遇到過(guò)代碼顯示不換行的問(wèn)題，這個(gè)問(wèn)題在網(wǎng)上也找不到什么解決辦法，一直困擾了我很久，今天算是把它解決了，辦法其實(shí)簡(jiǎn)單，下面說(shuō)下如何解決2014-11-11
一款支持插入表情的編輯器實(shí)現(xiàn)代碼(簡(jiǎn)單思路挺重要)
先說(shuō)做的是什么哈。 一個(gè)發(fā)言框，功能不多。 要求能插入表情，最終得到的代碼表情不是<img>標(biāo)記，而是類(lèi)似 /:haha 的表情代碼。項(xiàng)目做的時(shí)候有些部分用了Jquery直接上代碼了2010-07-07