香港高速VIP云机房火爆上线啦!无需备案,开通即用!配套《巅云自助建站系统3.0》将带给您飞一般的可视化拖拽建站体验,欢迎免费体验。

建站新闻

PHP如何搭建百度Ueditor富文本编辑器
一佰互联网站建设(www.yinxi.net) 发布时间:2019-04-25 14:40:14 浏览数: 7
0

本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下

下载UEditor

官网:下载地址

将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor

第一步 引入javascript

在html中如入下面的js语句引入相关文件

<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.js"></script> 

第二步 添加textare文本域并设置id值

<textarea type="text" name="content" id="EditorId" placeholder="请输入内容"></textarea>

第三步 初始化UEditor编辑器

在html代码中添加下面的代码初始化UEditor编译器

<script type="text/javascript" charset="utf-8">//初始化编辑器    window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路径设定为UEditor所放的位置    window.onload=function(){     window.UEDITOR_CONFIG.initialFrameHeight=600;//编辑器的高度     window.UEDITOR_CONFIG.initialFrameWidth=1200;//编辑器的宽度     var editor = new UE.ui.Editor({       imageUrl : "",       fileUrl : "",       imagePath : "",       filePath : "",       imageManagerUrl:"", //图片在线管理的处理地址       imageManagerPath:"__ROOT__/"     });     editor.render("EditorId");//此处的EditorId与<textarea name="content" id="EditorId">的id值对应 </textarea>   } </script> 

第四步 设置图片上传路径

UEditor编辑器的默认图片上传路径是根目录下/ueditor/php/upload/image/目录,没有这个目录会自动创建,如果要自定义图片上传路径,可以在ueditor/php/config.json文件中12行处修改。

最后贴上完整的html代码:

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Document</title>   <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.js"></script> </head> <body>   <form action="__URL__/receiver" method="post" accept-charset="utf-8">   <textarea type="text" name="content" id="EditorId" placeholder="请输入内容"></textarea>   <input type="submit" value="提交">  </form>      <script type="text/javascript" charset="utf-8">//初始化编辑器   window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路径设定为UEditor所放的位置   window.onload=function(){     window.UEDITOR_CONFIG.initialFrameHeight=600;//编辑器的高度     window.UEDITOR_CONFIG.initialFrameWidth=1200;//编辑器的宽度     var editor = new UE.ui.Editor({       imageUrl : "",       fileUrl : "",       imagePath : "",       filePath : "",       imageManagerUrl:"", //图片在线管理的处理地址       imageManagerPath:"__ROOT__/"     });     editor.render("EditorId");//此处的EditorId与<textarea name="content" id="EditorId">的id值对应 </textarea>   } </script> </body> </html> 

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持网页设计。

一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

上一篇:PHP调用微博接口实现微博登录的方法示例
下一篇: 详解php协程知识点
[返回新闻列表]

相关新闻more

20
04月
html5-websocket基于远程方法调

一般在传统网页中注册用户信息都是通过post或ajax提交到页面处理,到了HTML5后我们有另一种方法就是通过websocket进行数据交互... >>详情

21
04月
CSS3移动端vw+rem不依赖JS实现响应

1、前言(1)vw/vh介绍在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是&ldquo... >>详情

30
04月
PHP 在5.1.* 和5.2.*之间 PD

介绍 今天发现php5.1.*和php5.2.*在数据库预编译代码执行的时候出现差异。 预编译优点 1.使用占位符,避免逐字输入数据到SQL... >>详情

30
04月
用穿越火线快速入门php面向对象

复制代码 代码如下: <?php /* *用穿越火线快速入门php面向对象! *php目前已经成为国内的主流web developer... >>详情

营业执照. cdn加速服务 备案系统认证 网络安全协会 我们的支付方式AAA认证
上海 北京 深圳 广州 天津 杭州 南京 武汉 成都 沈阳 大连 长沙 济南 青岛 苏州 福州 无锡 哈尔滨 宁波 重庆 大庆 厦门 西安 长春 珠海 郑州 海口 昆明 太原 石家庄 温州 合肥 乌鲁木齐 南宁 南通 合肥 兰州 呼和浩特 贵阳 烟台 秦皇岛 包头 唐山 银川 汕头 连云港 威海 西宁 湛江 北海 万州 涪陵 长寿 黔江 永川 丰都 忠县 江津 南川 开县 云阳 万盛 梁平 垫江 巫山 城口 建站宝盒 免费建站 门户网站建设 微信网站 手机网站 门户网站制作

7x24小时服务电话:18581389571 传真:023-85725751 免费建站交流群:236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 网站投诉:
重庆楚捷科技有限公司 一佰互联©版权所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保护,网站法律顾问:ITLAW-庄毅雄律师
中华人民共和国信息产业部网站备案号:渝ICP备12000592号