tp3怎么嵌入百度编辑器ueditor?

载入百度ueditor编辑器并配置的方法分享
其实很简单,不过读取数据的时候需要用htmlspecialchars_decode($str);函数转义一下,不然读取到的内容有点小问题,具体看详情

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

1.首先我们去到这里www.jb51.net/codes/56667.html下载PHP版本utf版本。

把它放到Public的目录下。

2.我们在视图view上,要用到富文本编辑器的时候,一般都是在表单加入textarea,

1

2

3

<form> 

<p><textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea> </p>

</form>

3.在html最后加上script配置文本框初始值,其中PUBLIC是我在config配置的路径

1

2

3

4

5

6

7

8

9

10

11

12

<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'),如下:

1

2

3

4

<p > 

<textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea>

</p>

 <input type="text" style="display: none" id="intro_detail1" name="intro_detail1" >

ajax提交,

代码如下:

1

$("#intro_detail1").val("'"+UE.getEditor('intro_detail').getContent()+"'");

把文本框输入的带标签的用单引号拼起来,存到input里面一并发过去,至于为啥用单引号,不然的话发不过去,会自动过滤掉标签,我们在拿数据出来的时候把单引号处理掉就可以。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

$.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')拿到数据,写进数据库

1

2

3

4

$db = M('game');

    $data  = $db->create(I('post.'));

    $data['intro_detail'] = $_POST['intro_detail1'];

    $db->add($data);

6.我们在取数据到视图的时候,把单引号处理掉就可以

1

2

3

4

5

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就是存入数据库带标签和单引号的文本内容

1

2

$user = M('game');

    $result = $user->field();

7.其实并不难,我也是为大家提供下思路,可以多多讨论,我也是小白。

以上就是tp3怎么嵌入百度编辑器ueditor?的详细内容,更多请关注php中文网其它相关文章!

  • 微信
  • 分享

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

(0)

相关推荐

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

    本文介绍了thinkphp3.2嵌入百度编辑器ueditor,分享给大家,希望此文章对各位有所帮助 因为排版要求,很多时候我们需要嵌入富文本编辑器,输出带html标签的文本内容.因为我最近做一个后台管 ...

  • 图形验证插件,百度编辑器拓展功能,NodeJs消息机制以及聊天室,Python做爬虫

    图形验证插件 网上找了很多图形验证插件,比较推荐verify.js <link rel="stylesheet" type="text/css" href ...

  • ECSHOP安装百度编辑UEditor教程

    ECSHOP系统自带的编辑器大家用过都知道,难用不说,还不能批量上传图片.很多朋友都喜欢百度编辑器,因为百度编辑器功能强大,使用方便,而且不会生成太多多余代码.网上有许多ECSHOP整合百度编辑器的教 ...

  • 百度Ueditor编辑器漏洞总结

    声明:该公众号大部分文章来自作者日常学习笔记,也有少部分文章是经过原作者授权和其他公众号白名单转载.请勿利用文章内的相关技术从事非法测试,如因此产生的一切不良后果与文章作者和本公众号无关.0x01 前 ...

  • 百度UEditor编辑器使用教程与使用方法

    我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享 ...

  • 最新开源指数发布:VSCode成为第一代码编辑器、百度Apollo增长最快

    局长 OSC开源社区 昨天 出品 | OSCHINA 文 | 局长 投资机构 Two Sigma Ventures 上周发布了最新的开源指数 (Open Source Index),这是一份 GitH ...

  • ueditor百度富文本表格列宽调整功能优化

    相信在大多数公司内部的办公系统中,都会用到富文本编辑器的功能. 目前比较流行的富文本编辑器也有很多,但如果对富文本的表格功能及操作体验比较友好的,却为数不多,甚至有些简便的富文本编辑器不提供表格编辑的 ...

  • 服务直达用户,百度破局存量竞争

    五一假期,人潮汹涌,拥堵非常.根据百度五一搜索大数据显示,今年五一假期超2.5亿人出行,"旅游"相关搜索热度达疫后最高水平,机票.火车票.酒店预订等搜索均大幅上涨,中国铁路1230 ...

  • 百度出品:人工智能 数字水务报告(全文)

    本报告书由国际水协会和百度共同撰写,以人工智能赋能水务行业的国内外案例分析为重点,从水务行业数字化转型的重要趋势和使命着笔,深入探讨人工智能在水务行业价值链上发挥的重要作用.百度凭借其在专业领域的深厚 ...