当前位置:主页 > php教程 > thinkphp嵌入百度编辑器ueditor方法

thinkphp3.2嵌入百度编辑器ueditor实例方法

发布:2019-06-06 13:43:50 92


给寻找编程代码教程的朋友们精选了thinkphp开发相关的编程文章,网友宋乐志根据主题投稿了本篇教程内容,涉及到thinkphp3.2、百度编辑器、ueditor、thinkphp嵌入百度编辑器ueditor方法相关内容,已被393网友关注,下面的电子资料对本篇知识点有更加详尽的解释。

thinkphp嵌入百度编辑器ueditor方法

本文介绍了thinkphp3.2嵌入百度编辑器ueditor,分享给大家,希望此文章对各位有所帮助

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

1.首先我们去到这里//www.jb51.net/codes/56667.html下载PHP版本utf版本。

把它放到Public的目录下。

thinkphp3.2嵌入百度编辑器ueditor的实例代码

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();

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


参考资料

相关文章

  • ThinkPHP3.2框架操作Redis的方法实例

    发布:2019-08-03

    这篇文章主要介绍了ThinkPHP3.2框架操作Redis的方法,结合实例形式分析了thinkPHP3.2框架操作Redis数据库的原理及实现方法,需要的朋友可以参考下


  • ThinkPHP3.2.3框架执行原生SQL语句的方法代码实例

    发布:2019-07-02

    这篇文章主要介绍了ThinkPHP3.2.3框架实现执行原生SQL语句的方法,结合实例形式分析了thinkPHP3.2.3框架针对查询、添加、修改、删除等原生SQL操作相关实现技巧,需要的朋友可以参考下


  • ThinkPHP3.2.3框架如何实现分页功能

    发布:2020-02-19

    这篇文章主要介绍了ThinkPHP3.2.3实现分页的方法,详细分析了thinkPHP3.2.3分页操作的相关技巧,包括分页类的引用、数据库查询操作、分页参数设置及前端视图界面设计等,需要的朋友可以参考下


  • Vue.js结合Ueditor富文本编辑器知识点讲解

    发布:2020-01-03

    本篇文章主要介绍了Vue.js结合Ueditor的项目实例代码,这里整理了详细的代码,具有一定的参考价值,有兴趣的可以了解一下


  • Thinkphp3.2.3整合phpqrcode生成带logo的二维码代码详解

    发布:2020-08-03

    这篇文章主要为大家详细介绍了Thinkphp3.2.3整合phpqrcode生成带logo的二维码的实现方法,感兴趣的小伙伴们可以参考一下


网友讨论