zoukankan      html  css  js  c++  java
  • 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;*/
    }
    
  • 相关阅读:
    单个 js 文件禁用 ESLint 语法校验
    meta标签整合
    安装es6编译babel
    JSON.parse()和JSON.stringify()的区别
    preventDefault()、stopPropagation()、return false 的区别
    excel 表格内容读取
    redis 小例
    多文件打包下载
    随笔
    js数组删除元素
  • 原文地址:https://www.cnblogs.com/gdjlc/p/2852604.html
Copyright © 2011-2022 走看看