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

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

B、新闻内容的添加、修改时候，栏目名称的选择，我们做一些显示上的优化。
C、浏览次数不用填写。
D、审核状态，根据用户的级别来自动填写。
E、新闻内容加上编辑器。
F、标签和关键词可以复制联动。
G、简介可以自动生成。

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

集成百度编辑器

1、首先下载百度编辑器，下载地址：`http://ueditor.baidu.com/website/download.html` 我们选择`php UTF8` 版下载。

2、下载解压后，放在aci目录下（我尝试过和CI融合，结果发现不好处理，改动颇大，还是老老实实的作为一个组件来用吧。）

我把流程分步写下来。

1、将UEditor文件夹放在aci目录下。
2、在uploadfile文件夹下建立空文件夹images video file，存放编辑器上传的图片和文件
3、修改ueditor.config.js文件中第36行编辑器图标栏中的图标，将'insertframe','emotion','gmap', 'webapp', 'template','source',这几项删除。即取消编辑器的插入iframe，插入表情，插入google地图，插入百度应用，插入模版，显示/编辑源文件这几项功能。
如果需要以上功能，可以不用删除。因为考虑到普通用户编辑文章的情况，我取消掉了显示编辑源代码功能，因为可以添加js木马。
4、打开UEditor目录下的Php目录下的config.json文件，修改上传路径/ueditor/php/upload/为 /aci/uploadfile/ ，共计8处。
5、打开aciapplicationviewsadminpanelnewsedit.php，在最底下</form>下添加代码：

<!-- 配置文件 -->
<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>

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

6、将 <textarea name="content" id="content" cols="45" rows="5" class="form-control validate[required]" placeholder="请输入新闻内容" ></textarea> 替换为：

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

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

7、将form class="form-horizontal" role="form" id="validateform" name="validateform" action="<?php echo base_url('adminpanel/news/edit')?>" >中增加 method="post" 参数。
增加这个参数，是因为默认是用get方式提交form内容，但是浏览器的url一般不超过8000个字符，对于新闻页面来说，这个字符数显然不够。
8、打开数据库，将t_aci_ news表中的content字段类型改成 longtext 字段。
9、打开aciapplicationcontrollersadminpanelNews.php，将其中的safe_replace($_POST["content"]) 替换成 no_js($_POST["content"])。

之所以这样替换，是因为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;
        }
    }

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

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

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

集成百度编辑器

1、首先下载百度编辑器，下载地址：http://ueditor.baidu.com/website/download.html 我们选择php UTF8 版下载。

2、下载解压后，放在aci目录下（我尝试过和CI融合，结果发现不好处理，改动颇大，还是老老实实的作为一个组件来用吧。）

1、首先下载百度编辑器，下载地址：`http://ueditor.baidu.com/website/download.html` 我们选择`php UTF8` 版下载。