jQuery编辑器KindEditor4.1.4代码高亮显示设置

2016年10月17日 14:59:10
阅读数:407

文章来源:http://blog.csdn.net/gdjlc/article/details/8483345

编辑器KindEditor官网: http://www.kindsoft.net/

1、需要加载的JS和CSS文件为:

[html] view plain copy
print?
  1. <script src="kindeditor-4.1.4/kindeditor.js" type="text/javascript" charset="utf-8"></script>
  2. <script src="kindeditor-4.1.4/plugins/code/prettify.js" type="text/javascript"></script>
  3. <link href="kindeditor-4.1.4/plugins/code/prettify.css" rel="stylesheet" type="text/css" />

2、编辑器初始化设置后,在里面加cssPath(注意路径)和prettyPrint(),这样在编辑器中插入的代码才有样式:

[html] view plain copy
print?
  1. KindEditor.ready(function (K) {
  2. window.EditorObject = K.create('#txtBody', {
  3. cssPath: 'plugins/code/prettify.css',
  4. resizeType: 1,
  5. allowPreviewEmoticons: false,
  6. allowImageUpload: false,
  7. items: [
  8. 'code', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
  9. 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
  10. 'insertunorderedlist', '|', 'emoticons', 'image', 'link']
  11. });
  12. prettyPrint();
  13. });
假如要高亮的代码一开始是隐藏的,要显示出来,则需要调用prettyPrint();


[javascript] view plain copy
print?
  1. function Show(i) {
  2. var id = '#divBody' + i;
  3. if($(id).is(":hidden")){
  4. $('#divIntro' + i).hide();
  5. $(id).slideDown();
  6. $(id).next("a").text("收缩...");
  7. prettyPrint();
  8. }
  9. else{
  10. $('#divIntro' + i).show();
  11. $(id).slideUp();
  12. $(id).next("a").text("详细...");
  13. }
  14. }
3、默认代码是不换行的,要自动换行可以修改prettify.css,把white-space原来的值pre修改为pre-wrap:


[css] view plain copy
print?
  1. pre.prettyprint {
  2. border: 0;
  3. border-left: 3px solid rgb(204, 204, 204);
  4. margin-left: 2em;
  5. padding: 0.5em;
  6. font-size: 110%;
  7. display: block;
  8. font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  9. margin: 1em 0px;
  10. white-space: pre-wrap; /* 原来的值是 pre;*/
  11. }

上面样式是只有一条左边框,不太好看,修改为类似博客园的代码插入风格:四周边框、有背景颜色:


[css] view plain copy
print?
  1. pre.prettyprint {
  2. border: 1px solid rgb(204, 204, 204);
  3. background-color:#F8F8F8;
  4. margin-left: 2em;
  5. padding: 0.5em;
  6. font-size: 110%;
  7. display: block;
  8. font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  9. margin: 1em 0px;
  10. white-space: pre-wrap;
  11. }
雷巴克商城 Copyright 2017-2018 雷巴克 Ltd.,All rights reserved.