CKEditor-添加自己喜欢的表情

CKEditor默认的smiley表情不适合我们,我们可以将表情改造一下换成自己喜欢的表情,方法如下。

1. 下载你想要的表情包,一般是gif格式的图片,将这些这些图片放在…../ckeditor/plugins/smiley/images中

2.打开ckeditor.js 找到 i.smiley_images= 把里面自带的表情删除,然后写上要替换的表情图片名称.

3. 修改配置ckeditor文件夹下的config.js

中CKEDITOR.editorConfig = function (config) {}

中添加如下代码

config.smiley_images = [‘e100.gif‘, ‘e101.gif‘, ‘e102.gif‘]

config.smiley_images = [] 中可以按照格式添加任意多个表情名称(前提:图片存在…../ckeditor/plugins/smiley/images中)

config.smiley_columns = 8 每行显示的表情个数。

3.当你的图标过多时,由于显示不开会导致一部分图标无法显示,而且表情图标对话框没有滚动条,为了避免这种问题,我们可以修改一下css文件。找到ckeditor/skins/v2/dialog.css(假定你使用了默认的皮肤v2),在最后一行添加如下代码

.cke_dialog_ui_html{height:350px;overflow:auto;}

这个文件是经过压缩的,所以添加代码时注意不要有空格。height定义对话框的高度,可以根据自己的需要写。这样表情多时会出现滚动条,就可以正常使用了。如果你的表情很少,就不要做这个改动,不然显示会出问题。

【原文】http://549453943-qq-com.iteye.com/blog/2029282

时间: 2024-08-09 17:44:10

CKEditor-添加自己喜欢的表情的相关文章

ckeditor添加日历控件

这里日历控件用的是开源的My97DatePicker,先看下效果图: 1.点击左侧自定义的日历控件按钮,弹出日历控件对话框. 2.点击确定,日历控件添加的表单设计器中,同时保留日历的控件样式 3.点击ckeditor的预览控件,查看是否可以进行日历的选择. 下面就说一下实现,关于如何在ckeditor中添加自定义控件,可参考<ckeditor_4.4.5 自定义工具栏>一文. 首先将My97DatePicker的js文件添加到插件目录下: plugin.js的代码如下: CKEDITOR.pl

关于ckeditor添加的class都会被清除掉的问题

在源码中输入ul,并且带有class,然后点击源码,到可视化界面 结果显示为aaa,再点看源码,查看HTML源代码 解决方法: 添加配置 config.allowedContent = true 这个配置是关闭过滤内容的设置.也可以通过 config.extraAllowedContent = 'div(*)';来扩展过滤属性和标签 参考资料:http://stackoverflow.com/questions/15659390/ckeditor-automatically-strips-cla

ckeditor添加插入flv视频的插件

首发:个人博客,更新&纠错&回复 昨天写在网页中播放flv的博文的时候,想在博文中插入视频,但是发现无法实现.因为用的编辑器是ckeditor,决定自己写个插件插入视频.官方的教程在这里,写得很好,又简明又清楚. 写一个插件需要建立的文件夹和文件如图所示:主目录video(此目录名即插件名)要放到ckeditor的plugins文件夹下,其中包含最主要的文件plugin.js.如果需要对话框,则需要dialogs文件夹和与插件同名的js文件,本例中即video.js.图标放在icons文件

angular+ckeditor最后上传的最后一张图片不会被添加(bug)

做法一: angularJs+ckeditor 一.页面 <textarea ckeditor required name="topicContent" ng-model="topic.body" rows="20" class="form-control col-md-8 ecp-post-content" name="content"></textarea> 二.指令 app.d

微信表情150个限制怎么破?教你一招

微信有那么高的DAU,朋友圈的贡献最高,其次是收发消息(图片文字.语音.视频等),第六是微信表情,所谓一图抵千言,微信表情增加了社交的趣味性,试问哪位朋友没保存表情的?可微信表情限制只能保存150个,有没办法突破呢?有一种方法可以替代! 这个方法很简单:你新建一个微信号,然后相互添加一下,把小号置顶,看到喜欢的表情直接转发到小号上,要用的时候直接打开小号聊天界面,找到你想发的表情,长按-分享-发送给朋友即可.这个方式还能解决部分表情过大无法保存的问题,如果不慎删除了聊天记录,登录小号将表情发给自

CKEditor学习笔记2(CKEditor基本配置修改)

第二篇,围绕这5个问题进行基本配置: 1.自定义ToolbarSet,去掉一些功能 2.加上几种常用的字体 3.修改"回车"和"Shift+回车"的换行行为 4.修改编辑区样式文件 5.更换表情图片 这些信息的配置,可以通过config.js文件进行,当然也可以创建自己的配置文件. 可以参考我的步骤: 1.首先创建一个目录custom,接着在该目录内新建一个myConfig.js配置文件. 2.JavaScript调用方式二(上一篇内容),修改为: CKEDITOR

【ionic】微信表情设置教程

NO.0 前提你的下载我的App :超级逗表情 NO.1 选择自己喜欢的表情,点击微信图标,发送给好友 NO.2 在微信中点击发送 NO.3 长按聊天窗口中的表情,点击添加到表情管理中 NO.4 现在在自己的收藏的表情中就可以刚才自己添加的表情 原文地址:[ionic]微信表情设置教程标签:ionic   微信   表情 智能推荐 微信内置浏览器UserAgent的判断 [微信技能]如何通过微信号知道对方微信的二维码 [解决方案]订阅号不允许跨号支付 [Demo]微信上墙 [No.3 Ionic

CKEditor的安装与基本使用(JSP)

文章分类:Web前端 一.下载CKEditor 1. 直接下载地址.当前最新版本号为3.5: http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip 2. 或者可直接到官方站点下载: http://ckeditor.com/download 二.安装CKEditor 解压ckeditor_3.5.zip,得到ckeditor目录,将ckeditor整个目录拷贝到项目project的根目录下,即W

快来体验手机新版本 &nbsp; 怎么玩转视频表情吧

这次Android版的手机QQ更新到版本,这个版本中针对摄像功能进行了调整,今天我们就一起来看看手机到底增加了哪些有趣的新功能.视频还能加动态表情 首先要介绍的,自然就是本次更新的主打功能--"QQ短视频挂件",简言之就是在视频中添加各种有趣的动态挂件来装饰视频内容. 具体操作是这样,点开会话框选择底部的"视频"按钮.这样我们就进入了视频拍摄界面,大体上与之前的版本没有什么区别,只是在右下角多出了一个舞会面具的图标. 点击图标,我们可以看到多出了一些可选择的表情符号