首先需要在页面中引入所需FE文件:
两个js和一个css文件是必须要引用的文件;
shCore.js是syntaxhighlighter插件的基础代码;
shAutoloader.js作用是syntaxhighlighter插件的代码高亮显示时自动加载所需文件;但是如果目录不正确的话,就会加载失败,解决方法如下SyntaxHighlighter.autoloader.apply()中给出js文件的位置,
clientScript->registerCssFile(Yii::app()->baseUrl . "/js/syntaxhighlighter/styles/shCoreDefault.css"); Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/shCore.js'); Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/shAutoloader.js'); ?>
然后,修改kindeditor中plugins/code/code.js:
修改此处的作用是将kindeditor默认使用的prettry插件css类,修改为syntaxhighlighter插件css类:brush:,同时给出配置参数toolbar:右上角的工具栏,auto-links:自动修改链接
cls = 'brush:' + type + '; toolbar: false; auto-links: FALSE;'; var html = '\n' + K.escape(code) + '';
html = ['', ''].join(''),', ' ', '', ' ', '
如果想在填写表单的时候有代码样式,需要在创建表单的kindeditor的时候,即调用KindEditor.ready()的时候配置的cssPath项中的css文件中加入.ke-content样式,如下例子:
此处并不会使代码语法高亮,只是标识一下代码部分
/**code**/.ke-content { font-size: 10pt;}.ke-content pre { font-size:9pt; font-family:Courier New,Arial; border:1px solid #ddd; border-left:5px solid #6CE26C; background:#f6f6f6; padding:5px;}.ke-content code { margin: 0 2px; padding: 0 5px; white-space: nowrap; border: 1px solid #DDD; background-color: #F6F6F6; border-radius: 3px;}.ke-content pre>code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent;}.ke-content pre code { background-color: transparent; border: none;}.ke-content p { margin: 0 0 15px 0; margin-bottom:15pt; line-height:1.5; letter-spacing: 1px;}.ke-content div.ref {border:1px solid #ddd;margin:0 0 10px 0;padding:2px;font-size:9pt;background:#ffe;}.ke-content div.ref h4 {margin:0;padding:1px 3px;background:#CC9966;color:#fff;font-size:9pt;font-weight:normal;}.ke-content div.ref .ref_body {margin:0;padding:2px;line-height:20px;color:#666;font-size:9pt;}.ke-content blockquote {margin:15px 10px;border:2px solid #eee;padding:5px 5px 5px 35px;background:#f4f5f7 url('../img/blockquote.gif') no-repeat left top;color:#060;font-size:9pt;}
好了,自此语法高亮已经满足基本使用,效果不错,至于kindeditor如果整合进yii框架,下一篇文章会做详细介绍。