自己写的一个HTML编辑器

init.js

/*+----------------编辑器对象声明----------------+*/
var edit_class = function(){
    //对象声明
    this.tool = '';                         //编辑器工具
    this.config = '';                       //配置文件对象
    this.oclick = '';                       //点击的对象
    this.head = $('head');                  //head对象
    this.body = $('body');                  //body对象
    this.toolobj = $('.edit_top');          //编辑器工具对象
    this.range = '';                        //选中的内容
    this.focus = null;                        //焦点
    this.browser = '';                      //浏览器
    this.editor = '';                       //编辑器对象
    this.editorDoc = '';                    //编辑器对象DOC
    this.editorWindow = '';                 //编辑器对象Window
    this.edit_content = '';                 //编辑器内容

    this.edit_config();                     //加载配置   

    /*+----------------初始化加载----------------+*/    
    this.init = function(){       
        this.init_toolobj();                    //初始化工具对象
        this.browser_version();                 //判断浏览器
    }

    /*+----------------初始化编辑器对象----------------+*/
    this.init_editobj = function(){
        this.init();
        this.editor = document.getElementById("edit");
        this.editorDoc = this.editor.contentWindow.document;
        this.editorWindow = this.editor.contentWindow;
        if(this.browser){
            this.editorDoc.body.contentEditable = true;
        } else {
            this.editorDoc.designMode = 'On';          
        }
       
       
        this.edit_content = $(window.parent.document.getElementById('edit_val')).val();
        if(!this.edit_content){
            this.edit_content = ''
        }                                                                                                          
        this.editorDoc.body.innerHTML = this.edit_content;       
    }

    /*+----------------初始化工具对象----------------+*/
    this.init_toolobj = function(){
        //皮肤
        //this.head.append('<link href="skin/' + this.config.base.skin + '/css/edit.css" rel="stylesheet" type="text/css" />');

        //工具
        this.tool = this.config.tool;       
        for(var i = 0; i < this.tool.length; i++){
            key = this.tool[i];
            this.tool[key] = this.create_obj(this.config.tool_config[key]);
            this.toolobj.append(this.tool[key]);
            this.tool[key].bind("click", {
                key:key,
                editcls:this
            }, this.event_bind);
        }       
    }

    /*+----------------绑定事件----------------+*/
    this.event_bind = function(event){       
        tempobj = event.data.editcls;                                     //临时类对象       
        /*if(!tempobj.edit_content) {           
            tempobj.editorDoc.body.focus();
        }*/
        name = event.data.key;                                            //选中KEY
        tempobj.oclick = name;                                            //获取点击模块               
        tempobj.range = GetSelectionRange(tempobj.editorWindow);          //选中的对象
        range_content = tempobj.range.GetSelectedHtml();       
        //如果焦点没有获取到，就直接设置焦点位置，重新获取
        if(range_content == null){           
            tempobj.editorDoc.body.focus();
            tempobj.range = GetSelectionRange(tempobj.editorWindow);                       
        }
       
        $('#edit_focus').focus();

        if(name == 'bold' || name == 'italic' || name == 'underline' || name == 'justifyleft' || name == 'justifycenter' || name == 'justifyright'){
            tempobj.exec(name, null);
        } else {
            urlpath = 'html/' + event.data.key + '.html';
            $.get(urlpath,function(msg){
                msg += '<div class="confirm_backdiv" οnclick="oedit.close_window()"></div>';
                $('#edit_window').append(msg);
            });
        }
    }

    /*+----------------关闭窗体----------------+*/
    this.close_window = function(){
        if(this.oclick == 'fontcolor'){
            this.tool['fontcolor'].removeClass().addClass('edit_color');
        } else if(this.oclick == 'bgcolor'){
            this.tool['bgcolor'].removeClass().addClass('edit_bgcolor');
        }
        $('#edit_window').html('');
    }

    /*+----------------创建一个对象----------------+*/
    this.create_obj = function(objatr){
        return $('<ul class="' + objatr.css + '" title="' + objatr.title + '" unselectable="on">' + objatr.text + '</ul>')
    }

    /*+----------------替换选中的内容----------------+*/
    this.range_replace = function(html){
        this.range.Replace(html);
    }

    /*+----------------获取选中的内容----------------+*/
    this.get_range_content = function(){
        return this.range.GetSelectedHtml();
    }

    /*+----------------使用EXEC命令----------------+*/
    this.exec = function(name, value){
        this.editorWindow.focus();
        this.editorWindow.document.execCommand(name, false, value);
        this.editorWindow.focus();
    }

    /*+----------------获取浏览器----------------+*/
    this.browser_version = function(){       
        if(window.ActiveXObject){       //IE
            this.browser = true;
        } else {                        //非IE
            this.browser = false;
        }
    }
}

 

config.js

//配置文件
edit_class.prototype.edit_config = function(){
    //配置对象
    this.config = {
        //基础配置
        'base':{
            //域
            'domain':'',
            //编辑器路径
            'editpath':'/api/htmledit/',
            //皮肤
            'skin':'default',
            //表情目录
            'icon':'skin/default/imgs/icon',
            //AJAX处理文件
            'ajax_file':'ajax.php',
            //图片上传保存路径
            'upload_save_path':'/upload/edit_imgs',
            //相册照片路径
            'album_pic_path':'/upload/imgs'
        },

        //开启功能
        'tool':['font', 'size', 'bold', 'italic', 'underline', 'fontcolor', 'bgcolor', 'justifyleft', 'justifycenter', 'justifyright', 'link', 'image', 'view', 'brow'],

        //功能配置
        'tool_config':
        {
            //字体
            'font':{'css':'edit_font', 'title':'字体', 'text':'宋体'},
            //字号
            'size':{'css':'edit_size', 'title':'字号', 'text':'12px'},
            //粗体
            'bold':{'css':'edit_b', 'title':'粗体', 'text':''},
            //斜体
            'italic':{'css':'edit_i', 'title':'斜体', 'text':''},
            //斜体
            'underline':{'css':'edit_u', 'title':'下划线', 'text':''},
            //字体颜色
            'fontcolor':{'css':'edit_color', 'title':'字体颜色', 'text':''},
            //背景颜色
            'bgcolor':{'css':'edit_bgcolor', 'title':'背景颜色', 'text':''},
            //左对齐
            'justifyleft':{'css':'edit_left', 'title':'左对齐', 'text':''},
            //居中对齐
            'justifycenter':{'css':'edit_center', 'title':'居中对齐', 'text':''},
            //右对齐
            'justifyright':{'css':'edit_right', 'title':'右对齐', 'text':''},
            //超链接
            'link':{'css':'edit_link', 'title':'超链接', 'text':''},
            //图片
            'image':{'css':'edit_img', 'title':'图片', 'text':''},
            //视频
            'view':{'css':'edit_view', 'title':'视频', 'text':''},
            //表情
            'brow':{'css':'edit_brow', 'title':'表情', 'text':''}
        },

        //字体
        'font':[
        {'key':'宋体', 'value':'宋体'},
        {'key':'黑体', 'value':'黑体'},
        {'key':'楷体', 'value':'楷体_GB2312'},
        {'key':'仿宋', 'value':'仿宋_GB2312'},
        {'key':'Arial', 'value':'Arial'},
        {'key':'Verdana', 'value':'Verdana, Arial, Helvetica, sans-serif'},
        {'key':'Courier New', 'value':'Courier New'},
        {'key':'Times New Roman', 'value':'Times New Roman'}
        ],

        //字号
        'size':[
        {'key':'10px', 'value':'1'},
        {'key':'12px', 'value':'2'},
        {'key':'16px', 'value':'3'},
        {'key':'18px', 'value':'4'},
        {'key':'24px', 'value':'5'},
        {'key':'32px', 'value':'6'},
        {'key':'48px', 'value':'7'}
        ],

        //颜色
        'color':['000000','444444','666666','999999','cccccc','eeeeee','f3f3f3','ffffff',
        'ff0000','ff9900','ffff00','00ff00','00ffff','0000ff','9900ff','ff00ff',
        'ea9999','f9cb9c','ffe599','b6d7a8','a2c4c9','9fc5e8','b4a7d6','d5a6bd',
        'e06666','f6b26b','ffd966','93c47d','76a5af','6fa8dc','8e7cc3','c27ba0',
        'cc0000','e69138','f1c232','6aa84f','45818e','3d85c6','674ea7','a64d79'
        ]
    };
}