thinkphp3.2嵌入百度编辑器ueditor

因为排版要求，很多时候我们需要嵌入富文本编辑器，输出带html标签的文本内容。因为我最近做一个后台管理系统，要求编辑好文本内容，让它输出带html标签的文本存到服务器，客户端发请求拿到服务器的带标签文本。我用的是ueditor,
1.首先我们去到这里http://ueditor.baidu.com/website/download.html 下载php版本utf版本。
把它放到Public的目录下。

目录要正确

2.我们在视图view上,要用到富文本编辑器的时候，一般都是在表单加入textarea,

<form>   
<div>                                                                                          <textarea  name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea>                                   </div>
</form>

3.在html最后加上script配置文本框初始值，其中PUBLIC是我在config配置的路径

<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__PUBLIC__/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
    UE.getEditor('intro_detail',{    //intro_detail为要编辑的textarea的id
        initialFrameWidth: 418,   //初始化宽度
        initialFrameHeight: 500,   //初始化高度
    });

</script>

4.通常我们在表单里面加个按钮的时候会默认把表单里面的数据全部提交上去，但是我的项目里面还涉及到图片上传问题，我在这里采用的是ajax异步提交，那么问题来了，我们能否通过jq中的 $("#intro_detail").val()的值拿到要提交的值呢，答案是不能的，我的处理方法是，在textarea下面加一个隐藏的input，我门用ueditor提供的方法拿到里面的值赋给input,让它随着表单一起提交过去，在控制器便可以通过$ _POST(‘表单的name’),如下：

 <div >    
<textarea  name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea>
</div>
 <input type="text" style="display: none" id="intro_detail1" name="intro_detail1" >

ajax提交，

$("#intro_detail1").val("'"+UE.getEditor('intro_detail').getContent()+"'");

把文本框输入的带标签的用单引号拼起来，存到input里面一并发过去，至于为啥用单引号，不然的话发不过去，会自动过滤掉标签，我们在拿数据出来的时候把单引号处理掉就可以。

$.ajax({
                    type: "POST",
                    url: "<{:U('Admin/GameManager/Game/modGame')}>",
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    cache: false,
                    data: formData,
                    success:function(r){
                        if(r.success){
                            alert('编辑成功');
                            window.location.reload();//重新刷新一次
                            $('#user_dialog').modal('hide');
                        }
                        else{
                            alert("参数错误");
                        }
                    }
                });

5.控制器里面，可以用$_POST(‘表单的name’)拿到数据，写进数据库

$db = M('game');
        $data   = $db->create(I('post.'));
       $data['intro_detail'] = $_POST['intro_detail1'];
       $db->add($data);

6.我们在取数据到视图的时候，把单引号处理掉就可以

foreach($result as $key =>$value){       
            $result[$key]['intro_detail']=str_replace("'","",$result[$key]['intro_detail']);//过滤单引号
        }
        $this->assign('game_list', $result);
        $this->display('');

$result是我用sql语句查到的数据库内容，而intro_detail就是存入数据库带标签和单引号的文本内容

$user  = M('game');
       $result = $user->field(）;

7.其实并不难，我也是为大家提供下思路，可以多多讨论，我也是小白。

thinkphp3.2嵌入百度编辑器ueditor

猜你喜欢