坑爹的django-ckeditor添加代码高亮

最新推荐文章于 2024-08-13 08:13:25 发布

Shaft_

最新推荐文章于 2024-08-13 08:13:25 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签：工具富文本编辑器

本文链接：https://blog.csdn.net/Shaft_/article/details/80382044

版权

本文档详细介绍了如何在Django中为CKEditor富文本编辑器手动添加并配置代码高亮功能。由于CKEditor官方教程存在一些问题，导致插件注册后无法自动显示代码高亮图标。通过在ckeditor/config.js中注册插件，以及在settings.py中进行相应设置，可以解决这个问题。同时，文中指出了网上的教程中关于按钮注册名称的错误，并提供了正确的解决方案。

摘要由CSDN通过智能技术生成

ckeditor是一个非常好用的在线富文本编辑器，但是由于其不自带代码高亮，所以需要我们自己添加代码高亮。官方给出的方法是在ckeditor/plugins中注册插件，由于现在版本的ckeditor已经自带代码高亮插件，于是可以直接注册，具体教程网上都有，但是按照官网注册后编辑框并不能自动显示出，添加代码的图标，我发现还是需要手动添加，网上很多教程都已经过时了，我现在来做一份最新的ckeditor代码高亮插件，添加教程；

一、方法：

（1）在ckeditor/config.js中，添加

config.extraPlugins: "codesnippet";

来注册这个插件

（2）在项目的settings.py中添加：

CKEDITOR_CONFIGS = {
    'default': {
         'toolbar': (['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
                    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-','Print','SpellChecker',