Django ckeditor增加编辑代码功能

前言

使用ckeditor这个组件的时候对于长写博客的同学当然希望能有增加代码这个功能按钮

而这个按钮需要自己配置

我们的编辑器自然需要添加代码块的功能。

需要用到插件codesnippet，ckeditor的插件放在了ckeditor/static/ckeditor/ckeditor/plugins/路径下。

安装

当我们添加一个功能插件时，需要在CKEDITOR_CONFIGS里的extraPlugins对应的value里添加该插件的名字（名字字母小写），

如果该插件还有相对应的按钮，则在toolbar对应的value里添加名字（首字母大写），以codesnippet为例，

在下面代码的第21行和24行分别添加了 'CodeSnippet' 和 'codesnippet'

  'default': {

         'toolbar': (

             ['div','Source','-','Save','NewPage','Preview','-','Templates'],

             ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],

             ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

             ['Form','Checkbox','Radio','TextField','Textarea','Select','Button', 'ImageButton','HiddenField'],

             ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

             ['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'],

             ['Maximize','ShowBlocks','-','About', 'pbckcode'],

             ['Blockquote', 'CodeSnippet'],

         ),

         'width': 'auto',

         # 添加按钮在这里

         'toolbar_Custom': [

             ['NumberedList', 'BulletedList'],

             ['Blockquote', 'CodeSnippet'],

         ],

        # 插件

         'extraPlugins': ','.join(['codesnippet','widget','lineutils',]),

     },

当然你需要让你的富文本编辑器自适应屏幕

在上面的 17 行增加

'width': 'auto',

哈哈然后打开你的浏览器访问后台项目就能看到啦

hah 开心ok啦 8月的第一封加油啦

巴特西

Django ckeditor增加编辑代码功能

前言

安装

最新文章

热门文章

巴特西

Django ckeditor增加编辑代码 功能

前言

安装

最新文章

热门文章

Django ckeditor增加编辑代码功能