首页 后端开发 php教程 tp3怎么嵌入百度编辑器ueditor?

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

Jul 16, 2017 pm 04:36 PM
百度 编辑器

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

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

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

把它放到Public的目录下。

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


<form>  
<p><textarea name="intro_detail" id="intro_detail" cols="30" rows="10"></textarea> </p>
</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(&#39;intro_detail&#39;,{  //intro_detail为要编辑的textarea的id
    initialFrameWidth: 418,  //初始化宽度
    initialFrameHeight: 500,  //初始化高度
  });

</script>
登录后复制

4.通常我们在表单里面加个按钮的时候会默认把表单里面的数据全部提交上去,但是我的项目里面还涉及到图片上传问题,我在这里采用的是ajax异步提交,那么问题来了,我们能否通过jq中的("#intro_detail").val()的值拿到要提交的值呢,答案是不能的,我的处理方法是,在textarea下面加一个隐藏的input,我门用ueditor提供的方法拿到里面的值赋给input,让它随着表单一起提交过去,在控制器便可以通过_POST(‘表单的name'),如下:


 <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提交,

代码如下:

$("#intro_detail1").val("&#39;"+UE.getEditor(&#39;intro_detail&#39;).getContent()+"&#39;");
登录后复制

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


$.ajax({
          type: "POST",
          url: "<{:U(&#39;Admin/GameManager/Game/modGame&#39;)}>",
          dataType: &#39;json&#39;,
          processData: false,
          contentType: false,
          cache: false,
          data: formData,
          success:function(r){
            if(r.success){
              alert(&#39;编辑成功&#39;);
              window.location.reload();//重新刷新一次
              $(&#39;#user_dialog&#39;).modal(&#39;hide&#39;);
            }
            else{
              alert("参数错误");
            }
          }
        });
登录后复制

5.控制器里面,可以用$_POST(‘表单的name')拿到数据,写进数据库


$db = M(&#39;game&#39;);
    $data  = $db->create(I(&#39;post.&#39;));
    $data[&#39;intro_detail&#39;] = $_POST[&#39;intro_detail1&#39;];
    $db->add($data);
登录后复制

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


foreach($result as $key =>$value){    
      $result[$key][&#39;intro_detail&#39;]=str_replace("&#39;","",$result[$key][&#39;intro_detail&#39;]);//过滤单引号
    }
    $this->assign(&#39;game_list&#39;, $result);
    $this->display(&#39;&#39;);
登录后复制

$result是我用sql语句查到的数据库内容,而intro_detail就是存入数据库带标签和单引号的文本内容


$user = M(&#39;game&#39;);
    $result = $user->field();
登录后复制

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

以上是tp3怎么嵌入百度编辑器ueditor?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

2 个月不见,人形机器人 Walker S 会叠衣服了 2 个月不见,人形机器人 Walker S 会叠衣服了 Apr 03, 2024 am 08:01 AM

机器之能报道编辑:吴昕国内版的人形机器人+大模型组队,首次完成叠衣服这类复杂柔性材料的操作任务。随着融合了OpenAI多模态大模型的Figure01揭开神秘面纱,国内同行的相关进展一直备受关注。就在昨天,国内"人形机器人第一股"优必选发布了人形机器人WalkerS深入融合百度文心大模型后的首个Demo,展示了一些有趣的新功能。现在,得到百度文心大模型能力加持的WalkerS是这个样子的。和Figure01一样,WalkerS没有走动,而是站在桌子后面完成一系列任务。它可以听从人类的命令,折叠衣物

Go语言开发工具介绍:必备工具一览 Go语言开发工具介绍:必备工具一览 Mar 29, 2024 pm 01:06 PM

标题:Go语言开发工具介绍:必备工具一览在Go语言的开发过程中,使用合适的开发工具可以提高开发效率和代码质量。本文将介绍几款在Go语言开发中常用的必备工具,并附上具体的代码示例,让读者更加直观地了解它们的使用方法和作用。1.VisualStudioCodeVisualStudioCode是一款轻量级且功能强大的跨平台开发工具,具有丰富的插件和功能,

百度Apollo重磅发布全球首个支持L4级自动驾驶的大模型Apollo ADFM 百度Apollo重磅发布全球首个支持L4级自动驾驶的大模型Apollo ADFM Jun 04, 2024 pm 08:01 PM

5月15日,百度Apollo在武汉百度萝卜快跑汽车机器人智行谷举办ApolloDay2024,全方位展示百度十年深耕自动驾驶的重大进展,基于大模型带来技术阶跃、面向乘客安全全新定义的无人车和全球最大的无人车自动运营网络,百度已经做到自动驾驶比人类驾驶更安全。得益于此,更加安全舒适、绿色低碳的出行方式正从理想成为现实。百度集团副总裁、智能驾驶事业群组总裁王云鹏现场表示:“我们做无人车的初衷,是满足老百姓日益增长的、对美好出行的向往,人民群众的满意是我们前进的动力。因为安全、所以美好,我们欣喜地看到

百度息壤贝壳获取方法介绍 百度息壤贝壳获取方法介绍 Mar 28, 2024 am 09:11 AM

在息壤中有不少用户不知道贝壳在哪里,怎么才能获得,有些玩家转了几个小时候都没有找到,下面小编就带来了百度息壤贝壳的获取方法,快来一起看看吧。百度息壤贝壳怎么获得1、首先我们需要来到社区,然后来到下图的这个位置。2、在这里选择目的地,选择进入188层。3、进入到188层后,在周围转悠会有这个提示,点击我知道了就行。4、贝壳的位置可能会有些难找,就在188电梯的后面,有个发光的小点就是贝壳。5、捡贝壳需要用VR手柄才能捡,点击贝壳就可以了。兑换方式1、首先点击页面右上方的“设置”图标,在设置中选择“

deepseek网页版入口 deepseek官网入口 deepseek网页版入口 deepseek官网入口 Feb 19, 2025 pm 04:54 PM

DeepSeek 是一款强大的智能搜索与分析工具,提供网页版和官网两种访问方式。网页版便捷高效,免安装即可使用;官网则提供全面产品信息、下载资源和支持服务。无论个人还是企业用户,都可以通过 DeepSeek 轻松获取和分析海量数据,提升工作效率、辅助决策和促进创新。

VSCode功能详解:它如何帮助你提高工作效率? VSCode功能详解:它如何帮助你提高工作效率? Mar 25, 2024 pm 05:27 PM

VSCode功能详解:它如何帮助你提高工作效率?随着软件开发行业的不断发展,开发人员们追求工作效率和代码质量成为了他们工作中的重要目标。在这个过程中,代码编辑器的选择成为了一项关键的决策。而在众多的编辑器中,VisualStudioCode(简称VSCode)凭借其强大的功能和灵活的扩展性受到了广大开发者的喜爱。本文将详细介绍VSCode的一些功能,探讨

了解VSCode:这款工具到底是用来干什么的? 了解VSCode:这款工具到底是用来干什么的? Mar 25, 2024 pm 03:06 PM

《了解VSCode:这款工具到底是用来干什么的?》作为一个程序员,无论是初学者还是资深开发者,都离不开代码编辑工具的使用。在众多编辑工具中,VisualStudioCode(简称VSCode)作为一款开源、轻量级、强大的代码编辑器备受开发者欢迎。那么,VSCode到底是用来干什么的?本文将深入探讨VSCode的功能和用途,并提供具体的代码示例,以帮助读者

百度李彦宏率队拜访中国石油,讨论油气行业智能化 百度李彦宏率队拜访中国石油,讨论油气行业智能化 May 07, 2024 pm 06:13 PM

本站5月7日消息,5月6日,百度创始人、董事长兼首席执行官李彦宏带队在北京拜访中国石油天然气集团有限公司(以下简称“中国石油”),并与中国石油集团董事长、党组书记戴厚良举行会谈。双方就强化合作,推动能源行业与数字化智能化深度融合进行了深入交流。中国石油将加快推进数字中中国石油建设,加强与百度集团合作,推动能源行业与数字化智能化的深度融合,为保障国家能源安全作出更大贡献。李彦宏表示,大模型展现出的“智能涌现”和理解、生成、逻辑、记忆等核心能力,为前沿科技与油气业务结合打开了更加广阔的想象空间。一直

See all articles