UEditor 实例

        项目中用到了百度的富文本编辑器，在这里简单介绍一下ueditor使用，以及表情本地化、表情修改。

uditor 官网http://ueditor.baidu.com ，有开发版和mini ，我们可以根据自己的需要下载不同的包。再开发版的tab页的左下方有表情库的下载地址，如果想本地化表情，请下载表情库。

        ueditor 解压后，直接放到工程webapp下就可以了，然后在应用的页面引入对应的js和css 如下：

 

<link href="/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="/umeditor/third-party/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/umeditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="/umeditor/lang/zh-cn/zh-cn.js"></script>

   在html body中设置uditor 绑定的div

 

   

<div id="myEditor" style="width:909px;height:240px;">

</div>

   js中初始化uditor 

 

   

<%--加载ueditor--%>
var um = UM.getEditor('myEditor');

 

<%--初始化uditor内容-------%>
um.ready(function(){setContent(content);});

   ueditor  getConent 和getContentText 有些区别的，注意使用，其实想获取ueditor 有格式的全部内容，可以直接获取 myEditor  div 的 html

  

var content = $("#myEditor").html();

  

  ueditor 图片上传，只需修改umeditor.config.js 需要修改window.UMEDITOR_CONFIG.imageUrl 为工程内部上传图片地址，添加上传接口就ok了

 

@RequestMapping(value="uploadImage", method=RequestMethod.POST, produces="text/html;charset=UTF-8")
    @ResponseBody
    @LoginRequired
public void uploadImage(@RequestParam("upfile") MultipartFile upfile，HttpServletRequest request, HttpServletResponse response) {
    //*****省略上传代码*********//
       
     String result = "{\"name\":\""+ imageNameNew +"\", \"originalName\": \""+ imageName +"\", \"size\": "+ 500 +", \"state\": \""+ "SUCCESS" +"\", \"type\": \""+ imageInfo[1] +"\", \"url\": \""+ userImageUrl +"\"}";

     result = result.replaceAll( "\\\\", "\\\\" );
     

}

  上传时注意返回的内容格式。

  

  表情本地化，需要我们把下载的表情ueditor-emotion images 中的内容复制到工程umeditor》dialogs》emotion》images 下，然后修改umeditor.config.js 中 UMEDITOR_CONFIG  emotionLocalization 设置为true。这样就可以实现表情本地化了。

  

  下面给出添加表情的实现方法。在umeditor>images>emotion.js 中定义了表情面板展示的内容，emotion.css 中定义了每种表情的css。所以我们修改表情只需在emotion.js 和emotion.css 中做处理就ok了.

  

 UM.registerWidget('emotion',{
        tpl: "<link type=\"text/css\" rel=\"stylesheet\" href=\"<%=emotion_url%>emotion.css\">" +
            "<div class=\"edui-emotion-tab-Jpanel edui-emotion-wrapper\">" +
            "<ul class=\"edui-emotion-Jtabnav edui-tab-nav\">" +
            "<li class=\"edui-tab-item\"><a data-context=\".edui-emotion-Jtab7\" hideFocus=\"true\" class=\"edui-tab-text\"><%=lang_input_hq%></a></li>" +
            "<li class=\"edui-tab-item\"><a data-context=\".edui-emotion-Jtab0\" hideFocus=\"true\" class=\"edui-tab-text\"><%=lang_input_choice%></a></li>" +
            "<li class=\"edui-tab-item\"><a data-context=\".edui-emotion-Jtab1\" class=\"edui-tab-text\"><%=lang_input_Tuzki%></a></li>" +
            "<li class=\"edui-tab-item\"><a data-context=\".edui-emotion-Jtab2\" hideFocus=\"true\" class=\"edui-tab-text\"><%=lang_input_lvdouwa%></a></li>" +
            "<li class=\"edui-tab-item\"><a data-context=\".edui-emotion-Jtab3\" hideFocus=\"true\" class=\"edui-tab-text\"><%=lang_input_BOBO%></a></li>" +
            "<li class=\"edui-tab-item\"><a data-context=\".edui-emotion-Jtab4\" hideFocus=\"true\" class=\"edui-tab-text\"><%=lang_input_babyCat%></a></li>" +
            "<li class=\"edui-tab-item\"><a data-context=\".edui-emotion-Jtab5\" hideFocus=\"true\" class=\"edui-tab-text\"><%=lang_input_bubble%></a></li>" +
            "<li class=\"edui-tab-item\"><a data-context=\".edui-emotion-Jtab6\" hideFocus=\"true\" class=\"edui-tab-text\"><%=lang_input_youa%></a></li>" +
            "<li class=\"edui-emotion-tabs\"></li>" +
            "</ul>" +
            "<div class=\"edui-tab-content edui-emotion-JtabBodys\">" +
            "<div class=\"edui-emotion-Jtab0 edui-tab-pane\"></div>" +
            "<div class=\"edui-emotion-Jtab1 edui-tab-pane\"></div>" +
            "<div class=\"edui-emotion-Jtab2 edui-tab-pane\"></div>" +
            "<div class=\"edui-emotion-Jtab3 edui-tab-pane\"></div>" +
            "<div class=\"edui-emotion-Jtab4 edui-tab-pane\"></div>" +
            "<div class=\"edui-emotion-Jtab5 edui-tab-pane\"></div>" +
            "<div class=\"edui-emotion-Jtab6 edui-tab-pane\"></div>" +
            "<div class=\"edui-emotion-Jtab7 edui-tab-pane\"></div>" +
            "</div>" +
            "<div class=\"edui-emotion-JtabIconReview edui-emotion-preview-box\">" +
            "<img src=\"<%=cover_img%>\" class=\'edui-emotion-JfaceReview edui-emotion-preview-img\'/>" +
            "</div>",

 

 

  以上定义了表情面板的tab位置，以及表情列表容器div。如果想调整tab中表情的显示顺序，只需调整class 为edui-emotion-Jtabnav edui-tab-nav 的ul中li的位置。

  

sourceData: {
            emotion: {
                tabNum:8, //切换面板数量
                SmilmgName:{ 'edui-emotion-Jtab0':['j_00', 84], 'edui-emotion-Jtab1':['t_00', 40], 'edui-emotion-Jtab2':['w_00', 52], 'edui-emotion-Jtab3':['B_00', 63], 'edui-emotion-Jtab4':['C_00', 20], 'edui-emotion-Jtab5':['i_f', 50], 'edui-emotion-Jtab6':['y_00', 40] , 'edui-emotion-Jtab7':['h_q', 6] }, //图片前缀名
                imageFolders:{ 'edui-emotion-Jtab0':'jx2/', 'edui-emotion-Jtab1':'tsj/', 'edui-emotion-Jtab2':'ldw/', 'edui-emotion-Jtab3':'bobo/', 'edui-emotion-Jtab4':'babycat/', 'edui-emotion-Jtab5':'face/', 'edui-emotion-Jtab6':'youa/', 'edui-emotion-Jtab7':'hq/'}, //图片对应文件夹路径
                imageCss:{'edui-emotion-Jtab0':'jd', 'edui-emotion-Jtab1':'tsj', 'edui-emotion-Jtab2':'ldw', 'edui-emotion-Jtab3':'bb', 'edui-emotion-Jtab4':'cat', 'edui-emotion-Jtab5':'pp', 'edui-emotion-Jtab6':'youa', 'edui-emotion-Jtab7':'hq'}, //图片css类名
                imageCssOffset:{'edui-emotion-Jtab0':35, 'edui-emotion-Jtab1':35, 'edui-emotion-Jtab2':35, 'edui-emotion-Jtab3':35, 'edui-emotion-Jtab4':35, 'edui-emotion-Jtab5':25, 'edui-emotion-Jtab6':35, 'edui-emotion-Jtab7':35}, //图片偏移
                SmileyInfor:{
                    'edui-emotion-Jtab0':['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '打酱油', '俯卧撑', '气愤', '?', '吻', '怒', '胜利', 'HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '微笑', '亲吻', '调皮', '惊恐', '耍酷', '发火', '害羞', '汗水', '大哭', '', '加油', '困', '你NB', '晕倒', '开心', '偷笑', '大哭', '滴汗', '叹气', '超赞', '??', '飞吻', '天使', '撒花', '生气', '被砸', '吓傻', '随意吐'],
                    'edui-emotion-Jtab1':['Kiss', 'Love', 'Yeah', '啊！', '背扭', '顶', '抖胸', '88', '汗', '瞌睡', '鲁拉', '拍砖', '揉脸', '生日快乐', '摊手', '睡觉', '瘫坐', '无聊', '星星闪', '旋转', '也不行', '郁闷', '正Music', '抓墙', '撞墙至死', '歪头', '戳眼', '飘过', '互相拍砖', '砍死你', '扔桌子', '少林寺', '什么？', '转头', '我爱牛奶', '我踢', '摇晃', '晕厥', '在笼子里', '震荡'],
                    'edui-emotion-Jtab2':['大笑', '瀑布汗~', '惊讶', '臭美', '傻笑', '抛媚眼', '发怒', '我错了', 'money', '气愤', '挑逗', '吻', '怒', '胜利', '委屈', '受伤', '说啥呢？', '闭嘴', '不', '逗你玩儿', '飞吻', '眩晕', '魔法', '我来了', '睡了', '我打', '闭嘴', '打', '打晕了', '刷牙', '爆揍', 'zhadan', '倒立', '刮胡子', '邪恶的笑', '不要不要', '爱恋中', '放大仔细看', '偷窥', '超高兴', '晕', '松口气', '我跑', '享受', '修养', '哭', '汗', '啊~', '热烈欢迎', '打酱油', '俯卧撑', '?'],
                    'edui-emotion-Jtab3':['HI', 'KISS', '不说', '不要', '扯花', '大心', '顶', '大惊', '飞吻', '鬼脸', '害羞', '口水', '狂哭', '来', '泪眼', '流泪', '生气', '吐舌', '喜欢', '旋转', '再见', '抓狂', '汗', '鄙视', '拜', '吐血', '嘘', '打人', '蹦跳', '变脸', '扯肉', '吃To', '吃花', '吹泡泡糖', '大变身', '飞天舞', '回眸', '可怜', '猛抽', '泡泡', '苹果', '亲', '', '骚舞', '烧香', '睡', '套娃娃', '捅捅', '舞倒', '西红柿', '爱慕', '摇', '摇摆', '杂耍', '招财', '被殴', '被球闷', '大惊', '理想', '欧打', '呕吐', '碎', '吐痰'],
                    'edui-emotion-Jtab4':['发财了', '吃西瓜', '套牢', '害羞', '庆祝', '我来了', '敲打', '晕了', '胜利', '臭美', '被打了', '贪吃', '迎接', '酷', '顶', '幸运', '爱心', '躲', '送花', '选择'],
                    'edui-emotion-Jtab5':['微笑', '亲吻', '调皮', '惊讶', '耍酷', '发火', '害羞', '汗水', '大哭', '得意', '鄙视', '困', '夸奖', '晕倒', '疑问', '媒婆', '狂吐', '青蛙', '发愁', '亲吻', '', '爱心', '心碎', '玫瑰', '礼物', '哭', '奸笑', '可爱', '得意', '呲牙', '暴汗', '楚楚可怜', '困', '哭', '生气', '惊讶', '口水', '彩虹', '夜空', '太阳', '钱钱', '灯泡', '咖啡', '蛋糕', '音乐', '爱', '胜利', '赞', '鄙视', 'OK'],
                    'edui-emotion-Jtab6':['男兜', '女兜', '开心', '乖乖', '偷笑', '大笑', '抽泣', '大哭', '无奈', '滴汗', '叹气', '狂晕', '委屈', '超赞', '??', '疑问', '飞吻', '天使', '撒花', '生气', '被砸', '口水', '泪奔', '吓傻', '吐舌头', '点头', '随意吐', '旋转', '困困', '鄙视', '狂顶', '篮球', '再见', '欢迎光临', '恭喜发财', '稍等', '我在线', '恕不议价', '库房有货', '货在路上'],
                    'edui-emotion-Jtab7':['亲亲', '哭哭', '开心', '接元宝', '数红包', '约约约']

                }
            }
        },

  以上内容定义了个个表情的列表内容css 和 表情显示名称

 

  

initImgName: function() {

            var emotion = this.sourceData.emotion;

            for ( var pro in emotion.SmilmgName ) {
                var tempName = emotion.SmilmgName[pro],tempBox = emotion.SmileyBox[pro],tempStr = "";
                if ( tempBox.length ) return;

                var defaultImgSuffix = ".gif";

                if ("edui-emotion-Jtab7" == pro)
                    defaultImgSuffix = ".png";

                for ( var i = 1; i <= tempName[1]; i++ ) {
                    tempStr = tempName[0];
                    if ( i < 10 ) tempStr = tempStr + '0';
                    tempStr = tempStr + i + defaultImgSuffix;
                    tempBox.push( tempStr );
                }
            }

        },

   从以上代码我们可以分析出，这段代码是用来加载表情的，imageFolders 的value 是dialogs>emotion>images 下一级的目录名称，图片地址拼接规则是SmilmgName 的key+  for（value）+.gif

  所以我们需要在imageFolders  SmilmgName imageCss imageCssOffset 定义我们自己的内容，SmileyInfor 指定显示名称 ，在dialogs>emotion>images 中导入按以上规则命名的表情图片。dialogs>emotion>images 下的图片是一个git拼图，这里直接导入我们的拼图就ok了，名称要喝emotion.css中的背景图名称相对应

  

.edui-popup-emotion .edui-emotion-hq img{
    background:transparent url(images/hface.gif?v=1.1) no-repeat scroll left top;
    cursor:pointer;width:35px;height:35px;display:block;
}

  

   以上是我使用ueditor的小小总结。

评论

1 楼 乌发舞天 2017-03-31