昨天在ThinkPHP上配置了UEditor,在此记录一下其中的过程和自己的心得体会。
参考资料UEditor开发文档:http://fex.baidu.com/ueditor/#server-php。
(1),下载UEditor,解压后本人是放在了tp框架的公众资源目录Public下的ueditor中。
(2),在浏览器下打开上文目录下的index.html,出现下图,但是此时文件上传功能还未实现
(3),设置图片上传目录,在Public文件夹下创建editor_up文件夹用来保存上传图片,打开Public/ueditor/php/config.json对其中的p_w_picpathPathFormat进行配置(注意 路径配置项无论是否以 "/" 开头,都是相对于 网站根目录 的路径):
(4),设置成功了,刷新浏览器下的index.html,点击图片上传,成功!
(5),以上ThinkPHP配置UEditor就算是完成了,事实上,ueditor目录下的php文件夹我们可以放到本网站下的任意位置,只是需要修改ueditor下的ueditor.config.js中的服务器统一请求接口路径,将其修改为相对于该文件的正确的相对路径即可:
(6),注:上传图片过程中可能会出现由于文件过大而不能上传的情况,这时只需修改php的配置文件php.ini中的upload_max_filesize (上传文件的最大允许值)和post_max_size (post表单数据的最大允许值),修改后重启服务即可。
(7),使用UEditor创建一个编辑器还是很简单的一件事情,首先就是引入两个js文件,分别为editor_config.js和editor_all.js。然后就是js创建一个可编辑区域,用来创建编辑器,需要注明id,类型为text/plain,最后实例化编辑器即可(具体代码如下图所示,个别代码并未显示完全,仅供参考使用)。
其中的心得体会:可能大家看起来很简单,可是当时自己也是花了一番功夫才弄好的。主要是自己对开发文档总是不能静下心来去阅读。实际上文档总是最详细的。可能某些话看起来好像不太懂,但只要耐下心来去思考,去查阅,总是会有收获的。
发布时间:2015-11-29