基于可编辑DIV的带表情编辑器

最新推荐文章于 2023-03-29 11:14:40 发布

^止水$

最新推荐文章于 2023-03-29 11:14:40 发布

阅读量2.1k

点赞数 1

分类专栏： web前端文章标签： html 编辑器 js

本文链接：https://blog.csdn.net/aa9288s/article/details/54345840

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图：
这里写图片描述
HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>1111</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="DDeditor/plugins/smile/dialog/jQury.DDeditor.plugins.js"></script>
    <link rel="stylesheet" type="text/css" href="DDeditor/skins/default/default.css">
</head>
<body>
    <div style="width: 900px;margin:100px auto 0px auto;">
        <div><a class="smile" href="javascript:void(0);">smile</a></div>
        <div class="editor" style="border: 1px solid #ccc;height:100px;" contenteditable="true"></div>
    </div>
    <div style="width: 900px;margin:0px auto;">
        <div><a class="smile" href="javascript:void(0);">smile</a></div>
        <div class="editor" style="border: 1px solid #ccc;height:100px;" contenteditable="true"></div>
    </div>
    <div style="width: 900px;margin:0px auto;">
        <div><a class="smile" href="javascript:void(0);">smile</a></div>
        <div class="editor" style="border: 1px solid #ccc;height:100px;" contenteditable="true"></div>
    </div>
    <div style="width: 900px;margin:0px auto;">
        <div><a class="smile" href="javascript:void(0);">smile</a></div>
        <div class="editor" style="border: 1px solid #ccc;height:100px;" contenteditable="true"></div>
    </div>
    <script type="text/javascript">
        $(function(){
            $('.editor').DDeditor();
        });
    </script>
</body>
</html>

js代码：

jQuery.fn.extend({
    DDeditor : function(options){
        var smileItems = new Array();//表情图片集合
        for (var i=0;i<75;i++){
            smileItems[i] = (i+1) + '.gif';
        }
        var smleDescriptions = [
             '微笑','撇嘴','色','发呆','流泪','害羞','闭嘴',
            '睡','大哭','尴尬','发怒','笑脸','呲牙',
            '惊讶','难过','冷汗','抓狂','吐','偷笑',
            '可爱','白眼','傲慢','饥饿','困','恐怖',
            '流汗','憨笑','大兵','奋斗','咒骂','疑问',
            '嘘...','晕...','折磨','衰...','敲打','再见',
            '擦汗','抠鼻','糗大了','坏笑','左哼哼','右哼哼',
            '哈欠','鄙视','委屈','快哭了','阴险','亲亲',
            '吓...','可怜','拥抱','月亮','太阳','炸弹',
            '骷髅','菜刀','猪头','西瓜','咖啡','米饭',
            '爱心','赞','弱','握手','胜利','抱拳',
            '勾引','ok','no','玫瑰','凋谢','示爱',
            '爱情','飞吻'
        ];
        var defaults = {
            smile_id : '.smile',
            smile_path : 'DDeditor/plugins/smile/images/',
            smile_items : smileItems,
            smile_descriptions : smleDescriptions
        };
        var option = $.extend(defaults,options);
        var smile = $(option.smile_id);
        var editor = $(this);
        cursors = [];
        $(this).each(function(){
            cursors.push(new Cursor(this))
        });
        smile.click(function(){
            var index = smile.index(this);
            var strFace,path,items,descriptions;
            path = option.smile_path;
            items = option.smile_items;
            descriptions = option.smile_descriptions;
            $('#faceBox').remove();
            strFace = '<div id="faceBox" style="position:absolute;display:none;z-index:1000;" class="qqFace">' +
                      '<table border="0" cellspacing="0" cellpadding="0"><tr>';
            for(var i=0; i<items.length; i++){
                strFace += '<td><img onclick="cursors['+index+'].insertHTML(getImgStr($(this).attr(\'src\')))" alt="" src="'+path+items[i]+'" title="'+descriptions[i]+'"/></td>';
                if( (i+1) % 15 == 0 ) strFace += '</tr><tr>';
            }
            strFace += '</tr></table></div>';
            var faceBox = $(strFace);
            $(this).parent().append(strFace);
            var offset = $(this).position();
            var top = offset.top- 150;
            faceBox.css({
                'left': offset.left,
                'top' : top
            });
            $('#faceBox').fadeIn(500);
            return false;
        });

        //记录光标位置
        $(editor).click(function() {
            cursors[$(editor).index(this)].initRange();
        }).select(function() {
            cursors[$(editor).index(this)].initRange();
            return false;
        }).keyup(function() {
            cursors[$(editor).index(this)].initRange();
            return false;
        }).keydown(function(event) {//监听键盘回车键
            if (event.keyCode == 13 || event.charCode == 13) {
                cursors[$(editor).index(this)].insertHTML('<br/>');
                return false;
            }
        }); 

        //隐藏表情区域
        $(document).click(function(){
            $('#faceBox').fadeOut(200,function(){
                $('#faceBox').remove();
            });
        });
    }
});
function getImgStr(src){
    return '<img alt="" src="'+src+'" />';
}

function Cursor(a) {
    this.element = a;
}

Cursor.prototype = {
    getRange : function() {
        if (document.selection) {
            return document.selection.createRange().duplicate();
        } else if (window.getSelection) {
            return window.getSelection().getRangeAt(0).cloneRange();
        }
    },
    initRange : function() {
        var oDoc = this.element;
        oDoc.range = new Cursor(oDoc).getRange();
    },
    insertHTML : function(html) {
        var oDoc = this.element;
        if (document.selection && !!oDoc.range) {
            var ierange = oDoc.range;
            //在非标准浏览器中 要先让你需要插入html的div 获得焦点
            oDoc.focus();
            ierange.pasteHTML(html);
            ierange.select();//把选区转换成对象，用以显示光标

        } else if (!!window.getSelection && !!oDoc.range) {
            var sel = window.getSelection();
            var w3cRange = oDoc.range;
            w3cRange.deleteContents();
            var node = $(html).get(0);
            w3cRange.insertNode(node);
            oDoc.focus();
            w3cRange.setStartAfter(node);
            w3cRange.collapse(true);
            sel.removeAllRanges();
            sel.addRange(w3cRange);

        } else {
            oDoc.focus();
            if (document.selection) {
                var ierange = oDoc.range = document.selection.createRange().duplicate();
                ierange.pasteHTML(html);
                //在光标位置插入html 如果只是插入text 则就是fus.text="..."
                oDoc.focus();
            } else {
                var sel = window.getSelection();
                var w3cRange = oDoc.range = sel.getRangeAt(0).cloneRange();
                w3cRange.deleteContents();
                var node = $(html).get(0);
                w3cRange.insertNode(node);
                w3cRange.setStartAfter(node);
                w3cRange.collapse(true);
                sel.removeAllRanges();
                sel.addRange(w3cRange);
            }
        }
    },
    getHTML : function() {
        return $(this.element).html();
    },
    formatDoc : function(sCmd, sValue) {
        document.execCommand(sCmd, false, sValue);
        this.element.focus();
    }
};