• django-ckeditor表情包修改


    一、版本

    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.解决了你的问题记得顶我哦哈哈


  • 相关阅读:
    wap学习记录
    vue router
    webpack 之 缓存处理
    webpack 之 plugin
    webpack 之 loader
    babel实践
    webpack 之 webpack-dev-server自动刷新
    webpack之source map
    vue笔记
    《高性能网站建设指南》笔记
  • 原文地址:https://www.cnblogs.com/hiveme/p/8194825.html
Copyright © 2020-2023  润新知