zoukankan      html  css  js  c++  java
  • 学习js在线html(富文本)编辑器

    你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤:

    1,需要一个可以编辑同时又可显效果的编辑框。textarea不行,它只能用来输入纯文本,不能显示颜色、斜体之类的文字样式,就像记事本。
    你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑。

    <iframe id="myEditer" width="100%" height="150px"></iframe>
    <script>myEditer.document.designMode = 'on';</script>

    这样你就可以在这个iframe区域里写字了。

    2,选中要添加样式的文字。通常我们用WORD编辑一段文字的样式时,一般是先打字,再编辑样式。所以你需要一个选中要处理文本的方法。JS的selection.createRange()可以选中文本,返回一个对象,你可以通过访问该对象的text属性得到被选中的文本。

    <iframe id="myEditer" width="100%" height="150px"></iframe>
    <input type="button" value="加粗" onclick="Bold()">
    <script>
    myEditer.document.designMode = 'on';
    function Bold(){
    var sel = myEditer.document.selection.createRange();
    alert(sel.text);
    }
    </script>

    3,改变被选中文本的样式。selection.createRange()选中文本,返回一个对象,该对象有一个方法execCommand(),可以用来改变被选中文本的样式。

    <iframe id="myEditer" width="100%" height="150px"></iframe>
    <input type="button" value="加粗" onclick="Bold()">
    <script>
    myEditer.document.designMode = 'on';
    function Bold(){
    var sel = myEditer.document.selection.createRange();
    //alert(sel.text);
    sel.execCommand("Bold")
    }
    </script>

    execCommand()的常用用法:
    字体--宋体、黑体、楷体等
    execCommand("fontname","",字体)
    字号--字号大小
    execCommand("fontsize","",字号)
    加重
    execCommand("Bold")
    斜体
    execCommand("Italic")
    下划线
    execCommand("Underline")
    删除线
    execCommand("StrikeThrough")
    居左
    execCommand("JustifyLeft")
    居右
    execCommand("JustifyRight")
    居中
    execCommand("JustifyCenter")
    剪切
    execCommand("Cut")
    拷贝
    execCommand("Copy")
    粘贴
    execCommand("Paste")
    取消操作--IE5.0以后可以无限取消
    execCommand("Undo")
    重复操作
    execCommand("Redo")

    把上面的每个用法用按钮来实现,你就已经完成了一个简单的可视文本编辑器。

    document.execCommand()用法说明

    View Code
    Position 允许通过拖曳移动绝对定位的对象。 
    AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。 
    BackColor 设置或获取当前选中区的背景颜色。 
    BlockDirLTR 目前尚未支持。 
    BlockDirRTL 目前尚未支持。 
    Bold 切换当前选中区的粗体显示与否。 
    BrowseMode 目前尚未支持。 
    Copy 将当前选中区复制到剪贴板。 
    CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。 
    CreateLink 在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。 
    Cut 将当前选中区复制到剪贴板并删除之。 
    Delete 删除当前选中区。 
    DirLTR 目前尚未支持。 
    DirRTL 目前尚未支持。 
    EditMode 目前尚未支持。 
    FontName 设置或获取当前选中区的字体。 
    FontSize 设置或获取当前选中区的字体大小。 
    ForeColor 设置或获取当前选中区的前景(文本)颜色。 
    FormatBlock 设置当前块格式化标签。 
    Indent 增加选中文本的缩进。 
    InlineDirLTR 目前尚未支持。 
    InlineDirRTL 目前尚未支持。 
    InsertButton 用按钮控件覆盖当前选中区。 
    InsertFieldset 用方框覆盖当前选中区。 
    InsertHorizontalRule 用水平线覆盖当前选中区。 
    InsertIFrame 用内嵌框架覆盖当前选中区。 
    InsertImage 用图像覆盖当前选中区。 
    InsertInputButton 用按钮控件覆盖当前选中区。 
    InsertInputCheckbox 用复选框控件覆盖当前选中区。 
    InsertInputFileUpload 用文件上载控件覆盖当前选中区。 
    InsertInputHidden 插入隐藏控件覆盖当前选中区。 
    InsertInputImage 用图像控件覆盖当前选中区。 
    InsertInputPassword 用密码控件覆盖当前选中区。 
    InsertInputRadio 用单选钮控件覆盖当前选中区。 
    InsertInputReset 用重置控件覆盖当前选中区。 
    InsertInputSubmit 用提交控件覆盖当前选中区。 
    InsertInputText 用文本控件覆盖当前选中区。 
    InsertMarquee 用空字幕覆盖当前选中区。 
    InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。 
    InsertParagraph 用换行覆盖当前选中区。 
    InsertSelectDropdown 用下拉框控件覆盖当前选中区。 
    InsertSelectListbox 用列表框控件覆盖当前选中区。 
    InsertTextArea 用多行文本输入控件覆盖当前选中区。 
    InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。 
    Italic 切换当前选中区斜体显示与否。 
    JustifyCenter 将当前选中区在所在格式化块置中。 
    JustifyFull 目前尚未支持。 
    JustifyLeft 将当前选中区所在格式化块左对齐。 
    JustifyNone 目前尚未支持。 
    JustifyRight 将当前选中区所在格式化块右对齐。 
    LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新。 
    MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。 
    Open 打开。 
    Outdent 减少选中区所在格式化块的缩进。 
    OverWrite 切换文本状态的插入和覆盖。 
    Paste 用剪贴板内容覆盖当前选中区。 
    PlayImage 目前尚未支持。 
    Print 打开打印对话框以便用户可以打印当前页。 
    Redo 重做。 
    Refresh 刷新当前文档。 
    RemoveFormat 从当前选中区中删除格式化标签。 
    RemoveParaFormat 目前尚未支持。 
    SaveAs 将当前 Web 页面保存为文件。 
    SelectAll 选中整个文档。 
    SizeToControl 目前尚未支持。 
    SizeToControlHeight 目前尚未支持。 
    SizeToControlWidth 目前尚未支持。 
    Stop 停止。 
    StopImage 目前尚未支持。 
    StrikeThrough 目前尚未支持。 
    Subscript 目前尚未支持。 
    Superscript 目前尚未支持。 
    UnBookmark 从当前选中区中删除全部书签。 
    Underline 切换当前选中区的下划线显示与否。 
    Undo 撤消。 
    Unlink 从当前选中区中删除全部超级链接。 
    Unselect 清除当前选中区的选中状态。

    一个简单的开源编辑器:http://www.jb51.net/article/22346.htm

    View Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Editor</title> 
    <style type="text/css"> 
    body{ font-size:12px;} 
    #ed{ height:300px; width:800px; background-color:#fff } 
    .sssss{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif)} 
    .tag{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif);height:22px; display:inline-table;float:left; ;cursor: pointer; margin-top:8px; margin-left:5px; margin-right:2px; vertical-align:middle; line-height:20px;} 
    .span0_hover{background-position:-0px -2px;width:22px} 
    .span1_hover{background-position:-30px -2px;width:22px} 
    .span2_hover{background-position:-58px -2px;width:22px} 
    .span3_hover{background-position:-86px -57px;width:73px} 
    .span4_hover{background-position:-86px -28px;width:73px} 
    .span5_hover{background-position:-164px -2px;width:22px; background-color:#000000} 
    .span6_hover{background-position:-194px -2px;width:22px} 
    .span7_hover{background-position:-45px -192px;width:22px} 
    .span8_hover{background-position:-76px -192px;width:22px} 
    .span9_hover{background-position:-58px -247px;width:22px} 
    .span10_hover{background-position:-86px -247px;width:22px} 
    .span11_hover{background-position:-113px -247px;width:22px} 
    .span12_hover{background-position:-476px -192px;width:22px} 
    .span13_hover{background-position:-505px -192px;width:22px} 
    .span14_hover{background-position:-333px -247px;width:22px} 
    .span15_hover{background-position:-532px -192px;width:22px} 
    .span16_hover{background-position:-560px -192px;width:22px} 
    .span17_hover{background-position:-455px -247px;width:22px} 
    .span18_hover{background-position:-222px -2px;width:73px} 
    .span19_hover{background-position:-380px -2px;width:74px} 
    .span20_hover{background-position:-460px -2px;width:71px} 
    .span0{background-position:-0px -57px;width:22px} 
    .span1{background-position:-30px -57px;width:22px} 
    .span2{background-position:-58px -57px;width:22px} 
    .span3{background-position:-86px -57px;width:73px} 
    .span4{background-position:-86px -28px;width:73px} 
    .span5{background-position:-164px -57px;width:22px;background-color:#000000} 
    .span6{background-position:-194px -57px;width:22px} 
    .span7{background-position:-45px -84px;width:22px} 
    .span8{background-position:-76px -84px;width:22px} 
    .span9{background-position:-58px -140px;width:22px} 
    .span10{background-position:-86px -140px;width:22px} 
    .span11{background-position:-113px -140px;width:22px} 
    .span12{background-position:-476px -84px;width:22px} 
    .span13{background-position:-505px -84px;width:22px} 
    .span14{background-position:-333px -140px;width:22px} 
    .span15{background-position:-532px -84px;width:22px} 
    .span16{background-position:-560px -84px;width:22px} 
    .span17{background-position:-455px -140px;width:22px} 
    .span18{background-position:-222px -57px;width:73px} 
    .span19{background-position:-380px -57px;width:74px} 
    .span20{background-position:-460px -57px;width:71px} 
    .span0_active{background-position:-0px -28px;width:22px} 
    .span1_active{background-position:-30px -28px;width:22px} 
    .span2_active{background-position:-58px -28px;width:22px} 
    .span3_active{background-position:-476px -299px;width:22px} 
    .span4_active{background-position:-505px -299px;width:22px} 
    .ebody{ height:auto; width:760px; border:1px solid #999999} 
    .ebar{ width:100%; height:36px; background-color:#F0F2F5;}; 
    .edit{ height:550px; width:100%; border:0px;} 
    .popupfont{ width:200px; height:auto; border:1px solid #7B9EBD; background-color:#F7F7F7; position:absolute;padding:3px; } 
    a.c1{ width:96%; height:auto; font-size:10px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;} 
    a.c1:hover{width:96%; height:auto; font-size:10px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
    a.c2{ width:96%; height:auto; font-size:12px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;} 
    a.c2:hover{width:96%; height:auto; font-size:12px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
    a.c3{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666 ;text-decoration:none;} 
    a.c3:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
    a.c4{ width:96%; height:auto; font-size:16px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;} 
    a.c4:hover{width:96%; height:auto; font-size:16px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
    a.c5{ width:96%; height:auto; font-size:18px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;} 
    a.c5:hover{width:96%; height:auto; font-size:18px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
    a.c6{ width:96%; height:auto; font-size:22px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;} 
    a.c6:hover{width:96%; height:auto; font-size:22px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
    a.c7{ width:96%; height:auto; font-size:26px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;} 
    a.c7:hover{width:96%; height:auto; font-size:26px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
    a.n{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666;text-decoration:none; } 
    a.n:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;} 
    .textarea{ border:0px;display:none;} 
    .toolbarlayer{position:absolute;opacity:0.7;filter:alpha(opacity:70);background-color:#ffffff;height:36px} 
    .bottom{height:30px;width:100%;background-color:#F7F3F7;font-size:12px;} 
    .checkbox{margin-top:10px;margin-top/*\**/:6px\9;margin-left:20px;margin-left/*\**/:16px\9;} 
    .pp{height:auto; border:1px solid #D3D3D3; position:absolute;z-index:5;} 
    .ppt{ 
    height:24px; width:100%; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090726/203207031.p.gif); font-size:12px; font-weight: bold; vertical-align:middle; line-height:24px; 
    } 
    </style> 
    </head> 
    <body> 
    
     
    <div id='ss'></div>
    
    
    
     
    <div id='sss'></div> 
    <script type="text/javascript">
    var Sys = (function(ua) {
        var s = {};
        s.IE = ua.match(/msie ([\d.]+)/) ? true: false;
        s.Firefox = ua.match(/firefox\/([\d.]+)/) ? true: false;
        s.Chrome = ua.match(/chrome\/([\d.]+)/) ? true: false;
        s.IE6 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6)) ? true: false;
        s.IE7 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7)) ? true: false;
        s.IE8 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8)) ? true: false;
        return s;
    })(navigator.userAgent.toLowerCase());
    Sys.IE6 && document.execCommand("BackgroundImageCache", false, true);
    var $ = function(id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };
    function Each(list, fun) {
        for (var i = 0, len = list.length; i < len; i++) {
            fun(list[i], i);
        }
    };
    var Css = function(e, o) {
        if (typeof o == "string") {
            e.style.cssText = o;
            return;
        }
        for (var i in o)
        e.style[i] = o[i];
    };
    var Attr = function(e, o) {
        for (var i in o)
        e.setAttribute(i, o[i]);
    };
    var $$ = function(p, e) {
        return p.getElementsByTagName(e);
    };
    function create(e, p, fn) {
        var element = document.createElement(e);
        p && p.appendChild(element);
        fn && fn(element);
        return element;
    };
    function getTarget(e) {
        e = e || window.event;
        return e.srcElement || e.target;
    };
    function createtab(tri, tdi, arisetab, arisetr, arisetd, p) {
        var table = p ? p.createElement("table") : create("table");
        arisetab && arisetab(table);
        var tbody = p ? p.createElement("tbody") : create("tbody");
        for (var i = 0; i < tri; i++) {
            var tr = p ? p.createElement("tr") : create("tr");
            arisetr && arisetr(i, tr);
            for (var j = 0; j < tdi; j++) {
                var td = p ? p.createElement("td") : create("td");
                arisetd && arisetd(i, j, td);
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        }
        table.appendChild(tbody);
        return table;
    };
    var Extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
    };
    var Bind = function(object, fun) {
        var args = Array.prototype.slice.call(arguments).slice(2);
        return function() {
            return fun.apply(object, args);
        }
    };
    var BindAsEventListener = function(object, fun, args) {
        var args = Array.prototype.slice.call(arguments).slice(2);
        return function(event) {
            return fun.apply(object, [event || window.event].concat(args));
        }
    };
    var CurrentStyle = function(element) {
        return element.currentStyle || document.defaultView.getComputedStyle(element, null);
    };
    var Getpos = function(o) {
        var x = 0,
        y = 0;
        do {
            x += o.offsetLeft;
            y += o.offsetTop;
        } while (( o = o . offsetParent ));
        return {
            'x': x,
            'y': y
        };
    };
    function addListener(element, e, fn) {
        element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn);
    };
    function removeListener(element, e, fn) {
        element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn);
    };
    var Class = function(properties) {
        var _class = function() {
            return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;
        };
        _class.prototype = properties;
        return _class;
    };
    var Editer = new Class({
        options: {
             890,
            height: 700,
            facebg: [{
                bgimg: "-4px -4px",
                title: "微笑",
                wl: 22,
                src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220846596.p.gif"
            },
            {
                bgimg: "-31px -4px",
                title: "大笑",
                wl: 22,
                src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220859814.p.gif"
            },
            {
                bgimg: "-58px -4px",
    
                title: "窃笑",
                wl: 22,
                src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220911971.p.gif"
            },
            {
                bgimg: "-85px -4px",
                title: "眨眼",
                wl: 22,
                src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
            },
            {
                bgimg: "-112px -4px",
                title: "鬼脸",
                wl: 22,
                src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"
            },
            {
                bgimg: "-139px -4px",
                title: "色色",
                wl: 22,
                src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220951955.p.gif"
            },
            {
                bgimg: "-167px -4px",
                title: "暴牙",
                wl: 22,
                src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220958111.p.gif"
            },
            {
                bgimg: "-194px -4px",
                title: "讨厌",
                wl: 22,
                src: "http://album.hi.csdn.net/app_uploads/wtcsy/20090719/221004564.p.gif"
            }],
            fontsizedata: {
                fontSize: ["字号1", "字号2", "字号3", "字号4", "字号5", "字号6", "字号7"],
                fontname: ["宋体", "黑体", "楷体", "隶书", "幼圆", "Arial", "Georgia", "Verdana", "Helvetica"]
            },
            oninit: function() {}
        },
        initialize: function(container, data, b, options) {
            this.container = container;
            this._body = create("div", container);
            this.toolbar = create("div", this._body); //工具栏 
            this.iframe = create("iframe", this._body); //编辑区 
            this.textarea = create("textarea", this._body); //显示源代码的框框 
            this.bottom = create("div", this._body); //底部 
            this.lightbox = b; //lightbox 
            this.original = create("input"); //显示源代码的按纽 
            this.ed = null;
            this.isfocus = false;
            this.option = {};
            Extend(this.option, this.options);
            Extend(this.option, options);
            this.rang = null; //选中区 
            this.Fpop = null;
            this.option.oninit();
            this.toolbar.className = "ebar";
            this._body.className = "ebody";
            this.textarea.className = "textarea";
            Css(this._body, {
                 this.option.width + "px",
                height: this.option.height + "px"
            });
            Css(this.textarea, {
                 Sys.IE ? this.option.width - 2 + "px": this.option.width + "px",
                height: Sys.IE ? this.option.height - 66 + "px": this.option.height - 70 + "px"
            });
            Attr(this.iframe, {
                src: "about:blank",
                 Sys.IE ? this.option. this.option.width - 4,
                height: Sys.IE ? this.option.height - 66 : this.option.height - 70
            });
            Attr(this.original, {
                type: "checkbox",
                className: "checkbox",
                align: "top"
            });
            this.bottom.className = "bottom";
            this.bottom.innerHTML = "<span>显示源代码</span>";
            this.bottom.insertBefore(this.original, this.bottom.childNodes[0]);
            this.ed = Sys.IE ? this.iframe.contentWindow.document: this.iframe.contentDocument;
            this.ed.open();
            var div = Sys.IE ? "<div></div>": "";
            this.ed.write("<html><head><style>body{margin:5px;font-size:16px;word-wrap:break-word}</style></head><body id='my_body'>" + div + "</body></html>");
            this.ed.close();
            this.ed.contentEditable = true;
            this.ed.designMode = "on"; //设置编辑区为可编辑 
            for (var i = 0, l = data.length; i < l; i++) {
                var o = create("span", this.toolbar);
                Attr(o, {
                    title: data[i].title,
                    active: false,
                    unselectable: "on"
                });
                o.className = "tag " + data[i].Class;
                addListener(o, "mouseover", Bind(this, this.Changebgcolor, o, data[i].hover));
                addListener(o, "mouseout", Bind(this, this.Changebgcolor, o, data[i].Class));
                addListener(o, "click", Bind(this, this[data[i].action], o, data[i].args));
            }
            //////////////////////////生成工具栏 
            addListener(this.iframe.contentWindow, "focus", Bind(this,
            function() {
                this.isfocus = true;
            }));
            addListener(this.iframe.contentWindow, "blur", Bind(this,
            function() {
                this.isfocus = false;
            }));
            addListener(this.ed, 'mousedown', Bind(this, this.Show));
            addListener(this.ed, 'mouseup', Bind(this, this.Show));
            //////////////////////////这2个事件是来判断光标所在位置是否别编辑 
            addListener(this.original, 'click', Bind(this, this.Showoriginal, this.original)); //显示源代码 
        },
        Changebgcolor: function(o, name, p) {
            if (o.active) return;
            o.className = "tag " + name;
        },
        Show: function() {
            var spans = $$(this.toolbar, "span"),
            Is;
            var elm = [[spans[0], "Bold", "tag span0_active", "tag span0"], [spans[1], "Italic", "tag span1_active", "tag span1"], [spans[2], "Underline", "tag span2_active", "tag span2"], [spans[12], "InsertUnorderedList", "tag span3_active", "tag span12"], [spans[13], "InsertOrderedList", "tag span4_active", "tag span13"]];
            for (var i = 0, l = elm.length; i < l; i++) {
                Is = this.ed.queryCommandState(elm[i][1]);
                elm[i][0].className = Is ? elm[i][2] : elm[i][3];
                elm[i][0].active = Is;
            }
        },
        Showoriginal: function(o) {
            if (!this.toolbarlayer) {
                this.toolbarlayer = create("div", document.body);
                this.toolbarlayer.className = "toolbarlayer";
                var pos = Getpos(this.toolbar);
                Css(this.toolbarlayer, {
                     this.option.width + "px",
                    left: pos.x + "px",
                    top: pos.y + "px"
                });
            }
            if (o.checked) {
                this.iframe.style.display = "none";
                this.textarea.style.display = "block";
                this.toolbarlayer.style.display = "block";
                this.textarea.value = this.ed.body.innerHTML;
            }
            else {
                this.iframe.style.display = "block";
                this.textarea.style.display = "none";
                this.toolbarlayer.style.display = "none";
                this.ed.body.innerHTML = this.textarea.value;
            }
        },
        Exec: function(o, cmd, para) {
            try {
                this.ed.execCommand(cmd, false, para);
                this.Show();
            }
            catch(err) {
                return;
            }
        },
        InsertImage: function(o) {
            if (Sys.IE) { ! this.isfocus && this.iframe.contentWindow.focus();
                this.rang = this.ed.selection.createRange();
            }
            this.lightbox.Show();
            this.makebody(this.Imagepopoup, "350px", "插入图片", "InsertImage", "Imagepopoup");
        },
        CreateLink: function(o) {
            if (Sys.IE) this.rang = this.ed.selection.createRange();
            this.lightbox.Show();
            this.makebody(this.Linkpopoup, "350px", "插入连接", "CreateLink", "Linkpopoup");
        },
        Fontcolor: function(o) {
            var self = this;
            if (!this.fontcolorpopup) {
                var color = new popoup({
                     "210px",
                    title: "颜色选择"
                });
                this.fontcolorpopup = color.container;
                var pos = Getpos(o);
                Css(color.container, {
                    left: pos.x + "px",
                    top: pos.y + o.offsetHeight + "px"
                });
                var bgcolor = ["00", "33", "66", "99", "CC", "FF", "00", "33", "66", "99", "CC", "FF"];
                $$(color.container, "div")[1].appendChild(createtab(12, 18,
                function(tab) {
                    Attr(tab, {
                        cellPadding: 0,
                        cellSpacing: 1,
                        border: 0,
                        bgColor: "#333333"
                    });
                },
                null,
                function(i, j, td) {
                    var color = i < 6 ? "#" + bgcolor[Math.floor(j / 6)] + bgcolor[Math.floor(j % 6)] + bgcolor[i] : "#" + bgcolor[Math.floor(j / 6) + 3] + bgcolor[Math.floor(j % 6)] + bgcolor[i - 6];
                    Attr(td, {
                         10,
                        height: 10,
                        unselectable: "on"
                    });
                    td.style.backgroundColor = color;
                    addListener(td, 'click', Bind(self, self.Execa, color, "fontColor"));
                    addListener(td, 'mousedown', BindAsEventListener(self, self.Bubble));
                }))
            }
            else this.fontcolorpopup.style.display = "block";
            this.Fpop = Bind(this, this.Hide);
            addListener(this.ed, 'click', this.Fpop);
            addListener(document, 'mousedown', this.Fpop);
        },
        Expression: function(o) {
            var self = this;
            if (!this.facebgpopup) {
                var expr = new popoup({
                     "190px",
                    title: "插入表情"
                });
                this.facebgpopup = expr.container;
                var pos = Getpos(o);
                Css(expr.container, {
                    left: pos.x + "px",
                    top: pos.y + o.offsetHeight + "px"
                });
                $$(expr.container, "div")[1].appendChild(createtab(1, this.option.facebg.length,
                function(tab) {
                    Attr(tab, {
                        cellPadding: 0,
                        cellSpacing: 1,
                        border: 0,
                        bgColor: "#FFFFFF"
                    });
                },
                null,
                function(i, j, td) {
                    Css(td, {
                        backgroundImage: "url(http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220510752.p.gif)",
                        backgroundPosition: self.option.facebg[j].bgimg
                    });
                    Attr(td, {
                         self.option.facebg[i].wl,
                        height: self.option.facebg[i].wl,
                        unselectable: "on"
                    });
                    addListener(td, 'click', Bind(self, self.Execa, self.option.facebg[j].src, "Expression"));
                    addListener(td, 'mousedown', BindAsEventListener(self, self.Bubble))
                }));
            }
            else this.facebgpopup.style.display = "block";
            this.Fpop = Bind(this, this.Hide);
            addListener(this.ed, 'click', this.Fpop);
            addListener(document, 'mousedown', this.Fpop);
        },
        Layout: function() {
            var child = this.ed.body.childNodes;
            for (var i = 0, l = child.length; i < l; i++) {
                if (child[i].nodeName == "DIV" || child[i].nodeName == "P") child[i].style.textIndent = child[i].style.textIndent == "2em" ? "": "2em";
            }
        },
        Fontsize: function(o) {
            if (!this.fontsizepopup) {
                var size = new popoup({
                     "210px",
                    title: "字号"
                }),
                a;
                this.fontsizepopup = size.container;
                var pos = Getpos(o);
                Css(size.container, {
                    left: pos.x + "px",
                    top: pos.y + o.offsetHeight + "px"
                });
                for (var i = 0, l = this.option.fontsizedata.fontSize.length; i < l; i++) {
                    a = create("a", $$(size.container, "div")[1]);
                    a.className = "c" + (i + 1);
                    a.setAttribute("href", "javascript:void(0);")
                    a.innerHTML = this.option.fontsizedata.fontSize[i];
                    addListener(a, "click", Bind(this, this.Execa, i, "fontSize"));
                    addListener(a, 'mousedown', BindAsEventListener(this, this.Bubble));
                }
            } else this.fontsizepopup.style.display = "block";
            this.Fpop = Bind(this, this.Hide);
            addListener(this.ed, 'click', this.Fpop);
            addListener(document, 'mousedown', this.Fpop);
        },
        FontName: function(o) {
            if (!this.fontnamepopup) {
                var name = new popoup({
                     "200px",
                    title: "字体"
                }),
                a;
                this.fontnamepopup = name.container;
                var pos = Getpos(o);
                Css(name.container, {
                    left: pos.x + "px",
                    top: pos.y + o.offsetHeight + "px"
                });
                for (var i = 0, l = this.option.fontsizedata.fontname.length; i < l; i++) {
                    a = create("a", $$(name.container, "div")[1]);
                    a.className = "n";
                    a.setAttribute("href", "javascript:void(0);");
                    a.innerHTML = this.option.fontsizedata.fontname[i];
                    addListener(a, "click", Bind(this, this.Execa, this.option.fontsizedata.fontname[i], "fontname"));
                    addListener(a, 'mousedown', BindAsEventListener(this, this.Bubble));
                }
            } else this.fontnamepopup.style.display = "block";
            this.Fpop = Bind(this, this.Hide);
            addListener(this.ed, 'click', this.Fpop);
            addListener(document, 'mousedown', this.Fpop);
        },
        makebody: function(o, w, t, f, n) {
            if (!o) {
                var self = this;
                this[n] = new popoup({
                     w,
                    title: t
                });
                this[n].pos();
                $$(this[n].container, "div")[1].innerHTML = "<div style=' margin-top:6px; margin-left:10px'><span >连接地址</span> <input style='200px;' type='text' /></div><div style='text-align:center; padding-top:15px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"
                this[n].elm = [$$(this[n].container, "input")[0], $$(this[n].container, "img")[0], $$(this[n].container, "img")[1]];
                this[n].elm[0].focus()
                addListener(this[n].elm[1], 'click', Bind(this, this.Execa, null, f));
                addListener(this[n].elm[2], 'click',
                function() {
                    self.lightbox.Close();
                    self[n].Close();
                });
            }
            else with(this[n]) {
                pos();
                Show();
                elm[0].value = "";
                elm[0].focus();
            }
        },
        Addtable: function() {
            if (Sys.IE) { ! this.isfocus && this.iframe.contentWindow.focus();
                this.rang = this.ed.selection.createRange();
            }
            this.lightbox.Show();
            if (Sys.IE) this.rang = this.ed.selection.createRange();
            if (!this.tablepopup) {
                var self = this;
                this.tablepopup = new popoup({
                     "300px",
                    title: "插入表格"
                });
                this.tablepopup.pos();
                $$(this.tablepopup.container, "div")[1].innerHTML = "<div style='margin-left:30px; margin-top:7px;'>行数:<input style='50px; height:13px' type='text' /> 列数:<input style='50px;height:13px' type='text' /></div><div style=' margin-left:30px; margin-top:7px;'>表格的宽度:<input style='50px; height:13px' type='text' /> px</div><div style=' margin-left:30px; margin-top:7px;'>表行的高度:<input style='50px; height:13px' type='text' /> px<div style='text-align:center; margin-left:30px; margin-top:7px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"
                var o = $$(this.tablepopup.container, "input");
                this.tablepopup.elm = [o[0], o[1], o[2], o[3], $$(this.tablepopup.container, "img")[0], $$(this.tablepopup.container, "img")[1]];
                addListener(this.tablepopup.elm[4], 'click', Bind(this, this.Execa, null, "CreateTable"));
                addListener(this.tablepopup.elm[5], 'click',
                function() {
                    self.lightbox.Close();
                    self.tablepopup.Close();
                });
            }
            else with(this.tablepopup) {
                pos();
                Show();
                elm[0].focus();
            }
            this.Fpop = Bind(this, this.Hide);
            addListener(this.ed, 'click', this.Fpop);
            addListener(document, 'mousedown', this.Fpop);
        },
        Hide: function(o) {
            this.facebgpopup && (this.facebgpopup.style.display = "none");
            this.fontsizepopup && (this.fontsizepopup.style.display = "none");
            this.fontnamepopup && (this.fontnamepopup.style.display = "none");
            this.fontcolorpopup && (this.fontcolorpopup.style.display = "none");
            removeListener(this.ed, 'click', this.Fpop);
            removeListener(document, 'mousedown', this.Fpop);
        },
        Bubble: function(e) {
            if (Sys.IE) {
                e.cancelBubble = true
            } else {
                e.stopPropagation()
            }
        },
        Execa: function(num, stamp) {
            var exec = {
                fontname: function() {
                    this.fontnamepopup.style.display = "none";
                    this.ed.execCommand('FontName', false, num);
                },
                fontSize: function() {
                    this.fontsizepopup.style.display = "none";
                    this.ed.execCommand("FontSize", false, num + 1)
                },
                fontColor: function() {
                    this.fontcolorpopup.style.display = "none";
                    this.ed.execCommand("ForeColor", false, num);
                },
                CreateLink: function() {
                    this.lightbox.Close();
                    this.Linkpopoup.Close();
                    if (this.Linkpopoup.elm[0].value == "") return;
                    if (Sys.IE) {
                        this.rang.execCommand("CreateLink", false, this.Linkpopoup.elm[0].value);
                        this.rang.parentElement().target = "_blank ";
                    }
                    else {
                        this.ed.execCommand("CreateLink", false, this.Linkpopoup.elm[0].value);
                        this.rang = this.iframe.contentWindow.getSelection().getRangeAt(0);
                        this.rang.commonAncestorContainer.parentNode.target = "_blank ";
                    }
                },
                InsertImage: function() {
                    this.lightbox.Close();
                    this.Imagepopoup.Close();
                    if (this.Imagepopoup.elm[0].value == "") return;
                    Sys.IE ? this.rang.execCommand("InsertImage", false, this.Imagepopoup.elm[0].value) : this.ed.execCommand("InsertImage", false, this.Imagepopoup.elm[0].value);
                },
                Expression: function() {
                    this.facebgpopup.style.display = "none";
                    Sys.IE && (this.iframe.contentWindow.focus());
                    this.ed.execCommand("InsertImage", false, num);
                },
                CreateTable: function() {
                    this.lightbox.Close();
                    this.tablepopup.Close();
                    var o = this.tablepopup.elm,
                    p = null;
                    if (Sys.IE) {
                        this.rang.execCommand("InsertImage", false, "http://xxx.com/xxxxx.gif");
                        p = this.rang.parentElement();
                    }
                    else {
                        this.ed.execCommand("InsertImage", false, "http://xxx.com/xxxxx.gif");
                        p = this.iframe.contentWindow.getSelection().getRangeAt(0).commonAncestorContainer;
                    }
                    var tab = createtab(o[0].value, o[1].value,
                    function(tab) {
                        Attr(tab, {
                            cellPadding: 0,
                            cellSpacing: 1,
                            border: 0,
                            bgColor: "#CCCCCC",
                             o[2].value
                        });
                    },
                    null,
                    function(i, j, td) {
                        td.height = o[3].value;
                        td.width = o[2].value / o[1].value;
                        td.style.backgroundColor = "#FFFFFF"
                    },
                    this.ed);
                    var imgs = p.getElementsByTagName("img");
                    for (var i = 0, l = p.childNodes.length; i < l; i++) {
                        if (imgs[i].src == "http://xxx.com/xxxxx.gif") {
                            p.replaceChild(tab, imgs[i])
                        }
                    }
                    p.insertBefore(this.ed.createElement("br"), tab.nextSibling);
                }
            };
            Bind(this, exec[stamp])();
        }
    });
    var popoup = new Class({
        options: {
             "200px",
            title: "标题"
        },
        initialize: function(options) {
            this.container = create("div", document.body);
            Extend(this.options, options);
            this.title = this.options.title;
            this.container.className = "pp";
            this.container.style.width = this.options.width;
            this.container.innerHTML = "<div class='ppt'><span style='margin-left:8px;'></span></div><div style='height:auto; auto; padding:7px; background-color:#FFFFFF'></div>";
            this.w = this.container.offsetWidth;
            this.h = this.container.offsetHeight;
            $$(this.container, "span")[0].innerHTML = this.title;
        },
        pos: function() {
            var str = "left:" + (Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) - this.w) / 2 + "px;top:" + ((Math.min(document.documentElement.scrollHeight, document.documentElement.clientHeight) - this.h) / 2 + document.documentElement.scrollTop) + "px"
            Css(this.container, str);
        },
        Show: function() {
            this.container.style.display = "";
        },
        Close: function() {
            this.container.style.display = "none";
        }
    })
    var LightBox = {
        obj: null,
        config: {
            Color: "#fff",
            Opacity: 80,
            zIndex: 5
        },
        init: function(options) {
            Extend(this.config, options || {});
            Extend(this, this.config);
            delete this.config;
            this.obj = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);
            var str = "display:none; z-index:" + this.zIndex + ";left:0px;top:0px;position:fixed;100%;height:100%;background-color:" + this.Color + (Sys.IE ? ";filter : alpha(opacity:" + this.Opacity + ")": ";opacity :" + this.Opacity / 100);
            Css(this.obj, str);
            if (Sys.IE6) {
                this.obj.style.position = "absolute";
                var _self = this;
                this._resize = function() {
                    _self.obj.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
                    _self.obj.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
                };
                this.obj.innerHTML = '<iframe style="position:absolute;top:0;left:0;100%;height:100%;filter:alpha(opacity=0);"></iframe>';
            }
            return this;
        },
        Show: function() {
            if (Sys.IE6) {
                this._resize();
                addListener(window, "resize", this._resize);
            }
            this.obj.style.display = "block";
        },
        Close: function() {
            this.obj.style.display = "none";
            if (Sys.IE6) removeListener(window, "resize", LightBox._resize);
        }
    }
    window.onload = function() {
        var data = [{
            Class: "span0",
            hover: "span0_hover",
            title: "加粗",
            action: "Exec",
            args: "bold"
        },
        {
            Class: "span1",
            hover: "span1_hover",
            title: "斜体",
            action: "Exec",
            args: "Italic"
        },
        {
            Class: "span2",
            hover: "span2_hover",
            title: "下划线",
            action: "Exec",
            args: "Underline"
        },
        {
            Class: "span3",
            hover: "span3_hover",
            title: "字号",
            action: "Fontsize",
            args: null
        },
        {
            Class: "span4",
            hover: "span4_hover",
            title: "字体",
            action: "FontName",
            args: null
        },
        {
            Class: "span5",
            hover: "span5_hover",
            title: "文字颜色",
            action: "Fontcolor",
            args: null
        },
        {
            Class: "span6",
            hover: "span6_hover",
            title: "插入链接",
            action: "CreateLink",
            args: null
        },
        {
            Class: "span7",
            hover: "span7_hover",
            title: "剪贴",
            action: "Exec",
            args: "Cut"
        },
        {
            Class: "span8",
            hover: "span8_hover",
            title: "复制",
            action: "Exec",
            args: "Copy"
        },
        {
            Class: "span9",
            hover: "span9_hover",
            title: "左对齐",
            action: "Exec",
            args: "JustifyLeft"
        },
        {
            Class: "span10",
            hover: "span10_hover",
            title: "居中对齐",
            action: "Exec",
            args: "JustifyCenter"
        },
        {
            Class: "span11",
            hover: "span11_hover",
            title: "右对齐",
            action: "Exec",
            args: "JustifyRight"
        },
        {
            Class: "span12",
            hover: "span12_hover",
            title: "项目符号",
            action: "Exec",
            args: "InsertUnorderedList"
        },
        {
            Class: "span13",
            hover: "span13_hover",
            title: "编号",
            action: "Exec",
            args: "InsertOrderedList"
        },
        {
            Class: "span14",
            hover: "span14_hover",
            title: "插入表格",
            action: "Addtable",
            args: null
        },
        {
            Class: "span15",
            hover: "span15_hover",
            title: "减少缩进",
            action: "Exec",
            args: "Outdent"
        },
        {
            Class: "span16",
            hover: "span16_hover",
            title: "增加缩进",
            action: "Exec",
            args: "Indent"
        },
        {
            Class: "span17",
            hover: "span17_hover",
            title: "清除样式",
            action: "Exec",
            args: "RemoveFormat"
        },
        {
            Class: "span18",
            hover: "span18_hover",
            title: "插入图片",
            action: "InsertImage",
            args: null
        },
        {
            Class: "span19",
            hover: "span19_hover",
            title: "插入表情",
            action: "Expression",
            args: null
        },
        {
            Class: "span20",
            hover: "span20_hover",
            title: "自动排版",
            action: "Layout",
            args: null
        }];
        new Editer($('ss'), data, LightBox.init());
    }
    </script>
    </body 
    </html> 
  • 相关阅读:
    xp 安装 win7 64
    局域网内传输文件速度慢
    安全和共享设置
    vs2005无法启动
    dos快速通道
    xp 共享 guest
    Java菜题
    Java序列化总结(最全)
    Bitset改进你的程序质量
    Java反射方法总结
  • 原文地址:https://www.cnblogs.com/cssfirefly/p/2814242.html
Copyright © 2011-2022 走看看