Yii tinymce结合syntaxHighlighter和syntaxhl实现语法高亮
首先我们需要下载好Yii tinymce 扩展,放入你的extensions目录下,第二步下载好 SyntaxHighlighter, 解压后将里面的几个必须文件放入你对应的js和css目录,
shCore.js, shCore.css,shThemeDefault.css
这三个是必须的文件,再加上你自己需要高亮显示的语言,如果是PHP就加入shBrushPhp.js,Java就加入shBrushJava.js, 更多详细查看官方文档.
在你的控制器action中可以直接注册,例:
Php代码$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代码<?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' ,
'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将会在最后增加一个新的按钮.
简单几步就完成了代码高亮功能,效果图查看本篇文章,当然,你还可以自己再扩展加上代码复制功能等等.
页:
[1]