django-ckeditor添加代码功能(codesnippet)
2024-09-02 06:16:27
最近做了一个博客,使用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:然后你就大功告成了,和我截图的设置是一样的。
注:不过这个代码块发现没有显示行号的功能,日后发现了再来补充。
最新文章
- 【Win 10 应用开发】InkToolBar——涂鸦如此简单
- [XAF] 多级联列表显示
- android之二维码扫描的实现
- SQLServer之数据类型
- C语言中system()函数的用法总结(转)
- 3.Sqrt(x)
- 安装完win8后,显卡一些其他的驱动没有被正常安装,此处出现问题的机器是索尼vpccw18fc
- I535卡刷土豆修改4.1.2版本ROMV4過程
- STL整理
- iOS开发工具(上班需要必备的软件)
- GPUImage 自定义滤镜
- [UVA] 11991 - Easy Problem from Rujia Liu? [STL应用]
- MyEclipse 免安装版制作
- Apktool(3)——Apktool的使用
- 怎么用Verilog描述双向IO口
- cruise-control
- 每天进步一点点-实例为导学-一个java对象序列化的例子
- refused to Connection
- 03-02 Java键盘录入
- JS四舍五入保留两位小数