项目中用到了百度的富文本编辑器,在这里简单介绍一下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
相关推荐
资源包含一个完整的vs2019+MVC+UEditor实例,资源上传,图片上传都已经配置好。
基于Maven的SpringMVC整合UEditor实例,可单独配置图片上传路径,具体详情请参见博文:http://blog.csdn.net/l1028386804/article/details/52389722
本实例在eclipse下配置了ueditor,解决图片上传路径配置问题,自定义拦截器解决了struts框架下图片上传失败问题。
适合想制作文章发布系统的初学者,希望我的资源可以帮到你们
前言 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,...最近工作中要求升级,需要在vue中创建多个ueditor实例,我使用neditor,其实就是把ueditor样式美化了下,其他和ue
在html中放置编辑器,隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏.
下面小编就为大家分享一篇vue项目中使用ueditor的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
一个Ueditor实例代码,包涵了数据库,可用于初学者学习参考
经牛牛摸索,终于整出了个ueditor小实例,相信对刚接触的朋友会有所帮助
asp.net使用 百度 Ueditor 完整实例,配置完整,有自定义toolbar实例,可上传图片
SHH+extjs中Ueditor 实例 SHH+extjs 中Excel导入,数据库中的数据导出到Excel中事例其全。数据库存及程序都已上传。
支持ueditor实例对象直接访问。 支持二次开发。 使用 1,安装 npm install ngx-ueditor --save 把UEditorModule模块导入到你项目中。 import { BrowserModule } from '@angular/platform-browser' ; import { ...
百度Ueditor最新版使用实例,配置无错误,简单易懂,实用。
1、内含两个文件:①、UEditorDemo.rar ②、UEdtior的简单使用.doc; 2、第一个文件是一个web项目,可以导入MyEclipse中直接启动看效果; 3、第二个文件时一个word文档,记录了UEditor的使用过程; 4、需要一个资源...
百度的UEditor使用例子,自己写的,
自己在Myeclipse8.5 和Myeclipse2014下部署好的简单实例 完善了 图片上传 在线图片管理 附件上传 在线附件 背景 在线图片
ueditor富文本编辑器实例----写了一个简单的ueditor富文本编辑器实例,toolbar采用的是它默认的;另一个ueditor富文本编辑器实例是对toolbar进行自定义的实例!
ueditor前后端分离跨域上传图片出错,实例代码,单个图片上传,多个图片上传跨域问题。ueditor前后端分离跨域上传图片出错,实例代码。