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


    编辑器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;*/
    }
    
  • 相关阅读:
    前端接口设计
    前端协作流程
    编写jQuery插件
    jQuery插件之validation插件
    深入理解ajax系列第九篇——jQuery中的ajax
    前端学PHP之Smarty模板引擎
    第3选择-解决所有难题的关键思维,种下好的种子避免落入钻石交易
    阿里BCG重磅报告《人工智能,未来致胜之道》
    关于web开发前端h5框架的选择
    html5+php实现文件的断点续传ajax异步上传
  • 原文地址:https://www.cnblogs.com/gdjlc/p/2852604.html
Copyright © 2020-2023  润新知