天使漫步IT工作室

【ACI教程】用实例学习ACI（八）

接上一篇，接下来需要完善以下问题：

这几个问题中，新闻内容加上编辑器是一个比较核心的功能，在这一节中，我们集成一下编辑器。如果在国内使用，百度编辑器比较合适，国外的话，用CKEditor。集成相对来说是个细致活，我们按照从粗到细、逐步完善的方式进行编辑器的集成。

集成百度编辑器

1、首先下载百度编辑器，下载地址：http://ueditor.baidu.com/website/download.html 我们选择php UTF8 版下载。
2、下载解压后，放在aci目录下（我尝试过和CI融合，结果发现不好处理，改动颇大，还是老老实实的作为一个组件来用吧。）

我把流程分步写下来。

<!-- 配置文件 -->
<script type="text/javascript" charset="utf-8" src="<?php echo SITE_URL?>UEditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" charset="utf-8" src="<?php echo SITE_URL?>UEditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var editor = UE.getEditor('content');
</script>

以上代码的作用是将百度编辑器集成到新闻增加/修改页面：

 <!-- 加载编辑器的容器 -->
<script id="content" name="content" type="text/plain">
<?php echo isset($data_info['content'])?$data_info['content']:'' ?>
</script>

以上代码的作用是将百度编辑器控件替换原先的textarea。

之所以这样替换，是因为safe_replace函数，将<>都替换成安全代码，这样编辑器中生成的样式，就无法正确显示，例如<p><br><div><table>等标签都无法正常显示。百度编辑器自身会对敏感字符进行安全替换，如果没有开放显示/编辑source源码功能的话，no_js函数就可以满足大部分的需求。如果开放了source源码功能的话，就需要使用自己来构造一个适合编辑器的安全函数。

打开\aci\application\helpers\global_helper.php，可以增加自己的安全函数，下面我给一个功能比较全面的安全函数，用户可以自己修改后使用。

 if(!function_exists('saft_html'))
    {
        //输出安全的html
        function saft_html($text, $tags = null){
            $text    =    trim($text);
            //完全过滤注释
            $text    =    preg_replace('/<!--?.*-->/','',$text);
            //完全过滤动态代码
            $text    =    preg_replace('/<\?|\?'.'>/','',$text);
            //完全过滤js
            $text    =    preg_replace('/<script?.*\/script>/','',$text);
            $text    =    str_replace('[','&#091;',$text);
            $text    =    str_replace(']','&#093;',$text);
            $text    =    str_replace('|','&#124;',$text);
            //过滤换行符
            $text    =    preg_replace('/\r?\n/','',$text);
            //br
            $text    =    preg_replace('/<br(\s\/)?'.'>/i','[br]',$text);
            $text    =    preg_replace('/(\[br\]\s*){10,}/i','[br]',$text);
            //过滤危险的属性，如：过滤on事件lang js
            while(preg_match('/(<[^><]+)( lang|on|action|background|codebase|dynsrc|lowsrc)[^><]+/i',$text,$mat)){
                $text=str_replace($mat[0],$mat[1],$text);
            }
            while(preg_match('/(<[^><]+)(window\.|javascript:|js:|about:|file:|document\.|vbs:|cookie)([^><]*)/i',$text,$mat)){
                $text=str_replace($mat[0],$mat[1].$mat[3],$text);
            }
            if(empty($tags)) {
                $tags = 'table|td|th|tr|i|b|u|strong|img|p|br|div|strong|em|ul|ol|li|dl|dd|dt|a';
            }
            //允许的HTML标签
            $text    =    preg_replace('/<('.$tags.')( [^><\[\]]*)>/i','[\1\2]',$text);
            //过滤多余html
            $text    =    preg_replace('/<\/?(html|head|meta|link|base|basefont|body|bgsound|title|style|script|form|iframe|frame|frameset|applet|id|ilayer|layer|name|script|style|xml)[^><]*>/i','',$text);
            //过滤合法的html标签
            while(preg_match('/<([a-z]+)[^><\[\]]*>[^><]*<\/\1>/i',$text,$mat)){
                $text=str_replace($mat[0],str_replace('>',']',str_replace('<','[',$mat[0])),$text);
            }
            //转换引号
            while(preg_match('/(\[[^\[\]]*=\s*)(\"|\')([^\2=\[\]]+)\2([^\[\]]*\])/i',$text,$mat)){
                $text=str_replace($mat[0],$mat[1].'|'.$mat[3].'|'.$mat[4],$text);
            }
            //过滤错误的单个引号
            while(preg_match('/\[[^\[\]]*(\"|\')[^\[\]]*\]/i',$text,$mat)){
                $text=str_replace($mat[0],str_replace($mat[1],'',$mat[0]),$text);
            }
            //转换其它所有不合法的 < >
            $text    =    str_replace('<','&lt;',$text);
            $text    =    str_replace('>','&gt;',$text);
            $text    =    str_replace('"','&quot;',$text);
            //反转换
            $text    =    str_replace('[','<',$text);
            $text    =    str_replace(']','>',$text);
            $text    =    str_replace('|','"',$text);
            //过滤多余空格
            $text    =    str_replace('  ',' ',$text);
            return $text;
        }
    }

最终的新闻编辑页面为如下效果：

当前页面是本站的「Baidu MIP」版。查看和发表评论请点击：完整版 »