首先我们需要下载好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");

在页面view.php 增加

<script type="text/javascript">
     SyntaxHighlighter.all();
</script>

第三步下载 安装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快讯网 | 原文地址: http://www.itkuaixun.com/post/48.htm