其实本文是一篇笔记....
首先推两篇深度好文,其实这两篇文章都讲了一部分,但是我感觉都不全面,这也是我想总结一下,写下这篇的原因,我也是看完这两篇文章之后实现,然后自己实现的。
http://blog.csdn.net/itmyhome1990/article/details/40374843
http://www.cnblogs.com/shawlang/p/4766681.html
当然也可以去看一下官方文档:
http://simditor.tower.im/docs/doc-config.html#anchor-pasteImage
本着尽量避免重复操作的原则,感觉自己的这篇文章成了上两篇博文的使用指南......
毕竟这么懒。
不管怎么说,我们先从原理讲起:
富文本编辑器中的图片不像单独上传文件有个提交动作来交到后台,而是跟随文章一起上传,
如果simditor的前端js配置选项upload里面的url(官方文档称upload api url)配置错误,上传的图片地址会直接是图片内容。。。这样存到数据库里很坑吧
所以,我们要让图片上传到服务器的文件夹,然后返回一个服务器上该图片的url, 但是上传操作不能中断编辑,那么只能用ajax上传,然后返回一个json,然后simditor会自动创建一个<img>对象,把src设置成返回json里面的file_path字段。
那么实现,我们先根据第一个博文的流程改掉simditor.js 然后给上传图片增加name属性。顺便小小吐槽一下那位博主….
改完这个就贴java后台代码了喂!
还没解释原理啊喂!
都不解释一下参数名字是什么啊喂!
……好吧,是我自己渣渣…看到下面的java代码没有说明就不想看了
然后就搜到了下一篇博主的文章,相比这个博主就友好一点,至少写了原理,另外觉得很方便的是,他也用的django。。。
我就接着按照第二个博主的步骤操作
上传的流程就是:
我在前端上传图片,
upload中的filekey属性就是文件名,
通过url属性中的url对应到在urls.py映射的upload_file函数(这点估计是博主的失误,因为下面的函数名定义是file_upload函数,其实是一个函数),
然后在file_upload函数里,
file变量通过filekey属性(该文章是’upload_file’)来获取到该图片,
然后后台通过之前定义的路径,日期时间等编辑好file_dir这个变量
(这里博主很友好的不让我们自己创建文件夹,而是调用os.makedirs,但是牺牲的效率就是每次上传都要检查一次有没有该文件夹路径),
然后加上文件名就是之后json要返回的file_path;
(这里还是要说一点,我们在上面设置file_path的时候是使用的是settings.MEDIA_ROOT, 结果我们在构造json的字段的时候这里变成了settings.MEDIA_URL,
因为
MEDIA_URL = '/uploads/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')
BASE_DIR是在服务器端,整个网站的文件系统路径,我们在urls.py里是没有体现的,所以通过json传到前端,在服务端通过这个路径并不能访问到,所以如果构造json的时候使用MEDIA_ROOT会提示上传出错,而MEDIA_URL中的'/uploads/'是在路由中体现的,所以要用后者
)
然后我们在设置json的返回值,通过HttpResponse传到前端,这时候需要第五步里的配置,就可以了。
这里我想说一下,中午吃饭和同学讨论,对于小项目开发,优化的东西很少,要实现的功能很多,所以重点在与实现业务逻辑,然而我们在搜博文的时候,应该更倾向于去看一些讲原理的东西,而不是贴一段代码而不写一下分析就了事,当然有些教程需要一步一步跟着做,原理可能显得不那么重要,但是大多数,我们实现一个功能,后台的语言,框架,思想太多了,只贴代码显得有些不负责任,如果能够将思路讲清楚,那么会让读者收获更多。