Yii tinymce结合syntaxHighlighter和syntaxhl实现语法高亮

首先我们需要下载好Yii tinymce扩展,放入你的extensions目录下,

第二步下载好 SyntaxHighlighter, 解压后将里面的几个必须文件放入你对应的js和css目录,

shCore.js, shCore.css,shThemeDefault.css

这三个是必须的文件,再加上你自己需要高亮显示的语言,如果是PHP就加入shBrushPhp.js,Java就加入shBrushJava.js, 更多详细查看官方文档.

在你的控制器action中可以直接注册,例:

 

$clientScript = Yii::app() -> clientScript;

$clientScript -> registerScriptFile("/js/syntaxhighlighter/shCore.js");
$clientScript -> registerScriptFile("/js/syntaxhighlighter/shBrushJava.js");
$clientScript -> registerScriptFile("/js/syntaxhighlighter/shBrushJScript.js");
$clientScript -> registerScriptFile("/js/syntaxhighlighter/shBrushPhp.js");
$clientScript -> registerCssFile("/css/syntaxhighlighter/shCore.css");
$clientScript -> registerCssFile("/css/syntaxhighlighter/shThemeDefault.css");

第三步下载 安装tinymce的SyntaxHighlighter插件syntaxhl

直达地址:  http://github.com/RichGuk/syntaxhl

下载后解压放入protected/extensions/tinymce/assets/tiny_mce/plugins 目录下面

在你的表单页面增加下面参数,以粗体显示.

'plugins'=>'syntaxhl', 

'theme_advanced_buttons1' => '
syntaxhl',

 

<?php $this->widget('application.extensions.tinymce.ETinyMce',
            array('id'=>'postBody','name'=>'body','useSwitch'=>false, 'editorTemplate'=>'full','language' => 'zh',
                    'model' => $postText,'attribute'=>'body',         
                'options' => array('theme' => 'advanced','skin' => 'o2k7','skin_variant'=>'silver',
                    'theme_advanced_resize_horizontal'=>false,'plugins'=>'syntaxhl'
,'remove_linebreaks'=>false,
                    'extended_valid_elements'=>'textarea[cols|rows|disabled|name|readonly|class]' ,

                    'theme_advanced_buttons1' => 'preview,bold,italic,underline,fontselect,fontsizeselect,link,justifyleft,justifycenter,justifyright,table,image,|,bullist,numlist,|,undo,redo,|,code,syntaxhl
,fullscreen',
                        'theme_advanced_buttons2' => '',
                        'theme_advanced_buttons3' => '',
                ))); ?>

 

tinymce将会在最后增加一个新的按钮.

简单几步就完成了代码高亮功能,效果图查看本篇文章,当然,你还可以自己再扩展加上代码复制功能等等.

 

转载请说明出自自: IT快讯网  |  原文地址:  Yii tinymce结合syntaxHighlighter和syntaxhl实现语法高亮