EmojiOne表情符号所见即所得的文本编辑器

EmojiOne是一款强大的表情符号插件。它提供了1600+个不同类别的表情图标，支持PNG格式和SVG格式。并且可以在客户端使用js来进行符号解析，也可以在服务器端使用PHP代码来进行符号解析，功能非常强大。

基本使用

最基本的使用方法是使用一个来作为文本编辑器。</p><br> <pre><code class="language-javascript"><textarea id="example1"></textarea><br> </code></pre><br> <p>然后使用下面的方法来初始化文本编辑器。</p><br> <pre><code class="language-javascript"><script type="text/javascript"><br> $(document).ready(function() {<br> // define emojione location (optional, see more at https://github.com/Ranks/emojione)<br> // emojione.imagePathPNG = '../vendor/emojione/emojione/assets/png/';<br> $("#example1").emojioneArea({<br> // options<br> autoHideFilters: true<br> });<br> });<br> </script><br> </code></pre><br> <p>autoHideFilters属性表示自动隐藏表情符号选择区域。</p><br> <p>使用div作为容器</p><br> <p>你也可以使用<code><div></code>元素作为容器。</p><br> <pre><code class="language-html"><div id="example2"><br> ......<br> </div><br> <script type="text/javascript"><br> $(document).ready(function() {<br> $("#example2").emojioneArea();<br> });<br> </script><br> </code></pre><br> <p>使用input作为容器</p><br> <pre><code class="language-html"><input id="example3" value="......"><br> <script type="text/javascript"><br> $(document).ready(function() {<br> $("#example3").emojioneArea();<br> });<br> </script><br> </code></pre><br> <p>使用图片来代替sprite雪碧图</p><br> <pre><code class="language-html"><textarea id="example4"><br> ......<br> </textarea><br> <script type="text/javascript"><br> $(document).ready(function() {<br> $("#example4").emojioneArea({<br> useSprite: false<br> });<br> });<br> </script><br> </code></pre><br> <p>其它布局方式</p><br> <pre><code class="language-html"><textarea id="example5"><br> ......<br> </textarea><br> <script type="text/javascript"><br> $(document).ready(function() {<br> $("#example5").emojioneArea({<br> template: "<filters/><tabs/><editor/>"<br> });<br> });<br> </script><br> </code></pre><br> <p>API</p><br> <pre><code class="language-javascript">var default_options = {<br> template : "<editor/><filters/><tabs/>",<br> dir : "ltr",<br> spellcheck : false,<br> autocomplete : "off",<br> autocorrect : "off",<br> autocapitalize : "off",<br> placeholder : null,<br> container : null,<br> hideSource : true,<br> autoHideFilters : false,<br> useSprite : true,<br> filters: {<br> // see in source file<br> }<br> }; <br> .on(events, handler);<br> // - events<br> // Type: String<br> // One or more space-separated event types and optional namespaces<br> // - handler<br> // Type: Function(jQuery Element, Event eventObject [, Anything extraParameter ] [, ... ] )<br> // A function to execute when the event is triggered.<br> <br> .off(events[, handler]);<br> // - events<br> // Type: String<br> // One or more space-separated event types and optional namespaces<br> // - handler<br> // Type: Function(jQuery Element, Event eventObject [, Anything extraParameter ] [, ... ] )<br> // A handler function previously attached for the event(s)<br> <br> // built-in events:<br> // "mousedown", "mouseup", "click", "keyup", "keydown",<br> // "filter.click", "emojibtn.click", "arrowLeft.click", "arrowRight.click",<br> // "focus", "blur", "paste", "resize", "change"<br> <br> .setText(str);<br> // - str<br> // Type: String<br> // Set text<br> <br> .getText();<br> // Get text<br> <br> // Usage methods, example:<br> var el = $("selector").emojioneArea();<br> el[0].emojioneArea.on("emojibtn.click", function(btn) {<br> console.log(btn.html());<br> });<br> </code></pre><br> </div> </div> </span> </div>  <div class="area-side fr" JS-tab="true"> <header class="area-header"> <h2 class="title"> <b>搜索发现</b> </h2> <div class="tab-rank tab fr"> <a href="javascript:;" class="tab-rank__item active" rel="nofollow">下载榜</a> <a href="javascript:;" class="tab-rank__item" rel="nofollow">观看榜</a> </div> </header> <div class="side-rank"> <ul class="tab-cont tab-cont__active"> <li class="has-img"> <a href="/perview/jqchajian-d1349924792404873218" title="jQuery常用网站导航加轮播图" target="_blank" class="img fl"> <img src="http://www.zjdaima.com/jqchajian/daohang/chuizhi/jQuery网站导航加轮播图/jquerynavlbt/zjdaima-bg-1571103704.png" alt="jQuery常用网站导航加轮播图"> <span class="rank">1</span> </a> <div class="info fr"> <a href="/perview/jqchajian-d1349924792404873218" title="jQuery常用网站导航加轮播图" target="_blank" class="text-overflow">jQuery网站导航加轮播图</a> <p><a href="#"></a></p> <p> <i class="iconfont icon-collect fl">1496</i>  </p> </div> </li> <li class="has-img"> <a href="/perview/jqchajian-d1349925340189310978" title="jQuery圆形气泡导航,ie6下运行也ok。" target="_blank" class="img fl"> <img src="http://www.zjdaima.com/jqchajian/daohang/qita/jQuery圆形气泡导航/jQueryYxnav/zjdaima-bg-1866615238.png" alt="jQuery圆形气泡导航,ie6下运行也ok。"> <span class="rank">2</span> </a> <div class="info fr"> <a href="/perview/jqchajian-d1349925340189310978" title="jQuery圆形气泡导航,ie6下运行也ok。" target="_blank" class="text-overflow">jQuery圆形气泡导航</a> <p><a href="#"></a></p> <p> <i class="iconfont icon-collect fl">1489</i>  </p> </div> </li> <li class="has-img"> <a href="/perview/jqchajian-d1349925181787209730" title="模拟分页器数据渲染，新手写代码给支持吧" target="_blank" class="img fl"> <img src="http://www.zjdaima.com/jqchajian/daohang/fenye/模拟分页器数据渲染require插件开发/requirepage/zjdaima-bg-26305623.png" alt="模拟分页器数据渲染，新手写代码给支持吧"> <span class="rank">3</span> </a> <div class="info fr"> <a href="/perview/jqchajian-d1349925181787209730" title="模拟分页器数据渲染，新手写代码给支持吧" target="_blank" class="text-overflow">模拟分页器数据渲染require插件开发</a> <p><a href="#"></a></p> <p> <i class="iconfont icon-collect fl">1482</i>  </p> </div> </li> <li> <a href="/perview/jqchajian-d1349924778878242817" title="基于jquery的导航，可折叠可展开。" target="_blank" class="rank-item text-overflow"> <span class="rank-num">4</span> jQuery nav导航（原创） </a> </li> <li> <a href="/perview/jqchajian-d1349925349337088001" title="轮菜单是一个jQuery插件，可以帮您实现一个增加完全可定制的路径轮菜单按钮" target="_blank" class="rank-item text-overflow"> <span class="rank-num">5</span> 轮菜单 </a> </li> <li> <a href="/perview/jqchajian-d1349925690774495233" title="可用网站作为导航栏" target="_blank" class="rank-item text-overflow"> <span class="rank-num">6</span> 简易使用的导航栏 </a> </li> <li> <a href="/perview/jqchajian-d1349925691177148417" title="类似于Jquery的JS下拉菜单" target="_blank" class="rank-item text-overflow"> <span class="rank-num">7</span> 类似于Jquery的JS下拉菜单 </a> </li> <li> <a href="/perview/jqchajian-d1349925845523361794" title="树形组件可自定义展开收起及最后一级图标灵活自定义参数" target="_blank" class="rank-item text-overflow"> <span class="rank-num">8</span> jQuery树形组件(原创) </a> </li> <li> <a href="/perview/jqchajian-d1349925685217042433" title="原作者的插件在项目中使用后遇到问题后改版" target="_blank" class="rank-item text-overflow"> <span class="rank-num">9</span> 仿今日头条App顶部导航点击可居中(优化版) </a> </li> <li> <a href="/perview/jqchajian-d1349925338159267842" title="jQuery仿flash导航代码" target="_blank" class="rank-item text-overflow"> <span class="rank-num">10</span> jQuery仿flash导航代码 </a> </li> <li> <a href="/perview/jqchajian-d1349925174665281537" title="用于table分页" target="_blank" class="rank-item text-overflow"> <span class="rank-num">11</span> paging 分页插件 </a> </li> <li> <a href="/perview/jqchajian-d1349925185834713090" title="可动态生成表格，动态插入数据，生成页码" target="_blank" class="rank-item text-overflow"> <span class="rank-num">12</span> 简易的动态生成表格和分页效果(原创) </a> </li> <li> <a href="/perview/jqchajian-d1349925166394114050" title="表格分页，li分页" target="_blank" class="rank-item text-overflow"> <span class="rank-num">13</span> jQuery分页插件jQuery.pager.js </a> </li> <li> <a href="/perview/jqchajian-d1349924776898531329" title="css3回转菜单" target="_blank" class="rank-item text-overflow"> <span class="rank-num">14</span> css3回转菜单 </a> </li> <li> <a href="/perview/jqchajian-d1349925679705726977" title="jquery.SlidingBlock.js是一款基于jQuery的滑块伴随鼠标移动的水平方向菜单导航条插件，可以根据喜好进行个性化的UI定制。兼容性：支持Chrome、Safari、Firefox、IE8+ 等主流浏览器。" target="_blank" class="rank-item text-overflow"> <span class="rank-num">15</span> jQuery水平方向菜单导航条滑块伴随鼠标移动(原创) </a> </li> </ul> <ul class="tab-cont"> <li class="has-img"> <a href="/perview/jqchajian-s1348217737583054850" title="可定义多种日期格式及人性化配置" target="_blank" class="img fl"> <img src="http://www.zjdaima.com/jqchajian/shuru/riqishijian/angularjs日期选择插件/wui-date/zjdaima-bg-1330374588.png" alt="可定义多种日期格式及人性化配置"> <span class="rank">1</span> </a> <div class="info fr"> <a href="#" class="text-overflow" target="_blank" title="可定义多种日期格式及人性化配置">angularjs日期选择插件</a>  <p> <i class="iconfont icon-collect fl">10323</i>  </p> </div> </li> <li class="has-img"> <a href="/perview/jqchajian-s1348218249472749569" title="仿浏览器主页搜索功能，多种搜索方式切换" target="_blank" class="img fl"> <img src="http://www.zjdaima.com/jqchajian/shuru/sousuo/仿浏览器主页搜索(原创)/jqueryseo/zjdaima-bg-1005006725.png" alt="仿浏览器主页搜索功能，多种搜索方式切换"> <span class="rank">2</span> </a> <div class="info fr"> <a href="#" class="text-overflow" target="_blank" title="仿浏览器主页搜索功能，多种搜索方式切换">仿浏览器主页搜索(原创)</a>  <p> <i class="iconfont icon-collect fl">10308</i>  </p> </div> </li> <li class="has-img"> <a href="/perview/jqchajian-s1348219070352470018" title="js中文汉字转拼音带声调" target="_blank" class="img fl"> <img src="http://www.zjdaima.com/jqchajian/shuru/zidongwancheng/js汉字转拼音/jshanyuzpi/zjdaima-bg-615590702.png" alt="js中文汉字转拼音带声调"> <span class="rank">3</span> </a> <div class="info fr"> <a href="#" class="text-overflow" target="_blank" title="js中文汉字转拼音带声调">js汉字转拼音</a>  <p> <i class="iconfont icon-collect fl">10295</i>  </p> </div> </li> <li> <a href="/perview/jqchajian-s1348218843608510466" title="当单个选中所有时，全选自动变成全选状态；当全选后，取消其中一个，全选状态改变。" target="_blank" class="rank-item text-overflow"> <span class="rank-num">4</span> vue2.0实现全选，全不选。 </a> </li> <li> <a href="/perview/jqchajian-s1348218843637870593" title="移动端优惠券点击使用效果，通用的商城优惠券选择兑换点击付款手机页面模板。" target="_blank" class="rank-item text-overflow"> <span class="rank-num">5</span> vue移动端优惠券模板 </a> </li> <li> <a href="/perview/jqchajian-s1348216906037190658" title="jquery表单验证插件form_validation.js,常用表单验证，手机号码验证、居民身份证验证、邮政编码验证，邮箱验证，jquery,jquery插件" target="_blank" class="rank-item text-overflow"> <span class="rank-num">6</span> jquery表单验证插件form_validation.js </a> </li> <li> <a href="/perview/jqchajian-s1348217580455997442" title="js对密码进行MD5加密" target="_blank" class="rank-item text-overflow"> <span class="rank-num">7</span> 前端MD5加密插件md5.pro.js </a> </li> <li> <a href="/perview/jqchajian-s1348217740481318913" title="使用jQuery和CSS3圆形倒计时特效。该特效使用CSS对页面进行布局，生成用于倒计时的圆环，然后通过jquery代码来控制圆环的倒计时进度。" target="_blank" class="rank-item text-overflow"> <span class="rank-num">8</span> jQuery环型进度倒计时 </a> </li> <li> <a href="/perview/jqchajian-s1348219069396168706" title="jQuery实现汉字转拼音的插件" target="_blank" class="rank-item text-overflow"> <span class="rank-num">9</span> jQuery实现汉字转拼音的插件 </a> </li> <li> <a href="/perview/jqchajian-s1348217458598957058" title="jQuery网页键盘插件，可移动，可输入汉字的多功能键盘" target="_blank" class="rank-item text-overflow"> <span class="rank-num">10</span> jQuery多功能网页键盘插件 </a> </li> <li> <a href="/perview/jqchajian-s1348217458401824770" title="jQuery键盘插件Virtual Keyboard也称虚拟键盘，是一种非常实用的工具，可以让那些有移动障碍的用户用指针设备或游戏杆输入数据。"" target="_blank" class="rank-item text-overflow"> <span class="rank-num">11</span> jQuery QWERTY软键盘插件Virtual Keyboard </a> </li> <li> <a href="/perview/jqchajian-s1348219070205669378" title="jQuery输入框数值加减调整0到100插件" target="_blank" class="rank-item text-overflow"> <span class="rank-num">12</span> jQuery输入框数值加减调整插件 </a> </li> <li> <a href="/perview/jqchajian-s1348218939121111041" title="Magnet.js是一个JavaScript库。它可以是实现DOM元素的拖拽、分组并使它们相互吸引,非常强大。" target="_blank" class="rank-item text-overflow"> <span class="rank-num">13</span> jQuery拖拽插件Magnet.js </a> </li> <li> <a href="/perview/jqchajian-s1348219070839009282" title="电商网站常用的购物结算页面模板" target="_blank" class="rank-item text-overflow"> <span class="rank-num">14</span> vue购物结算页面模板 </a> </li> <li> <a href="/perview/jqchajian-s1348217738849734658" title="3种jquery翻拍样式倒计时插件html5倒计时特效代码" target="_blank" class="rank-item text-overflow"> <span class="rank-num">15</span> jQuery倒计时插件countdown.js </a> </li> </ul> </div>  </div> </div> </section> </div> </div>  <div id="footer_parent"> <div id="footer" > <div class="container auto-width">                                                           <div class="footer-middle clearfix"> <div class="item"> <a href="/index"><i class="icon icon-1"></i>指尖代码-资源下载中心</a> </div> <div class="item"> <span> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011202002662" rel="nofollow"> <img src="/img/wangan.png"> <p style="height:25px; color:#939393;display: inline-block">京公网安备 11011202002662号</p> </a> </span> </div> <div class="item"> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备19016706号-2</a> </div> </div> <div class="footer-bottom"> <p>本站所有内容均来自互联网所提供的公开引用资源。</p> </div> </div> </div> </div> <a href="javascript:;" id="back_top" class="iconfont icon-up"></a> </body> <div class="lms-down-res" id="downLoadDialog" style="display: none"> <div class="lms-down-tishi"> <i class="layui-icon layui-icon-fonts-strong" style="font-size: 13px; color: #1E9FFF;"></i> <span>我当前的Z币余额：</span><span class="lms-down-Info" id="myScore">0</span> <i class="layui-icon layui-icon-download-circle" style="font-size: 15px;font-weight: 900; color: #1E9FFF;"></i> <span>已提取次数：</span><span class="lms-down-Info1">509</span> </div> <div class="lms-down-button-grop"> <button type="button" class="layui-btn layui-btn-lg layui-btn-normal" onclick="zbDown("jqchajian-s1348217458263412737");"><i class="layui-icon"></i> Z币下载：<span>5</span></button> <button type="button" class="layui-btn layui-btn-lg layui-btn-normal" onclick="vipDownLoad("jqchajian-s1348217458263412737");"><i class="layui-icon layui-icon-diamond"></i> 会员下载</button> </div> <div class="lms-down-button-zhuyi"> 会员Z币提取优惠：<span>1</span> </div> <div class="lms-down-button-zhuyi2"> 本站会员可以提取所有资源 <i class="layui-icon layui-icon-right" style="font-size:12px;color: #1E9FFF;"><a href="http://www.zjdaima.com:80/user/toVip" target="_blank" class="kaitongvip" >马上开通</a></i> </div> <div class="lms-down-button-jingao">  会员使用Z币提取，自动使用优惠！ </div> </div> <script src="/js/jquery.min.js"></script> <script src="/js/script.js"></script> <script src="/js/sliderbox.js"></script> <script src="/js/tab.js"></script> <link rel="stylesheet" href="/layui/css/layui.css"/> <script src="/layui/layui.js"></script> <script> var ctx = "\/"; </script> <script> layui.use(['element','layer','util'], function(){ var element = layui.element; var layer = layui.layer; var util = layui.util; layer.config({ extend: 'myskin/style.css' //同样需要加载新皮肤 }); util.fixbar({ bar1: false, css: {right: 50, bottom: 50}, bgcolor: '#242424' ,click: function(type){ console.log(type); if(type === 'bar1'){ alert('点击了bar1') } } }); }); /** * 预览 * @param url */ function perview(contentid){ window.open( ctx + 'onlineperview/'+contentid); } function userCollect(articleid) { $.ajax({ url : ctx + "user/userCollect", type : "POST", async : false, data : {"articleId":articleid}, dataType : 'json', success : function(data) { console.log(data); if (data.code == 1){ //未登录 layer.confirm(data.msg, { btn: ['取消','登录'], anim: 1, resize:false, title:'<i class="layui-icon layui-icon-username" style="font-size: 20px; color: white;"></i> 登录提示 ', skin:'myskin_green_btn2' }, function(index){ layer.close(index); }, function(){ //登录 window.open(ctx + 'phonelogin'); }); } else if(data.code == 0) { layer.msg('收藏成功，在个人中心查看'); } else { layer.alert(data.msg, { skin: 'myskin-red',closeBtn: 0 }); } }, error: function() { layer.alert('未知错误，请刷新页面重试！', { skin: 'layui-layer-lan',closeBtn: 0 }); } }); } /** * 提取 */ function download(contentid){ $.ajax({ url : ctx + "user/downloadDialog", type : "post", async : false, data : {"contentid":contentid}, dataType : 'json', success : function(data) { var returnData = data; if (returnData.code == 1){ //未登录 layer.confirm('您尚未登录，是否马上登录？', { btn: ['取消','登录'], anim: 1, resize:false, title:'<i class="layui-icon layui-icon-username" style="font-size: 20px; color: white;"></i> 登录提示 ', skin:'myskin_green_btn2' }, function(index){ layer.close(index); }, function(){ //登录 window.open(ctx + 'phonelogin'); }); } else if(returnData.code == 0) { $("#myScore").html(returnData.data.myScore); layer.open({ type: 1, resize:false, title:[' ' + returnData.data.article.title, 'font-size:20px;color: white;background: #5FB878;height: 55px;line-height:55px'], area: ['470px', '290px'], content:$('#downLoadDialog') }); } else if (returnData.status == 409){ layer.alert(returnData.msg, { skin: 'myskin-red',closeBtn: 0 }); } else { layer.alert('未知错误，请刷新页面重试！', { skin: 'myskin-red',closeBtn: 0 }); } }, error: function() { layer.alert('未知错误，请刷新页面重试！', { skin: 'layui-layer-lan',closeBtn: 0 }); } }); } function vipDownLoad(contentid) { $.ajax({ url : ctx + "user/vipDownLoad", type : "post", async : false, data : {"contentid":contentid}, dataType : 'json', success : function(data) { var returnData = data; if (returnData.code == 1){ //未登录 layer.alert(returnData.msg, { skin: 'myskin-red', closeBtn: 0 }); } else if(returnData.code == 0) { if (!returnData.data){ layer.msg("对不起，此资源提取链接错误，我们会尽快修复，请您看看其他资源吧-_-"); return; } layer.closeAll(); //示范一个公告层 layer.open({ type: 1 ,title: false //不显示标题栏 ,closeBtn: false ,area: '650px;' ,shade: 0.8 ,id: 'LAY_layuipro2132' ,resize: false ,btn: ['关闭'] ,btnAlign: 'c' ,moveType: 0 ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #009688\n' + '\n; font-weight: 900;">提取链接：<a href="'+returnData.data.url+'" target="_blank">'+returnData.data.url+'</a><br>提取密码：'+returnData.data.password+'</div>' ,success: function(layero){ } }); } else { layer.alert(data.msg, { skin: 'layui-layer-lan',closeBtn: 0 }); } }, error: function() { layer.alert('未知错误，请刷新页面重试！', { skin: 'layui-layer-lan',closeBtn: 0 }); } }); } function zbDown(contentid){ $.ajax({ url : ctx + "user/zbDown", type : "post", async : false, data : {"contentid":contentid}, dataType : 'json', success : function(data) { var returnData = data; if (returnData.code== 1 || returnData.code== 10){ //未登录 layer.alert(returnData.msg, { skin: 'myskin-red',closeBtn: 0 }); } else if(returnData.code == 0) { layer.closeAll(); if (!returnData.data){ layer.msg("对不起，此资源提取链接错误，我们会尽快修复，请您看看其他资源吧-_-"); return; } //示范一个公告层 layer.open({ type: 1 ,title: false //不显示标题栏 ,closeBtn: false ,area: '650px;' ,shade: 0.8 ,id: 'LAY_layuipro422342' //设定一个id，防止重复弹出 ,resize: false ,btn: ['关闭'] ,btnAlign: 'c' ,moveType: 0 //拖拽模式，0或者1 ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #009688\n' + '\n; font-weight: 900;">提取链接：<a href="'+returnData.data.url+'" target="_blank">'+returnData.data.url+'</a><br>提取密码：'+returnData.data.password+'</div>' ,success: function(layero){ } }); } else { layer.alert('未知错误，请刷新页面重试！', { skin: 'myskin-red',closeBtn: 0 }); } }, error: function() { layer.alert('未知错误，请刷新页面重试！', { skin: 'myskin-red',closeBtn: 0 }); } }); } function closeAllW(){ layer.closeAll(); window.location.reload(); } </script> </html>