PHP如何搭建百度Ueditor富文本编辑器
2018-09-21 17:08
836 查看
本文为大家分享了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搭建百度Ueditor富文本编辑器
- 【php】ThinkPHP搭建百度Ueditor富文本编辑器
- 一个页面如何放多个百度编辑器 Ueditor 1.4.3?PHP如何获取Ueditor 的值?
- PHP Ueditor 百度富文本编辑器 CDN 远程服务器配置流程
- 百度富文本编辑器 UEditor 1.4.3 + Spring MVC 4.0
- 【web++_第三阶最后四集_(1)富文本编辑器_百度UeDitor】
- 如何搭建lamp(CentOS7+Apache+MySQL+PHP)环境
- 富文本编辑器——关于PHP如何不断生成html页面并生成链接
- 百度富文本编辑器ueditor上传文件到bcs中
- 百度编辑器UEEDITOR使用简单介绍 UEditor表单提交和后台交互详解 最后更新对应的版本:1.2.5.1 教程描述: 富文本编辑器的使用开发中,表单提交有多种场景,编辑器初始化有新增文章和编辑
- ueditor 百度编辑器 配置如何上传图片
- 从零搭建个人博客(3)-如何在webpack环境下配置jquery和富文本编辑器Simditor
- 【PHP自学笔记1】如何搭建配置PHP环境、云平台发布、第一个HelloWorld程序
- 百度富文本编辑器(ueditor)自定义上传接口(路径)
- vue2.x集成百度UEditor富文本编辑器的方法
- 百度ueditor富文本编辑器插入html代码问题
- php环境搭建教程(phpstrom+xampp)--如何修改apache端口号
- 解决ueditor百度富文本编辑器图片可以上传但是在线管理图片无法显示
- 解决百度ueditor富文本编辑器不能插入视频的问题/src掉链/src清空,不能显示视频
- Vue2+VueRouter2+Webpack+Axios 构建项目实战(十二)集成 UEditor 百度富文本编辑器