`
周仁明
  • 浏览: 9228 次
  • 性别: Icon_minigender_1
  • 来自: 宜宾
最近访客 更多访客>>
社区版块
存档分类
最新评论

将自己喜欢的表情添加到CKEditor中

    博客分类:
  • js
阅读更多

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

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

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

2. 修改配置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定义对话框的高度,可以根据自己的需要写。这样表情多时会出现滚动条,就可以正常使用了。如果你的表情很少,就不要做这个改动,不然显示会出问题。

分享到:
评论

相关推荐

    ckeditor5-emoji:一个简单的插件,可在hackathon期间创建的Unicode表情符号插入CKEditor 5中

    由于这是第三方插件,因此默认情况下未在CKEditor 5中启用它,而必须手动将其添加到其中。 有关更多信息,请参见有关的官方文档。 要安装它,请运行: npm install --save @wwalc/ckeditor5-emoji 更新构建配置时...

    ckeditor html5_video 插件添加封面和中文功能

    ckeditor4 视频插件html5-video功能增强,添加中文显示,新增添加封面的功能。内有用法示例,请丢在服务器里预览效果。

    ckeditor4添加上传视频插件

    ckeditor4添加上传视频插件 后端java配置看下面的链接 https://blog.csdn.net/sxz13145/article/details/124410416

    CKEditor 添加Video插件(MP4,MP3)并且兼容HTML5 Video插件

    CKEditor 添加Video插件(MP4)并且兼容HTML5 Video插件 1:把video文件复制到ckeditor/plugins/下面 2:ckeditor/config.js 中添加如下: a:在toolbar中['Image','Flash','Video'],配置加入“Video” 项。 b:配置 ...

    lineheight支持最新的ckeditor

    用法找见自己的ckeditor地址让后放到ckeditor/plugins/ 下,最后修改ckeditor/config.js,如果之前添加过工具则在 config.extraPlugins = 'gongju'; 这里面直接跟到后面 config.extraPlugins = 'gongju,lineheight'; ...

    ckeditor5-emoji:CKEditor 5的表情符号插件

    CKEditor 5 Emoji插件使用ckeditor5 SpecialCharacters插件的修改版的Emoji插件。表情符号集表情符号分为以下几类: 全部活动食物标志自然对象人们地方符号您可以选择特定类别或全部导入。

    ckeditor 4.1 两端对齐按钮支持中文两端对齐补丁

    在ckeditor 4.1两端对齐按钮插件中加入text-justify:inter-ideograph,以支持中文两端对齐显示。

    ckeditor Demo

    ckeditor

    CKeditor 配置好的,支持QQ表情以及去掉多余功能

    CKeditor 配置好的,支持QQ表情以及其他表情,去掉了没有用的按钮,增加了插入代码这个插件。用起来很爽。

    ckeditor配置上传视频

    最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...

    jsp中使用ckeditor

    jsp中使用ckeditor需要的jar包,js以及本人成功使用步骤

    CKEditor 4.10.1 中文版.zip

    CKEditor是新一代的FCKeditor,是一个重新开发的版本,CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。CKEditor 4.10.1 中文版 更新日志:2018-11-01已修复问题...

    extjs中嵌入ckeditor完整实例

    extjs中嵌入ckeditor的完整实例,同时有ckeditor的配置说明

    让ckeditor只读 让ckeditor只读

    把ckeditor 3.4的ckeditor.js复盖就行

    ckeditor 自动排版插件

    ckeditor 自动排版插件 本插件下载解压后直接放plugins目录下,怎么添加到ckeditor的按钮里就不用我说的吧

    ckeditor文件管理按钮

    config.js中添加名为File的按钮 config.js中添加 config.filebrowserFileBrowseUrl = '/js/ckfinder/ckfinder.html?Type=Files'; 创建目录 /ckeditor/plugins/file,把plugin.js放到里面 把图标file.gif复制到每个...

    CKEDITOR实现新闻内容富文本显示以及添加修改

    CKEDITOR实现新闻内容富文本显示以及添加修改,文档为前台实现ckeditor的代码。

    CKEditor 3.6.2中文文档

    FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。不用多介绍 全中文说明 英文不好的同学有福了

    CKEditor添加HTML5 Video插件的方法

    CKEditor4.2只能增加flash播放格式,没有视频插件。这个插件允许插入和编辑新的HTML5<video>元素。该对话框允许指定的海报图像,尺寸(他们是根据预览自动调整)和两个源文件,这样既使用了WebM格式(Chrome...

    CKEditor在表单中使用

    在这个包中,包含了原来的代码,当时这里调用了CKEditor api中的js函数,从而解决了CKEditor的项目路径问题,在CKEditor的自定义标签中不支持表达式,所以不能使用项目路径,所以需要使用js代码解决

Global site tag (gtag.js) - Google Analytics