热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ckeditor表情包自定义

定制CKEditor的表情添加以上css到对应htmldom里来解决溢出*Copyright(c)2003-2017,CKSource-FredericoKnabben.Allri

定制CKEditor的表情

.cke_dialog_contents_body {
    overflow:auto;
    max-height: 500px;
}

.cke_dialog_contents_body * {
    max-height: 500px;
}

添加以上css到对应html dom里来解决溢出

技术分享技术分享
/*
 Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.dialog.add("smiley",function(f){
    for(var e=f.config
        ,a=f.lang.smiley
        ,h=e.smiley_images
        ,g=e.smiley_columns||8
        ,k
        ,m=function(l){
            var c=l.data.getTarget(),b=c.getName();
            if("a"==b)c=c.getChild(0);
            else if("img"!=b)return;
            var b=c.getAttribute("cke_src")
            ,a=c.getAttribute("title")
            ,c=f.document.createElement("img",{
                attributes:{
                    src:b,
                    "data-cke-saved-src":b,
                    title:a,
                    alt:a,
                    width:c.$.width,
                    height:c.$.height
                }
            });
            f.insertElement(c);
            k.hide();
            l.data.preventDefault()
        }
        ,q=CKEDITOR.tools.addFunction(function(a,c){
            a=new CKEDITOR.dom.event(a);
            c=new CKEDITOR.dom.element(c);
            var b;
            b=a.getKeystroke();
            var d="rtl"==f.lang.dir;
            switch(b){
                case 38:
                if(b=c.getParent().getParent().getPrevious())
                    b=b.getChild([c.getParent().getIndex(),0]),b.focus();
                a.preventDefault();
                break;
                case 40:
                (b=c.getParent().getParent().getNext())&&(b=b.getChild([c.getParent().getIndex(),0]))&&b.focus();
                a.preventDefault();
                break;
                case 32:
                m({data:a});
                a.preventDefault();
                break;
                case d?37:39:
                if(b=c.getParent().getNext())
                    b=b.getChild(0),b.focus(),a.preventDefault(!0);
                else if(b=c.getParent().getParent().getNext())
                    (b=b.getChild([0,0]))&&b.focus(),a.preventDefault(!0);
                break;
                case d?39:37:
                if(b=c.getParent().getPrevious())
                    b=b.getChild(0),b.focus(),a.preventDefault(!0);
                else if(b=c.getParent().getParent().getPrevious())
                    b=b.getLast().getChild(0),b.focus(),a.preventDefault(!0)}}),
                    d=CKEDITOR.tools.getNextId()+"_smiley_emtions_label",
                    d=[
                        ‘\x3cdiv\x3e\x3cspan id\x3d"‘+d+‘" class\x3d"cke_voice_label"\x3e‘+a.options+"\x3c/span\x3e",‘\x3ctable role\x3d"listbox" aria-labelledby\x3d"‘+
                        d+‘" style\x3d"width:100%;height:100%;border-collapse:separate;" cellspacing\x3d"2" cellpadding\x3d"2"‘,
                        CKEDITOR.env.ie&&CKEDITOR.env.quirks?‘ style\x3d"position:absolute;"‘:"",
                        "\x3e\x3ctbody\x3e"
                    ],
                    n=h.length,
                    a=0;
                    a<n;
                    a++){
                        0===a%g&&d.push(‘\x3ctr role\x3d"presentation"\x3e‘);
                        var p="cke_smile_label_"+a+"_"+CKEDITOR.tools.getNextNumber();
                        d.push(‘\x3ctd class\x3d"cke_dark_background cke_centered" style\x3d"vertical-align: middle;" role\x3d"presentation"\x3e\x3ca href\x3d"Javascript:void(0)" role\x3d"option"‘,
                        ‘ aria-posinset\x3d"‘+(a+1)+‘"‘,
                        ‘ aria-setsize\x3d"‘+n+‘"‘,
                        ‘ aria-labelledby\x3d"‘+p+‘"‘,
                        ‘ class\x3d"cke_smile cke_hand" tabindex\x3d"-1" onkeydown\x3d"CKEDITOR.tools.callFunction( ‘,
                        q,
                        ‘, event, this );"\x3e‘,‘\x3cimg class\x3d"cke_hand" title\x3d"‘,
                        e.smiley_descriptions[a],
                        ‘" cke_src\x3d"‘,
                        CKEDITOR.tools.htmlEncode(e.smiley_path+h[a]),
                        ‘" alt\x3d"‘,e.smiley_descriptions[a],
                        ‘"‘,
                        ‘ src\x3d"‘,
                        CKEDITOR.tools.htmlEncode(e.smiley_path+h[a]),
                        ‘"‘,
                        CKEDITOR.env.ie?" onload\x3d\"this.setAttribute(‘width‘, 2); this.removeAttribute(‘width‘);\" ":"",
                        ‘\x3e\x3cspan id\x3d"‘+p+‘" class\x3d"cke_voice_label"\x3e‘+e.smiley_descriptions[a]+"\x3c/span\x3e\x3c/a\x3e",
                        "\x3c/td\x3e");
                        a%g==g-1&&d.push("\x3c/tr\x3e")
                }
                if(a){
                    for(;a)
                        d.push("\x3ctd\x3e\x3c/td\x3e");
                        d.push("\x3c/tr\x3e")
                    }
                    d.push("\x3c/tbody\x3e\x3c/table\x3e\x3c/div\x3e");
                    e={
                        type:"html",
                        id:"smileySelector",
                        html:d.join(""),
                        onLoad:function(a){
                            k=a.sender
                        },
                        focus:function(){
                            var a=this;setTimeout(function(){
                                a.getElement().getElementsByTag("a").getItem(0).focus()
                            },0)
                        },
                        onClick:m,
                        style:"width: 100%; border-collapse: separate;"
                    };
                return {
                    title:f.lang.smiley.title,
                    minWidth:270,
                    minHeight:120,
                    contents:[
                        {id:"tab1",label:"",title:"",expand:!0,padding:0,elements:[e]}
                    ],
                    buttons:[
                        CKEDITOR.dialog.cancelButton
                    ]
                }
            });
smiley.js
c=f.document.createElement("img",{
                attributes:{
                    src:b,
                    "data-cke-saved-src":b,
                    title:a,
                    alt:a,
                    width:c.$.width,
                    height:c.$.height
                }
            });
            f.insertElement(c);
这一段是添加表情到编辑器的代码,如果不想设置width和height可以直接去掉

CKEDITOR.dom.document

 
                return {
                    title:f.lang.smiley.title,
                    minWidth:270,
                    minHeight:120,
                    contents:[
                        {id:"tab1",label:"",title:"",expand:!0,padding:0,elements:[e]}
                    ],
                    buttons:[
                        CKEDITOR.dialog.cancelButton
                    ]
                }

这一段是表情选择对话框配置,官方文档:

CKEDITOR.dialog.definition

ckeditor 表情包自定义


推荐阅读
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 在project.properties添加#Projecttarget.targetandroid-19android.library.reference.1..Sliding ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
author-avatar
F_hai丽
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有