0
点赞
收藏
分享

微信扫一扫

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


下载UEditor

官网下载:​​http://ueditor.baidu.com/website/download.html​​

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


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

第一步 引入javascript


在html中如入下面的js语句引入相关文件


[javascript]  ​​view plain​​​  ​​​copy​​



  1. <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
  2. <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.js"></script>





第二步 添加textare文本域并设置id值


[html]  ​​view plain​​​  ​​​copy​​



  1. <textarea  type="text"  name="content" id="EditorId" placeholder="请输入内容"></textarea>



第三步 初始化UEditor编辑器


在html代码中添加下面的代码初始化UEditor编译器


[javascript]  ​​view plain​​​  ​​​copy​​



  1. <script type="text/javascript" charset="utf-8">//初始化编辑器
  2. "__PUBLIC__/ueditor/";//配置路径设定为UEditor所放的位置
  3. function(){
  4. //编辑器的高度
  5. //编辑器的宽度
  6. var editor = new UE.ui.Editor({
  7. '',
  8. '',
  9. '',
  10. '',
  11. '', //图片在线管理的处理地址
  12. '__ROOT__/'
  13. });
  14. "EditorId");//此处的EditorId与<textarea name="content" id="EditorId">的id值对应 </textarea>
  15. }
  16. </script>





第四步 设置图片上传路径


UEditor编辑器的默认图片上传路径是根目录下/ueditor/php/upload/image/目录,没有这个目录会自动创建,如果要自定义图片上传路径,可以在ueditor/php/config.json文件中12行处修改。



最后贴上完整的html代码:


[html]  ​​view plain​​​  ​​​copy​​



  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
  7. <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.js"></script>
  8. </head>
  9. <body>

  10. <form action="__URL__/receiver" method="post" accept-charset="utf-8">
  11. <textarea  type="text"  name="content" id="EditorId" placeholder="请输入内容"></textarea>
  12. <input type="submit" value="提交">
  13. </form>

  14. <script type="text/javascript" charset="utf-8">//初始化编辑器
  15. window.UEDITOR_HOME_URL = "__PUBLIC__/ueditor/";//配置路径设定为UEditor所放的位置
  16. window.onload=function(){
  17. window.UEDITOR_CONFIG.initialFrameHeight=600;//编辑器的高度
  18. window.UEDITOR_CONFIG.initialFrameWidth=1200;//编辑器的宽度
  19. editor = new UE.ui.Editor({
  20. imageUrl : '',
  21. fileUrl : '',
  22. imagePath : '',
  23. filePath : '',
  24. imageManagerUrl:'', //图片在线管理的处理地址
  25. imageManagerPath:'__ROOT__/'
  26. });
  27. <textarea name="content" id="EditorId">的id值对应 </textarea>
  28. }
  29. </script>
  30. </body>
  31. </html>



效果图




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



举报

相关推荐

0 条评论