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 相关文章推荐
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
jQuery中parent()方法用法实例
Jan 07 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
微信小程序之购物车功能
Sep 23 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
vue axios整合使用全攻略
May 24 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
vue中 this.$set的用法详解
Sep 06 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
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
php 缩略图实现函数代码
2011/06/23 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
PHP SOCKET编程详解
2015/05/22 PHP
PHP查询分页的实现代码
2017/06/09 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python编程嵌套函数实例代码
2018/02/11 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python dict乱码如何解决
2020/06/07 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
python爬取youtube视频的示例代码
2021/03/03 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
大学应届生的自我评价
2014/03/06 职场文书
《春雨》教学反思
2014/04/24 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
敬老月活动总结
2014/08/28 职场文书
客房服务员岗位职责
2015/02/09 职场文书
2016年大学生寒假社会实践心得体会
2015/10/09 职场文书
工作简历的自我评价
2019/05/16 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
室外天线与收音机天线杆接合方法
2022/04/05 无线电