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

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

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

1.首先我们去到这里https://www./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" 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.其实并不难，我也是为大家提供下思路，可以多多讨论，我也是小白。

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

# thinkphp # 百度编辑器 # 百度ueditor # thinkphp富文本编辑器 # ThinkPHP中使用Ueditor富文本编辑器 # ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法 # ThinkPHP中FCKeditor编辑器的使用方法 # TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析 # 利用Electron简单撸一个Markdown编辑器的方法 # 利用Vue实现一个markdown编辑器实例代码 # vue中利用simplemde实现markdown编辑器（增加图片上传功能） # SpringBoot使用Editor.md构建Markdown富文本编辑器示例 # Thinkphp5框架中引入Markdown编辑器操作示例 # 表单 # 的是 # 单引号 # 编辑器 # 加载 # 你在 # 我用 # 让它 # 就可以 # 文本框 # 是在 # 我也是 # 来了 # 我在 # 管理系统 # 可以用 # 把它 # 英文 # 给大家 # 便可

返回目录在线咨询

上一篇：三网合一自助建站系统：多终端模板快速搭建企业官网
下一篇：php中implode和explode用法_php字符串数组互转函数参数说明

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求