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 相关文章推荐
一个可以找出源代码中所有中文的工具
Oct 25 PHP
非常不错的MySQL优化的8条经验
Mar 24 PHP
php 来访国内外IP判断代码并实现页面跳转
Dec 18 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
Apr 08 PHP
解析php中获取url与物理路径的总结
Jun 21 PHP
C#静态方法与非静态方法实例分析
Sep 22 PHP
PHP动态规划解决0-1背包问题实例分析
Mar 23 PHP
PHP中常见的缓存技术实例分析
Sep 23 PHP
yii去掉必填项中星号的方法
Dec 28 PHP
PHP getallheaders无法获取自定义头(headers)的问题
Mar 23 PHP
PHP模块化安装教程
Jun 01 PHP
Laravel中获取IP的真实地理位置
Apr 01 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
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
python实现求最长回文子串长度
2018/01/22 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
Python连接Impala实现步骤解析
2020/08/04 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
Java多态性的定义以及类型
2014/09/16 面试题
火山动力Java笔试题
2014/06/26 面试题
采购文员岗位职责
2013/11/20 职场文书
简历中的自我评价范文
2014/02/05 职场文书
预备党员表决心书
2014/03/11 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
个人借款担保书
2014/04/02 职场文书
借款担保书范文
2014/05/13 职场文书
信用卡工资证明格式
2014/09/13 职场文书
财政局个人总结
2015/03/04 职场文书