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


Posted in Javascript onMarch 01, 2013

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

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

<script src="kindeditor-4.1.4/kindeditor.js" type="text/javascript" charset="utf-8"></script> 
<script src="kindeditor-4.1.4/plugins/code/prettify.js" type="text/javascript"></script> 
<link href="kindeditor-4.1.4/plugins/code/prettify.css" rel="stylesheet" type="text/css" />

2、编辑器初始化设置后,在里面加prettyPrint():
KindEditor.ready(function (K) { 
window.EditorObject = K.create('#txtBody', { 
cssPath: 'plugins/code/prettify.css', 
resizeType: 1, 
allowPreviewEmoticons: false, 
allowImageUpload: false, 
items: [ 
'code', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 
'insertunorderedlist', '|', 'emoticons', 'image', 'link'] 
}); 
prettyPrint(); 
});

假如要高亮的代码一开始是隐藏的,要显示出来,则需要调用prettyPrint();
function Show(i) { 
var id = '#divBody' + i; 
if($(id).is(":hidden")){ 
$('#divIntro' + i).hide(); 
$(id).slideDown(); 
$(id).next("a").text("收缩..."); 
prettyPrint(); 
} 
else{ 
$('#divIntro' + i).show(); 
$(id).slideUp(); 
$(id).next("a").text("详细..."); 
} 
}

3、默认代码是不换行的,要自动换行可以修改prettify.css,把white-space原来的值pre修改为pre-wrap:
pre.prettyprint { 
border: 0; 
border-left: 3px solid rgb(204, 204, 204); 
margin-left: 2em; 
padding: 0.5em; 
font-size: 110%; 
display: block; 
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 
margin: 1em 0px; 
white-space: pre-wrap; /* 原来的值是 pre;*/ 
}
Javascript 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
React组件refs的使用详解
Feb 09 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
循环 vs 递归浅谈
Feb 28 #Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 #Javascript
jquery显示和隐藏div特效实例
Feb 27 #Javascript
JS等比例缩小图片尺寸的实例
Feb 27 #Javascript
JQuery切换显示的效果实例代码
Feb 27 #Javascript
innerText和textContent对比及使用介绍
Feb 27 #Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 #Javascript
You might like
PHP学习 运算符与运算符优先级
2008/06/15 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
文本链接逐个出现的js脚本
2007/12/12 Javascript
js数组操作学习总结
2013/11/04 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
js 函数性能比较方法
2020/08/24 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python如何为图片添加水印
2016/11/25 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Django中的forms组件实例详解
2018/11/08 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python Django 创建应用过程图示详解
2019/07/29 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
外贸采购员求职的自我评价
2013/11/26 职场文书
初三学生评语大全
2014/04/24 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
gojs实现蚂蚁线动画效果
2022/02/18 Javascript