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 相关文章推荐
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
Jul 09 PHP
在命令行下运行PHP脚本[带参数]的方法
Jan 22 PHP
php url地址栏传中文乱码解决方法集合
Jun 25 PHP
php下目前为目最全的CURL中文说明
Aug 01 PHP
PHP函数strip_tags的一个bug浅析
May 22 PHP
PHP获取MySql新增记录ID值的3种方法
Jun 24 PHP
php中get_meta_tags()、CURL与user-agent用法分析
Dec 16 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
Mar 09 PHP
PHP简单实现遍历目录下特定文件的方法小结
May 22 PHP
Laravel框架Eloquent ORM删除数据操作示例
Dec 03 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
Nov 26 PHP
PHP执行linux命令6个函数代码实例
Nov 24 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 获取全局变量的代码
2011/04/21 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
小学生期末自我鉴定
2014/01/19 职场文书
企业内控岗位的职责
2014/02/07 职场文书
社区助残日活动总结
2014/08/29 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
python3实现常见的排序算法(示例代码)
2021/07/04 Python
电频谱管理的原则是什么
2022/02/18 无线电
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL