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 相关文章推荐
jquery多浏览器捕捉回车事件代码
Jun 22 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
jQuery each函数源码分析
May 25 Javascript
JavaScript表单验证开发
Nov 23 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
WebPack工具运行原理及入门教程
Dec 02 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加入ftp扩展的解决方法
2013/02/07 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
python实现移位加密和解密
2019/03/22 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
keras导入weights方式
2020/06/12 Python
详解Scrapy Redis入门实战
2020/11/18 Python
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
国际商务专业学生个人的自我评价
2013/09/28 职场文书
学生实习自我鉴定
2013/10/11 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
结婚仪式主持词
2015/06/29 职场文书
运动员代表致辞
2015/07/29 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL