最近做了一个博客,使用python3+django2.1开发的,后台编辑器和前端显示用的Django-ckeditor富文本编辑器,由于发现没有代码块功能,写上去的代码在前端展示有点乱,于是一顿问度娘查找资料后,找到了解决办法,现在就是将其记录下来,方便自己以后查看以及各位有需要的小伙伴借鉴。

首先我使用的是目前应该是最新的5.6.1版本,代码块(codesnippet)功能其实是有的,只是需要再稍加设置一下才能在使用的过程中显示。最终显示效果如图:

从图中可以看到这款富文本编辑器的功能还是蛮强悍的。codesnippet的功能也具备。

那么怎么做才能显示出来呢?

是这样的。

Step1:找到你的ckeditor安装包中的config.js路径,(‘虚拟环境’/lib/python3.6/site-packages/ckeditor/static/ckeditor/ckeditor),路径仅供参考。在其中添加这么一条语句config.extraPlugins: "codesnippet";来注册这个插件。

 /**
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see https://ckeditor.com/legal/ckeditor-oss-license
*/ CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.extraPlugins: "codesnippet"; /*这是要添加的语句*/
};

Step2:在Django项目的settings.py文件中加入:

 CKEDITOR_CONFIGS = {
'default': {
'toolbar': (['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat', '-', 'Maximize',
'ShowBlocks', '-', 'Subscript', 'Superscript', "CodeSnippet"], # 添加"CodeSnippet"到toolbar中
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField'],
['Bold', 'Italic', 'Underline', 'Strike', '-'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
['Styles', 'Format', 'Font', 'FontSize'],
['TextColor', 'BGColor'], ), 'extraPlugins': 'codesnippet', # 此处需要添加
},
}

Step3:然后你就大功告成了,和我截图的设置是一样的。

注:不过这个代码块发现没有显示行号的功能,日后发现了再来补充。


django-ckeditor添加代码功能(codesnippet)的更多相关文章

  1. ckeditor添加代码插入功能及高亮显示(插件)

    Auto SyntaxHighlighter SyntaxHighlighter CKEditor Button 下载以上两个插件,启用 以下可有可无: (设置在编辑器的显示样式) ckeditor高 ...

  2. django中添加日志功能

    官方文档 猛戳这里 在settings中配置以下代码 #LOGGING_DIR 日志文件存放目录 LOGGING_DIR = "logs" # 日志存放路径 if not os.p ...

  3. 富文本文件CKEDITOR增加上传图片功能(.net)

    如题,本身的CKEDITOR控件并没有开启上传图片的功能, 打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKE ...

  4. CKEditor 4.4.1 添加代码高亮显示插件功能--使用官方推荐Code Snippet插件

    随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了Code Snippet这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以 ...

  5. Django ckeditor增加编辑代码 功能

    前言 使用ckeditor这个组件的时候 对于长写博客的同学当然希望能有 增加代码这个功能按钮 而这个按钮 需要自己配置 我们的编辑器自然需要添加代码块的功能. 需要用到插件codesnippet,c ...

  6. 使用prismjs为网站添加代码高亮功能

    prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...

  7. ckeditor4.4.6添加代码高亮

    研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.j ...

  8. Django-中间件-csrf扩展请求伪造拦截中间件-Django Auth模块使用-效仿 django 中间件配置实现功能插拔式效果-09

    目录 昨日补充:将自己写的 login_auth 装饰装在 CBV 上 django 中间件 django 请求生命周期 ***** 默认中间件及其大概方法组成 中间件的执行顺序 自定义中间件探究不同 ...

  9. Python Django 实现简单注册功能

    Python Django 实现简单注册功能 项目创建略,可参考前期文档介绍. 目录结构如下 编辑views.py from django.shortcuts import render # Crea ...

随机推荐

  1. hyperledger fabric 1.0.5 分布式部署 (七)

    fabric 使用 fabric-ca 服务 准备部分 首先需要用户从github上download fabric-ca 的工程代码 cd $GOPATH/src/github.com/hyperle ...

  2. mysql项目实战经验

    一.项目的编码设置   目的:避免出现莫名其妙错误,笔者曾经就碰到因编码不对返回null而浪费大量时间:统一的编码可以减少解析的时间,提高效率 1.1修改my.ini文件 一般在C:\Program ...

  3. 547 Friend Circles 朋友圈

    班上有 N 名学生.其中有些人是朋友,有些则不是.他们的友谊具有是传递性.如果已知 A 是 B 的朋友,B 是 C 的朋友,那么我们可以认为 A 也是 C 的朋友.所谓的朋友圈,是指所有朋友的集合.给 ...

  4. The Weakest Sith

    http://codeforces.com/gym/101149/problem/F 题目要输出最丑陋的衣服.所以每件衣服都要和其他衣服比一次. 但是注意到,能赢一件衣服的衣服,就算是好衣服了. 那么 ...

  5. Github开源项目单

    以下涉及到的数据统计与 2019 年 5 月 1 日 12 点,数据来源:https://github.com/trending/java?since=monthly . 下面的内容从 Java 学习 ...

  6. [android][avd位置修改][需自己手动]

    1.找到avd目录(C:\的那个)并打开,移动.avd文件到需要的位置. 2.修改ini文件path,完成.

  7. android开发学习 ------- debug 和 release版本执行结果不同

    在debug上测试成功的,release上测试不成功,就想着怎么将 release 版本进行调试一下.还好 Android Studio 3.0是可以进行调试apk的 可以显示log,自己看自己的逻辑 ...

  8. h5画圆

    下面一段代码是,h5的画圆,半圆,四分之一圆等效果 <!DOCTYPE html> <html lang="en"> <head> <me ...

  9. Android WiFi使用记录

    最近在做Android的WiFi部分的开发,连接的工具类参照了这个文章的工具类. http://www.cnblogs.com/zhuqiang/p/3566686.html 开发中碰上的一些问题,在 ...

  10. Node.js 打造实时多人游戏框架

    在 Node.js 如火如荼发展的今天,我们已经可以用它来做各种各样的事情.前段时间UP主参加了极客松活动,在这次活动中我们意在做出一款让“低头族”能够更多交流的游戏,核心功能便是 Lan Party ...