PHP如何搭建百度Ueditor富文本编辑器


Posted in PHP onSeptember 21, 2018

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

下载UEditor

官网:下载地址

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

PHP如何搭建百度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如何搭建百度Ueditor富文本编辑器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
利用 window_onload 实现select默认选择
Oct 09 PHP
用PHP生成html分页列表的代码
Mar 18 PHP
php代码中使用换行及(\n或\r\n和br)的应用
Feb 02 PHP
php存储过程调用实例代码
Feb 03 PHP
深入理解:XML与对象的序列化与反序列化
Jun 08 PHP
CI框架Session.php源码分析
Nov 03 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
Apr 03 PHP
PHP自定义函数实现格式化秒的方法
Sep 14 PHP
php获取ip及网址的简单方法(必看)
Apr 01 PHP
PDO::query讲解
Jan 29 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
Dec 13 PHP
PHP中国际化的字符串排序和比较对象详解
Aug 23 PHP
详解php协程知识点
Sep 21 #PHP
在php的yii2框架中整合hbase库的方法
Sep 20 #PHP
php实现在线考试系统【附源码】
Sep 18 #PHP
PHP htmlspecialchars() 函数实例代码及用法大全
Sep 18 #PHP
Laravel用户授权系统的使用方法示例
Sep 16 #PHP
Laravel中错误与异常处理的用法示例
Sep 16 #PHP
laravel获取不到session的三种解决办法【推荐】
Sep 16 #PHP
You might like
深入PHP变量存储的详解
2013/06/13 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
php实现word转html的方法
2016/01/22 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
js脚本学习 比较实用的基础
2006/09/07 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
使用python实现kNN分类算法
2019/10/16 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
什么是makefile? 如何编写makefile?
2012/08/08 面试题
优秀民警事迹材料
2014/01/29 职场文书
生日主持词
2014/03/20 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB