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月 的第一封  加油啦