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 Smarty模板生成html文档的方法
Apr 12 PHP
php变量范围介绍
Oct 15 PHP
PHP实现获取图片颜色值的方法
Jul 11 PHP
学习php设计模式 php实现抽象工厂模式
Dec 07 PHP
Smarty模板变量调节器用法分析
May 23 PHP
支付宝服务窗API接口开发php版本
Jul 20 PHP
PHP 7.1新特性的汇总介绍
Dec 16 PHP
php+mysql+jquery实现日历签到功能
Feb 27 PHP
Yii1.1中通过Sql查询进行的分页操作方法
Mar 16 PHP
Thinkphp5结合layer弹窗定制操作结果页面
Jul 07 PHP
PHP中number_format()函数的用法讲解
Apr 08 PHP
phpstudy2020搭建站点的实现示例
Oct 30 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/06/01 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
初识PHP
2014/09/28 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)
2016/01/07 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
解决vue动态为数据添加新属性遇到的问题
2018/09/18 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
C语言编程题
2015/03/09 面试题
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
初中生三年学习生活的自我评价
2013/11/03 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
手机银行营销方案
2014/03/14 职场文书
工程售后服务方案
2014/06/08 职场文书
小学师德师风整改措施
2014/10/27 职场文书
2014年档案室工作总结
2014/12/01 职场文书
党小组评议意见
2015/06/02 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技