thinkphp3.2嵌入百度编辑器ueditor的示例分析

这篇文章主要为大家展示了“thinkphp3.2嵌入百度编辑器ueditor的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“thinkphp3.2嵌入百度编辑器ueditor的示例分析”这篇文章吧。

因为排版要求，很多时候我们需要嵌入富文本编辑器，输出带html标签的文本内容。因为我最近做一个后台管理系统，要求编辑好文本内容，让它输出带html标签的文本存到服务器，客户端发请求拿到服务器的带标签文本。我用的是ueditor,

1.首先我们去到这里https://www.jb51.net/codes/56667.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"  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(）;

以上是“thinkphp3.2嵌入百度编辑器ueditor的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！