一、版本

Django==1.11

django-ckeditor==5.2.2

二、关键步骤

1.删除旧的ckeditor静态文件

所在目录:项目目录下的static文件夹下的ckditor文件夹

rm ckeditor -rf

原因:在安装ckeditor后需要执行collectstatic命令,这个过程中的查找静态文件会去ckeditor安装目录去查找静态文件的,如果想要修改项目中的静态文件,则直接在static目录修改是没有作用的,所以先把这个文件夹删除,然后再修改ckeditor本身的内容,再执行collecstatic命令就可以使用最新的静态文件了(备注:我的ckeditor安装在虚拟环境中的,如果安装在系统中修改需谨慎)

2.拷贝想要的表情文件到ckeditor指定目录

目录是:/lib/python3.5/site-packages/ckeditor/static/ckeditor/ckeditor/plugins/smiley/images(注意这是ckeditor的安装目录)

把想要的表情复制到该目录

然后执行命令

python3 manage.py collectstatic

3.在settings.py配置表情

参考如下:

CKEDITOR_CONFIGS = {
'basic': {
'language': 'zh-cn',#语言
'uiColor':'#E0F2F4',
'width':'200%',
'height':'200%',
#'skin': 'moono',
#'skin': 'office2013',
'toolbar_Basic': [
['Source', '-', 'Bold', 'Italic']
],
'toolbar_YourCustomToolbarConfig': [
{'name': 'insert',
'items': ['Smiley',]},
],
'smiley_images':['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif',
'11.gif','12.gif','13.gif','14.gif','15.gif','16.gif','17.gif','18.gif','19.gif','20.gif',
'21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif',
'31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif',
'41.gif','42.gif','43.gif','54.gif','45.gif','46.gif','47.gif','48.gif','49.gif','50.gif',
],#使用哪些表情 'smiley_columns':10,#控制行表情个数,此处为10个
'smiley_descriptions':[],#提示文字 比如如果填 '哈哈',则当鼠标在1.gif,则出现提示文字哈哈,由于过多,此处暂时就不写了 'toolbar': 'YourCustomToolbarConfig', # put selected toolbar config here
# 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],
# 'height': 291,
# 'width': '100%',
# 'filebrowserWindowHeight': 725,
# 'filebrowserWindowWidth': 940,
# 'toolbarCanCollapse': True,
# 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
'tabSpaces': 4,
'extraPlugins': ','.join([
'image', # add hiveme
'uploadimage', # the upload image feature
# your extra plugins here
'div',
'autolink',
'autoembed',
'embedsemantic',
'autogrow',
# 'devtools',
'widget',
'lineutils',
'clipboard',
'dialog',
'dialogui',
'elementspath'
]),
},
}

实现的效果图如下:

4.福利:表情包连接

http://www.lanrenzhijia.com/others/3068.html

把这个下载下来,然后把其中的images中的表情提取出来可以直接用

5.与技术无关

1.有问题欢迎留言讨论

2.解决了你的问题记得顶我哦哈哈

django-ckeditor表情包修改的更多相关文章

  1. 项目中使用emoji表情包与表情的解析过程详情

    菜鸡一只,刚开始写博客文笔不好,有问题欢迎相互讨论.闲话不多说. 用到了三个插件 Emoji Picker 第一步 这个emoji表情包插件是我找到比较好 的一个,input框中是不能放入图片的,效果 ...

  2. WordPress中添加自定义评论表情包的方法

    先来看看效果: 现在由于WordPress版本更新,再加上WordPress主题也越来越多,而现在的主题一般都是禁用了WordPress自带的评论表情,其实自带 的评论表情也是很丑的,但是以前我们可以 ...

  3. WordPress 使用本地化的 emoji 表情包

    WordPress 结合使用 Native Emoji 和 WP Local Emoji 两个插件,可以达到使用本地化的 emoji 表情包的目的. 安装好上述两个插件并且启用: 为了使 Native ...

  4. 获取QQ所有的表情包,包括emoji,动态gif

    获取QQ所有的表情包,包括emoji,动态gif,代码如下. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xht ...

  5. 一个超级简单的node.js爬虫(内附表情包)

    之所以会想到要写爬虫,并不是出于什么高大上的理由,仅仅是为了下载个表情包而已-- 容我先推荐一下西乔出品的神秘的程序员表情包. 这套表情包着实是抵御产品.对付测试.嘲讽队友.恐吓前任的良品, 不过不知 ...

  6. Python自动生产表情包

    作为一个数据分析师,应该信奉一句话--"一图胜千言".不过这里要说的并不是数据可视化,而是一款全民向的产品形态--表情包!!!! 表情包不仅仅是一种符号,更是一种文化--是促进社交 ...

  7. 使用纯css3写出来的表情包 (^v^)

    效果如图所示: 不多说,我们直接一个一个来写出,主要列出每个表情的结构,样式我们统一写出,基本全部会用到,颜色以及结构可以根据自己的需求来调整.(里面可是没有一张图片的哦) 页面预览:http://2 ...

  8. Python爬虫入门教程 13-100 斗图啦表情包多线程爬取

    斗图啦表情包多线程爬取-写在前面 今天在CSDN博客,发现好多人写爬虫都在爬取一个叫做斗图啦的网站,里面很多表情包,然后瞅了瞅,各种实现方式都有,今天我给你实现一个多线程版本的.关键技术点 aioht ...

  9. problem: 记一次聊天框的表情包弹框不显示的找问题过程

    左边是列表,包含了群和成员,右侧是聊天窗口.点击群列表,右侧显示群聊窗口,点击学员,右侧显示私聊窗口. 群聊窗口和私聊窗口是不同的组件,但是窗口中的子组件,例如窗口的头部.中间内容部分.输入框都是复用 ...

随机推荐

  1. Python奇技

    本文目录 1. 显示有限的接口到外部 2. with的魔力 3. filter的用法 4. 一行作判断 5. 装饰器之单例 6. staticmethod装饰器 7. property装饰器 8. i ...

  2. Solidworks 如何绘制投影曲线

    1 画一个半圆,然后旋转360°得到一个正圆   2 在视图中任意绘制一条平面曲线(用样条曲线绘制)   3 退出草图,在特征选项卡中点击"投影曲线"   4 将草图2(一条平面曲 ...

  3. linux 进程间通信之 消息队列

    消息队列就是一个消息的链表. 能够把消息看作一个记录,具有特定的格式以及特定的优先级.对消息队列有写权限的进程能够向中依照一定的规则加入新消息.有读权限的进程则能够读走消息. 读走就没有了.消息队列是 ...

  4. Python常用的模块

    模块,模块就是封装了特殊功能的代码. 模块分为三种: 自定义模块 第三方模块 内置模块 自定义模块 1.自定义模块 2.模块的导入 python有大量的模块可以使用,再使用之前我们只需要导入模块就可以 ...

  5. webpack2 详解

    1.安装 npm install webpack -g npm install webpack -save-dev 2.编辑配置文件 // 引入 path var path=require('path ...

  6. vc常用类总结(转载)

    常用类 CRect:用来表示矩形的类,拥有四个成员变量:top left bottom right.分别表是左上角和右下角的坐标.可以通过以下的方法构造: CRect( int l, int t, i ...

  7. 一个TAB的jquery简单写法

    <style> .honver{ color:red;} </style><script src="../js/jquery-1.9.0.min.js" ...

  8. Table tr 的隔行变色

    <style type="text/css">    table{border-collapse:collapse;border:1px solid #999;} td ...

  9. 中科燕园GIS外包---交通运输综合地理信息平台

      集地图.服务.应用于一身交通运输综合性的GIS门户   交通运输综合地理信息平台,是集地图.服务.应用于一身交通运输综合性的GIS门户.无需复杂的设置和部署,就可以高速创建交互式地图和应用程序,并 ...

  10. Python - scrapy安装中libxml2问题

    先到 http://www.lfd.uci.edu/~gohlke/pythonlibs/#lxml 下载下面三个库的 whl,然后用pip install 来安装即可 pycurl,lxml,lib ...