django-ckeditor添加代码功能(codesnippet)
最近做了一个博客,使用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)的更多相关文章
- ckeditor添加代码插入功能及高亮显示(插件)
Auto SyntaxHighlighter SyntaxHighlighter CKEditor Button 下载以上两个插件,启用 以下可有可无: (设置在编辑器的显示样式) ckeditor高 ...
- django中添加日志功能
官方文档 猛戳这里 在settings中配置以下代码 #LOGGING_DIR 日志文件存放目录 LOGGING_DIR = "logs" # 日志存放路径 if not os.p ...
- 富文本文件CKEDITOR增加上传图片功能(.net)
如题,本身的CKEDITOR控件并没有开启上传图片的功能, 打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKE ...
- CKEditor 4.4.1 添加代码高亮显示插件功能--使用官方推荐Code Snippet插件
随着CKEditor4.4.1的发布,以前一直困扰的代码高亮问题终于完美的得到解决,在CKEditor4.4中官方发布了Code Snippet这个代码片段的插件,终于可以完美的内嵌使用代码高亮了,以 ...
- Django ckeditor增加编辑代码 功能
前言 使用ckeditor这个组件的时候 对于长写博客的同学当然希望能有 增加代码这个功能按钮 而这个按钮 需要自己配置 我们的编辑器自然需要添加代码块的功能. 需要用到插件codesnippet,c ...
- 使用prismjs为网站添加代码高亮功能
prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...
- ckeditor4.4.6添加代码高亮
研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.j ...
- Django-中间件-csrf扩展请求伪造拦截中间件-Django Auth模块使用-效仿 django 中间件配置实现功能插拔式效果-09
目录 昨日补充:将自己写的 login_auth 装饰装在 CBV 上 django 中间件 django 请求生命周期 ***** 默认中间件及其大概方法组成 中间件的执行顺序 自定义中间件探究不同 ...
- Python Django 实现简单注册功能
Python Django 实现简单注册功能 项目创建略,可参考前期文档介绍. 目录结构如下 编辑views.py from django.shortcuts import render # Crea ...
随机推荐
- hyperledger fabric 1.0.5 分布式部署 (七)
fabric 使用 fabric-ca 服务 准备部分 首先需要用户从github上download fabric-ca 的工程代码 cd $GOPATH/src/github.com/hyperle ...
- mysql项目实战经验
一.项目的编码设置 目的:避免出现莫名其妙错误,笔者曾经就碰到因编码不对返回null而浪费大量时间:统一的编码可以减少解析的时间,提高效率 1.1修改my.ini文件 一般在C:\Program ...
- 547 Friend Circles 朋友圈
班上有 N 名学生.其中有些人是朋友,有些则不是.他们的友谊具有是传递性.如果已知 A 是 B 的朋友,B 是 C 的朋友,那么我们可以认为 A 也是 C 的朋友.所谓的朋友圈,是指所有朋友的集合.给 ...
- The Weakest Sith
http://codeforces.com/gym/101149/problem/F 题目要输出最丑陋的衣服.所以每件衣服都要和其他衣服比一次. 但是注意到,能赢一件衣服的衣服,就算是好衣服了. 那么 ...
- Github开源项目单
以下涉及到的数据统计与 2019 年 5 月 1 日 12 点,数据来源:https://github.com/trending/java?since=monthly . 下面的内容从 Java 学习 ...
- [android][avd位置修改][需自己手动]
1.找到avd目录(C:\的那个)并打开,移动.avd文件到需要的位置. 2.修改ini文件path,完成.
- android开发学习 ------- debug 和 release版本执行结果不同
在debug上测试成功的,release上测试不成功,就想着怎么将 release 版本进行调试一下.还好 Android Studio 3.0是可以进行调试apk的 可以显示log,自己看自己的逻辑 ...
- h5画圆
下面一段代码是,h5的画圆,半圆,四分之一圆等效果 <!DOCTYPE html> <html lang="en"> <head> <me ...
- Android WiFi使用记录
最近在做Android的WiFi部分的开发,连接的工具类参照了这个文章的工具类. http://www.cnblogs.com/zhuqiang/p/3566686.html 开发中碰上的一些问题,在 ...
- Node.js 打造实时多人游戏框架
在 Node.js 如火如荼发展的今天,我们已经可以用它来做各种各样的事情.前段时间UP主参加了极客松活动,在这次活动中我们意在做出一款让“低头族”能够更多交流的游戏,核心功能便是 Lan Party ...