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

  • 相关阅读:
    从零开始,SpreadJS新人学习笔记【第4周】
    如何使用JavaScript实现前端导入和导出excel文件
    【案例分享】在 React 框架中使用 SpreadJS 纯前端表格控件
    中国高考志愿填报与职业趋势分析
    Vue 2019开发者图谱
    从零开始,SpreadJS新人学习笔记【第3周】
    从零开始,SpreadJS 新人学习笔记(第二周)
    从零开始,SpreadJS 新人学习笔记
    Spread.NET 表格控件 V12.1 正式发布
    汇编语言-端口
  • 原文地址:https://www.cnblogs.com/yf-html/p/9452574.html
Copyright © 2011-2022 走看看