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实现验证码功能
Oct 09 PHP
php mysql索引问题
Jun 07 PHP
一个基于PDO的数据库操作类
Mar 24 PHP
php检测网页是否被百度收录的函数代码
Oct 09 PHP
ajax返回值中有回车换行、空格的解决方法分享
Oct 24 PHP
php判断手机访问还是电脑访问示例分享
Jan 20 PHP
php获取CSS文件中图片地址并下载到本地的方法
Dec 02 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
Aug 28 PHP
yum命令安装php7和相关扩展
Jul 04 PHP
ThinkPHP和UCenter接口冲突的解决方法
Jul 25 PHP
thinkphp实现附件上传功能
May 26 PHP
解决在Laravel 中处理OPTIONS请求的问题
Oct 11 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python分割训练集和测试集的方法示例
2019/09/19 Python
结束运行python的方法
2020/06/16 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
十八大闭幕感言
2014/01/22 职场文书
中学生操行评语
2014/04/24 职场文书
小学教师师德承诺书
2014/05/23 职场文书
廉政承诺书范文
2015/04/28 职场文书
李强感恩观后感
2015/06/17 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js