关于thinkphp3.2嵌入百度编辑器ueditor的解析

本篇文章主要介绍了thinkphp3.2嵌入百度编辑器ueditor的实例代码，具有一定的参考价值，有兴趣的可以了解一下

本文介绍了thinkphp3.2嵌入百度编辑器ueditor+本文来源gao@daima#com搞(%代@#码网

搞代gaodaima码

，分享给大家，希望此文章对各位有所帮助

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

1.首先我们去下载PHP版本utf版本。

把它放到Public的目录下。

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

<form>  <p><textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea> </p></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'),如下：

 <p >  <textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea></p> <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("参数错误");            }          }        });

喜欢 (0)赏

[搞代码]

分享 (0)