摘要:代码编辑就是使用kindeditor编辑器插入代码的过程,插入代码时,kindeditor会用 包含被插入的代码。
       在kindeditor编辑器的工具栏上有插入代码的功能,通过这个功能插入一些源码,可以在页面展示时以代码块的样式来展示代码。但是,代码块默认的样式比较丑陋,仅仅是灰色的一块,比较难看。如果需要代码块看起来像我们使用的IDE那样,可以标记关键字,并且有比较好看的样式,就必须使用一些高亮的插件来渲染。其中比较流行的高亮插件就是syntaxhighlighter。
       下面就来说说整合syntaxhighlighter插件到kindeditor的过程,这个过程包括两个步骤,分别是:
  • 代码编辑;
  • 代码渲染;

代码编辑

       代码编辑就是使用kindeditor编辑器插入代码的过程,插入代码时,kindeditor会用<pre>包含被插入的代码。为了能够跟syntaxhighlighter插件整合,我们需要修改kindeditor的源码,修改插入代码功能的一些逻辑。

首先,在kindeditor源码中找到下面的代码:
html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) 
+ '</pre> ';
把它修改为:
html = '<pre class="syntaxhighlighter brush:' + type + '">\n'
 + K.escape(code) +'</pre>';
如果我们再留心一下,可以知道type的值就是弹出插入代码的对话框的下拉选择的值,它的值可以在这里设置:
html = ['<div style="padding:10px 20px;">',
  '<div class="ke-dialog-row">',
  '<select class="ke-code-type">',
  '<option value="java">Java</option>',
  '<option value="python">Python</option>',
  '<option value="xml">HTML</option>',
  '<option value="css">CSS</option>',
  '<option value="js">JavaScript</option>',
  '<option value="xml">XML</option>',
  '<option value="shell">Shell</option>',
  '<option value="sql">SQL</option>',
  '<option value="other">Other</option>',
  '</select>',
  '</div>',
  '<textarea class="ke-textarea" style="width:408px;height:260px;">
</textarea>',
  '</div>'].join(''),
后面我们就知道,下拉选择不同的代码语言,高亮插件会用不同的刷子高亮显示,注意:选择的刷子跟上面<select>的选项值有关。假设插入代码时,我们选择了xml,那么kindeditor在保存编辑的源码时会变成:
<pre class="syntaxhighlighter brush:xml">
&lt;!--配置执行的任务,管理触发器--&gt;
&lt;bean id="triggerManager" autowire="no"
    class=" org.springframework.scheduling.quartz.
SchedulerFactoryBean"&gt;
    &lt;property name=" startupDelay" value="60"/&gt;
    &lt;property name="triggers"&gt;
            &lt;list&gt;
                &lt;ref bean ="tmpTrigger"/&gt;
            &lt;/list&gt;
    &lt;/property&gt;
&lt;/bean&gt;</pre>

代码渲染

       编辑完成后,一般我们会把编辑的内容展示在网页上,这时我们就需要使用syntaxhighlighter插件刷子功能了,刷子就是用来把代码块刷成我们想要的样式,syntaxhighlighter插件提供了很多种渲染代码块样式的主题,使用时可以随时切换。刷子跟主题我们可以这样理解,刷子就是一个工具,用来把主题刷到代码块上,让代码块呈现我们喜欢的样式。

首先我们需要在展示的页面上引用插件的style跟js文件,如下所示:
我引用了主题shCoreDefault,当然syntaxhighlighter还有其它很多样式,可以自己选择,引入文件如下:
<link rel ="stylesheet" 
href="http://static.wolfbe.com/plugins/syntaxhighlighter/styles/
shCoreDefault.css" >
<script 
src="http://static.wolfbe.com/plugins/syntaxhighlighter/scripts/
shCore.js"></script>
<script 
src="http://static.wolfbe.com/plugins/syntaxhighlighter/scripts/
shAutoloader.js"></script>
然后调用syntaxhighlighter的js对页面的代码块进行渲染,如下所示:
SyntaxHighlighter.all();
重新刷新页面,发现页面的代码块还是灰色的一片,高亮功能没有生效。其实这是因为我们还没有为xml的代码引入它的刷子js,引入xml刷子如下:
<script type="text/javascript" 
src="../syntaxhighlighter/scripts/shBrushXml.js"></script>
再次刷新后,页面的代码块已经高亮显示了,如下图所示:
但是我们可能会有疑惑了,如果我们编辑时不是选择xml,而是java、css或者其它语言时,我们怎么根据需要在页面中引入相应的刷子呢?一个页面中把全部刷子都引入吗?这是一个方案,但是这样可能会额外加载一些没有必要的js,影响页面的性能。

其实syntaxhighlighter插件已经为我们想到了,在引入它的js时我引入了一个shAutoloader.js文件,它就是用来帮助识别不同的刷子,根据需要引入不同的刷子,使用方法如下:
SyntaxHighlighter.autoloader(
    ['js', 'javascript', '../plugins/syntaxhighlighter/scripts/
shBrushJScript.js'],
    ['bash', 'shell', '../plugins/syntaxhighlighter/scripts/
shBrushBash.js'],
    ['css', '../plugins/syntaxhighlighter/scripts/
shBrushCss.js'],
    ['xml', 'html', '../plugins/syntaxhighlighter/scripts/
shBrushXml.js'],
    ['sql', '../plugins/syntaxhighlighter/scripts/
shBrushSql.js'],
    ['java', '../plugins/syntaxhighlighter/scripts/
shBrushJava.js'],
    ['python', '../plugins/syntaxhighlighter/scripts/
shBrushPython.js'],
    ['other', '../plugins/syntaxhighlighter/scripts/
shBrushXml.js']
);
SyntaxHighlighter.all();
注意,上面的[js,bash,css,xml,java]这些值需要跟编辑器插入代码的下拉框的值一致,不然就会出现找不到刷子的情况。

===========================================
在页面的代码块渲染后,有可能会出现一种情况,如果代码过长,代码块会显示出一个横向的滚动条,非常难看。据说这是syntaxhighlighter3.x版本才会出现,syntaxhightlighter2.x版本不会出现滚动条。这是因为代码不会自动换行造成的,为了让过长的代码自动换行,我们可以修改css,我引入的是shCoreDefault.css,在文件中找到下面的这行代码,然后把它给注释掉:
.syntaxhighlighter .line {
  /*white-space: pre !important;*/
}
这样重新刷新页面,可以看到过长的代码已经自动换行了。

不过还是有一个问题,渲染后的代码块左侧是有标识代码行数的,换行后它的代码行数没有改变,而且代码会向下超出代码块,如下图红色圈所示:
对于我而言,我选择的还是按照原来插件的做法,没有让过长代码自动换行,保持显示的行数跟代码一致,在编辑的时候把过长的代码自己给它换行吧。

版权说明:如无特殊说明,文章均为本站原创,如需转载请注明出处

本文标题:kindeditor与syntaxhighlighter高亮插件的整合过程

本文地址:http://www.wolfbe.com/detail/201608/340.html

本文标签: kindeditor syntaxhightlighter

相关文章

感谢您的支持,朗度云将继续前行

扫码打赏,金额随意

温馨提醒:打赏一旦完成,金额无法退还,请谨慎操作!

扫二维码 我要反馈 回到顶部