zoukankan      html  css  js  c++  java
  • Django ckeditor增加编辑代码 功能

     

    前言

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

      而这个按钮 需要自己配置

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

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

    安装

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

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

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

     1  'default': {
     2         'toolbar': (
     3             ['div','Source','-','Save','NewPage','Preview','-','Templates'],
     4             ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
     5             ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
     6             ['Form','Checkbox','Radio','TextField','Textarea','Select','Button', 'ImageButton','HiddenField'],
     7             ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
     8             ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
     9             ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    10             ['Link','Unlink','Anchor'],
    11             ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    12             ['Styles','Format','Font','FontSize'],
    13             ['TextColor','BGColor'],
    14             ['Maximize','ShowBlocks','-','About', 'pbckcode'],
    15             ['Blockquote', 'CodeSnippet'],
    16         ),
    17         'width': 'auto',
    18         # 添加按钮在这里
    19         'toolbar_Custom': [
    20             ['NumberedList', 'BulletedList'],
    21             ['Blockquote', 'CodeSnippet'],
    22         ],
    23        # 插件
    24         'extraPlugins': ','.join(['codesnippet','widget','lineutils',]),
    25     },

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

      在上面的 17 行 增加   

    'width': 'auto',

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

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

  • 相关阅读:
    数学+高精度 ZOJ 2313 Chinese Girls' Amusement
    最短路(Bellman_Ford) POJ 1860 Currency Exchange
    贪心 Gym 100502E Opening Ceremony
    概率 Gym 100502D Dice Game
    判断 Gym 100502K Train Passengers
    BFS POJ 3278 Catch That Cow
    DFS POJ 2362 Square
    DFS ZOJ 1002/HDOJ 1045 Fire Net
    组合数学(全排列)+DFS CSU 1563 Lexicography
    stack UVA 442 Matrix Chain Multiplication
  • 原文地址:https://www.cnblogs.com/yf-html/p/9452574.html
Copyright © 2011-2022 走看看