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


Posted in PHP onJuly 13, 2017

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
PHP 字符串编码截取函数(兼容utf-8和gb2312)
May 02 PHP
一个PHP的QRcode类与大家分享
Nov 13 PHP
php中smarty变量修饰用法实例分析
Jun 11 PHP
PHP单例模式详细介绍
Jul 01 PHP
php array_pop 删除数组最后一个元素实例
Nov 02 PHP
php监测数据是否成功插入到Mysql数据库的方法
Nov 25 PHP
php实现数据库的增删改查
Feb 26 PHP
解决form中action属性后面?传递参数 获取不到的问题
Jul 21 PHP
php使用imagecopymerge()函数创建半透明水印
Jan 25 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
May 24 PHP
Laravel框架模板继承操作示例
Jun 11 PHP
php根据地址获取百度地图经纬度的实例方法
Sep 03 PHP
PHP微信PC二维码登陆的实现思路
Jul 13 #PHP
PHP基于socket实现客户端和服务端通讯功能
Jul 13 #PHP
php中请求url的五种方法总结
Jul 13 #PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
Jul 13 #PHP
php获取'/'传参的值简单方法
Jul 13 #PHP
php多文件打包下载的实例代码
Jul 12 #PHP
php实现网页端验证码功能
Jul 11 #PHP
You might like
在线竞拍系统的PHP实现框架(一)
2006/10/09 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
js word表格动态添加代码
2010/06/07 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
新西兰优惠网站:Treat Me
2019/07/04 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
个人函授自我鉴定
2014/03/25 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL