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编程起步(第五课)
Jan 10 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
javascript使用location.search的示例
Nov 05 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 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微信开发之自定义菜单完整流程
2016/10/08 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
React实现todolist功能
2020/12/28 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python统计中文字符数量的两种方法
2019/01/31 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
python取均匀不重复的随机数方式
2019/11/27 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
互斥锁解决 Python 中多线程共享全局变量的问题(推荐)
2020/09/28 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
军训自我鉴定
2013/12/14 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
毕业班工作总结
2015/08/10 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python