django ckeditor插件按钮

Black & White

• Home
• Contact

给Django Ckeditor插件增加插入代码功能

Python  November 17, 2016

在使用Django作为后台管理工具时，我们经常需要使用富文本编辑器，虽然有了Ckeditor for Django的插件，但是该插件并没有提供插入代码的功能，对于经常写技术文章的我们来说，该功能是必不可少的。下面就介绍一下如何给Ckeditor增加一个插入代码的功能。

1. 给Django安装Ckeditor插件，方法请自行百度。
2. 找到安装Ckeditor插件后的目录，比如我本机是在：C:\Python27\Lib\site-packages\django_ckeditor_updated-4.2.8-py2.7.egg\ckeditor\static\ckeditor\ckeditor\plugins。
3. 在该目录新建文件夹并命名为insertcode。
4. 在insertcode文件夹下再创建两个文件夹，分别为：dialogs、images。
5. 在dialogs文件夹下新建insertcode.js文件，并输入以下代码：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

   CKEDITOR.dialog.add( 'insertcode' , function (editor){      var escape = function (value){          return value.replace(/[<>]/g, function (c){ return { '<' : '&lt;' , '>' : '&gt;' }[c];});      };      return {          title: 'Insert Code Dialog' ,          resizable: CKEDITOR.DIALOG_RESIZE_BOTH,          minWidth: 720,          minHeight: 480,          contents: [{              id: 'cb' ,              name: 'cb' ,              label: 'cb' ,              title: 'cb' ,              elements: [{                  type: 'select' ,                  label: 'Language' ,                  id: 'lang' ,                  required: true ,                  'default' : 'csharp' ,                  items: [[ 'ActionScript3' , 'as3' ], [ 'Bash/shell' , 'bash' ], [ 'C#' , 'csharp' ], [ 'C++' , 'cpp' ], [ 'CSS' , 'css' ], [ 'Delphi' , 'delphi' ], [ 'Diff' , 'diff' ], [ 'Groovy' , 'groovy' ], [ 'Html' , 'xhtml' ], [ 'JavaScript' , 'js' ], [ 'Java' , 'java' ], [ 'JavaFX' , 'jfx' ], [ 'Perl' , 'perl' ], [ 'PHP' , 'php' ], [ 'Plain Text' , 'plain' ], [ 'PowerShell' , 'ps' ], [ 'Python' , 'py' ], [ 'Ruby' , 'rails' ], [ 'Scala' , 'scala' ], [ 'SQL' , 'sql' ], [ 'Visual Basic' , 'vb' ], [ 'XML' , 'xml' ]]              }, {                  type: 'textarea' ,                  style: 'width:700px;height:420px' ,                  label: 'Code' ,                  id: 'code' ,                  rows: 31,                  'default' : ''              }]          }],          onOk: function (){              code = this .getValueOf( 'cb' , 'code' );              lang = this .getValueOf( 'cb' , 'lang' );              html = '' + escape(code) + '' ;              editor.insertHtml( '<pre class="brush:' + lang + ';">' + html + '</pre>' );          },          onLoad: function (){          }      }; });

6. 在images文件夹下放一张jpg格式的图片，图片命名为code.jpg，这张图片将作为插入代码的图标显示在Ckeditor工具栏。
7. 回到insertcode文件夹，新建plugin.js文件，并输入以下代码：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   /*   Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.   For licensing, see LICENSE.html or http://ckeditor.com/license   */ CKEDITOR.plugins.add( 'insertcode' , {      requires: [ 'dialog' ],      init: function (a){          var b = a.addCommand( 'insertcode' , new CKEDITOR.dialogCommand( 'insertcode' ));          a.ui.addButton( 'insertcode' , {              label: '插入代码' ,              command: 'insertcode' ,              icon: this .path + 'images/code.jpg'          });          CKEDITOR.dialog.add( 'insertcode' , this .path + 'dialogs/insertcode.js' );      } });

8. 进入C:\Python27\Lib\site-packages\django_ckeditor_updated-4.2.8-py2.7.egg\ckeditor\static\ckeditor\ckeditor\目录，打开config.js，添加以下代码：

   1	config.extraPlugins = 'insertcode' ;

9. 打开你Django项目的settings.py，在文件最后添加以下内容，注意，最后一个insertcode是我们自己添加的插件，不是Ckeditor自带的：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   CKEDITOR_CONFIGS = {      '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' , 'insertcode' ],          ),      } }

按照以上步骤就可以给Ckeditor增加插入代码功能，效果如下图：

从图片可以看出，虽然我们添加了代码，但是在Ckeditor中代码没有突出显示，解决办法就是修改Ckeditor的css文件，给代码块添加一个样式。在C:\Python27\Lib\site-packages\django_ckeditor_updated-4.2.8-py2.7.egg\ckeditor\static\ckeditor\ckeditor目录下找到contents.css文件，在文件末尾增加以下代码：

1 2 3 4 5 6 7 8

.cke_editable pre {      font-size : 9pt ;      font-family : Courier New, Arial ;      border : 1px solid #ddd ;      border-left : 5px solid #6CE26C ;      background : #f6f6f6 ;      padding : 5px ; }

刷新页面，再次插入代码，效果如图：

© 2016 Fred Zhang