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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
$.extend 的一个小问题
Jun 18 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 Javascript
字节飞书面试promise.all实现示例
Jun 16 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
正则表达式语法
2006/10/09 Javascript
PHP 类型转换函数intval
2009/06/20 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
Yii2单元测试用法示例
2016/11/12 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
python使用opencv进行人脸识别
2017/04/07 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
应聘医学检验人员自荐信
2013/09/27 职场文书
电子商务专业学生的学习自我评价
2013/10/27 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis