PHP如何搭建百度Ueditor富文本编辑器
时间:2022-07-27
本文章向大家介绍PHP如何搭建百度Ueditor富文本编辑器,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文为大家分享了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
效果图
以上就是本文的全部内容,希望对大家的学习有所帮助。
- 上传文件的陷阱
- BZOJ4872: [Shoi2017]分手是祝愿
- JSONP挖掘与高级利用
- CTF---隐写术入门第二题 小苹果
- 隐含层权重参数的初始化方式的对比实验
- BZOJ4868: [Shoi2017]期末考试
- namespace用法
- 全站缓存时代
- 洛谷P1962 斐波那契数列(矩阵快速幂)
- 负载均衡https转发会让服务器误判
- 凯撒加密之一个神奇的Python的API
- 10分钟搞懂TensorBoard用法
- 【最新TensorFlow1.4.0教程02】利用Eager Execution 自定义操作和梯度 (可在 GPU 运行)
- 清北集训Day1T3 LYK loves jumping(期望DP)
- php概述
- php教程
- php环境搭建
- PHP书写格式
- php变量
- php常量
- PHP注释
- php数组
- php字符串 string
- PHP整型 integer
- PHP浮点型 float
- php布尔型
- php数据类型之数组
- php数据类型之对象
- php数据类型之null
- php数据类型之间的转换
- php运算符
- php表达式
- PHP循环控制
- PHP流程控制
- php函数
- php全局变量
- PHP魔术变量
- php命名空间
- php 日期
- PHP包含文件
- php文件
- PHP 文件上传
- php Cookies
- php Sessions
- php email
- php安全email
- php错误处理
- PHP异常处理
- php过滤器
- PHP 高级过滤器
- php json
- php 表单
- PHP MySQL 简介
- PHP 连接 MySQL
- php创建数据库
- php 创建表
- php mysq 插入数据
- PHP MySQL 插入多条数据
- PHP MySQL 预处理语句
- php mysql 读取数据
- php mysql where
- PHP MySQL Order By
- PHP MySQL Update
- PHP MySQL Delete
- php ODBC