下载UEditor
官网:下载地址
将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor
![2018921165526839.jpg?2018821165554](https://i-blog.csdnimg.cn/blog_migrate/686b9ee404e2fe92b232bf0b0f430ca6.jpeg)
转存失败重新上传取消![](https://i-blog.csdnimg.cn/blog_migrate/686b9ee404e2fe92b232bf0b0f430ca6.jpeg)
第一步 引入javascript
在html中如入下面的js语句引入相关文件
1 2 | < 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值
1 | < textarea type = "text" name = "content" id = "EditorId" placeholder = "请输入内容" ></ textarea > |
第三步 初始化UEditor编辑器
在html代码中添加下面的代码初始化UEditor编译器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!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 > |
效果图
![2018921165437755.jpg?2018821165459](https://i-blog.csdnimg.cn/blog_migrate/6db2970e4f7306d255607cd903c2d6d5.jpeg)
转存失败重新上传取消![](https://i-blog.csdnimg.cn/blog_migrate/6db2970e4f7306d255607cd903c2d6d5.jpeg)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章: