一款垃圾中的极品HTML编辑器(兼容IE OR FF)

这东东实现了一些常用的功能,今天刚完成,大家多给点建议!
在FF下不完善,有些功能暂时还没实现!
这也是本人写的第一个编辑器(处女作哦),做得不好,千万别丢鸡蛋过来...
先闪人!


代码如下:

/*******************************************
  一款垃圾中的极品FreeEditor(2006-08-22)
  This JavaScript was writen by CXP.
*******************************************/
var colorType;
var currentMode="Design";    //当前模式
var ie=document.all?true:false;
document.onclick=function(){    
}
function format(str,arg){
    if(currentMode!="Design"){    //非设计模式
        return;
    }
    var obj=window.frames["design"];
    if(!ie){
        var sAlert="";
        switch(str){
            case "Cut":
                sAlert = "你的浏览器安全设置不允许编辑器自动执行剪切操作,请使用键盘快捷键(Ctrl+X)来完成";
                break;
            case "Copy":
                sAlert = "你的浏览器安全设置不允许编辑器自动执行拷贝操作,请使用键盘快捷键(Ctrl+C)来完成";
                break;
            case "Paste":
                sAlert = "你的浏览器安全设置不允许编辑器自动执行粘贴操作,请使用键盘快捷键(Ctrl+V)来完成";
                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"){    //非设计模式
        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]);
                        //设置发光滤镜,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"){    //非设计模式
        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"){    //非设计模式
        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"){    //非设计模式
        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"){    //非设计模式
        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"){    //非设计模式
        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"){    //非设计模式
        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"){    //非设计模式
        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"){    //非设计模式
        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);
}

//插入当前时间
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"){    //非设计模式
        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);
    }
}

//插入复选框
function insertCheckBox(obj){
    if(currentMode!="Design"){    //非设计模式
        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);
    }
}

//插入复选框
function insertInputText(obj){
    if(currentMode!="Design"){    //非设计模式
        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"){    //非设计模式
        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"){    //非设计模式
        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"){    //非设计模式
        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"){    //非设计模式
        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"){    //非设计模式
        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);
    }
}

//设置模式
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在没有任何代码前产生的换行
            if(HTMLCode=="<br>\n" || HTMLCode=="<br>"){
                HTMLCode="";
            }
            obj.value=HTMLCode;
            cObj.style.display="none";
            obj.style.display="block";
            break;
        case "Design":    //设计    
            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;    //设置当前模式
}

//创建链接
function createLink(){
    if(currentMode!="Design"){    //非设计模式
        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"){    //非设计模式
        return;
    }
    window.frames["design"].document.body.innerHTML="";
}

//设置字体
function setFaceFamily(obj){
    var val=obj.options[obj.selectedIndex].value;
    if(val=="")    return;
    format("fontname",val);
}

//设置字号
function setFaceSize(obj){
    var val=obj.options[obj.selectedIndex].text;
    if(val=="字号")    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打开窗口
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);         
}

本地下载

(0)

相关推荐

  • 一款垃圾中的极品HTML编辑器(兼容IE OR FF)

    这东东实现了一些常用的功能,今天刚完成,大家多给点建议! 在FF下不完善,有些功能暂时还没实现! 这也是本人写的第一个编辑器(处女作哦),做得不好,千万别丢鸡蛋过来... 先闪人! 复制代码 代码如下: /*******************************************   一款垃圾中的极品FreeEditor(2006-08-22)   This JavaScript was writen by CXP. *********************************

  • YII中Ueditor富文本编辑器文件和图片上传的配置图文教程

    将Ueditor集成到YII框架中后,参照editor_config.js中的toolbars中的内容,更改options中标签可以给编辑器添加想要的功能: 因此要想添加文件和图片上传功能,应该加入以下两个标签: 文本编辑器中便出现了对应的两个选项: 但是点击上传图片按钮后发现,无法正常进行图片上传,文件上传也是失败的,问题都是Flash Player需要升级, 因此在火狐浏览器中安装对应的flash player组件,选择其中一个工作: 此时,文件上传和图片上传功能就能正常使用了: 上传路径的

  • 关于在vue 中使用百度ueEditor编辑器的方法实例代码

    1. 安装  npm i vue-ueditor --save-dev 2.从nodemodels  取出ueditor1_4_3_3 这整个目录,放入vue 的 static 目录 3.配置 ueditor.config.js 的  21行代码  更改路径   var URL = '/static/ueditor1_4_3_3/' || getUEBasePath();  (1)     serverUrl: URL + 'php/controller.php',  这里是你配置的上传内容的

  • Linux中Vi和Vim编辑器用法详解

    目录 一.简介 二.安装VIM 美化vim 三.进入 vi\VIM 编辑器 四.工作模式 三种工作模式: 五.退出 vi 编辑器 六.移动光标 七.控制命令 八.编辑文件 撤销命令: 重复命令: 九.删除字符 十.修改文本 十一.粘贴复制 十二.高级命令 十三.文本查找 全文件搜索 部分特殊字符列表: 搜索某行中的单个字符 十四.set 命令 十五.运行命令 十六.文本替换 十七.几点提示 十八.最全VI\Vim快捷键键位图 一.简介 Linux下的文本编辑器有很多种,vi 是最常用的,也是各版

  • 自己写的兼容ie和ff的在线文本编辑器类似ewebeditor

    怎么说呢,刚包完夜吧,应该很累了,但现在仍有力气敲打着这些字符,看来我还没有到此为止啊. 废话少说,最近写了个在线的编辑器,类似ewebeditor那样的,当然没有人家那么强大,但是基本功能都有,而且还是兼容ie和ff的,为此我也花了不少功夫,还是赶紧把代码祭出来吧 demo.html: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

  • 在python3中pyqt5和mayavi不兼容问题的解决方法

    环境: win10 64bit & Linux Mint 18.2 WinPython3.6.1,spyder,qtconsole iep3.7 问题描述: 通过http://www.lfd.uci.edu/~gohlke/pythonlibs/#pyside下载mayavi,pyqt4,vtk等包安装后执行mayavi代码不会出现问题,突然想学pyqt5,就 pip3 install pyqt5 安装了,安装之后重新运行mayavi代码便会出错 错误提示: RuntimeError: Inva

  • 详解vue3中渲染函数的非兼容变更

    目录 渲染函数API变更 Render函数参数 渲染函数签名更改 VNode Props 格式化 slot统一 移除$listeners $attrs现在包括class和style 渲染函数API变更 此更改不会影响到<template>用户 h现在全局导入,而非作为参数传递给渲染函数 渲染函数参数更改为在有状态组件和函数组件之间更加一致 vnode现在又一个扁平的prop结构 Render函数参数 // 2.0 渲染函数 export default { render(h) { return

  • webpack项目中使用vite加速的兼容模式详解

    目录 前言 目的 要处理的问题 动手 共用 index.html 共用配置 兼容环境变量 自动导入 资源引入 svg-sprite-loader 替代方案 其他 效果 前言 随着公司前端工程越来越大,启动是无尽的等待,修改是焦急的等待. vite 到现在生态也起来了,就有了把项目改造成 vite 的想法,但是项目后面可能要依赖 qiankun 改造成微前端项目,现在 qiankun 对 vite 还没有好的解决方法,我就想采取一个折中的办法,保留 webpack,再兼容 vite,两条路都留着.

  • 5款适合PHP使用的HTML编辑器推荐

    概述 Web开发中,很多地方都会用到HTML编辑器(富文本编辑器),我也用过几种,如UEditor.CkEditor等.这几天看了几篇文章,都是关于HTML编辑器的,写个文章记录下. 推荐的编辑器 simditor 这个编辑器是前几天刚看到的,自己还没来得及使用,但是一下子就喜欢上了这个编辑器的样式. Simditor是Tower开源的所见即所得的在线富文本编辑器.Simditor的理念是保持简单,避免过度的功能,每一个特性都追求极致的用户体验.同时,Simditor也很容易扩展. TinyMC

  • 几款好用的前端开发编辑器推荐安利

    目录 一,VSCode 二,Sublime Text! 三,webStrom 四,Atom 五,Brackets 六,HBuilder 七,CodePen 八,runJs 一,VSCode 微软出厂的高颜值编辑器 VSCode官网 1.加载大文件几乎秒开,运行速度很快 2.跨平台的文本编辑器,内置了对许多主流语言的支持 3.非常方便的管理插件,可以快速找到适合自己的前端插件 4.完全免费(非常推荐) 二,Sublime Text! Sublime Text 是一个文本编辑器(收费软件,可以无限期

随机推荐