栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

1、需要加载的JS和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.brush:php;toolbar:false {
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;
}
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/111987.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号