kindeditor图片上传
2017-10-11 06:45
351 查看
KindEditor是一款用Javascript编写的开源在线HTML编辑器,主要用户是让用户在网站上获得可见即可得的编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件
HTML模板中需要显示富文本编辑器的位置添加
添加脚本,引入KindEditor JS文件,为指定标签创建富文本编辑器。这里主要说使用KindEditor 上传图片时的必要参数:
说明:
图片上传要通过
图片的上传和预览流程:
在富文本编辑器中选择上传图片
KindEditor 将图片通过AJAX的方式上传到服务器指定url
该url对应的视图函数保存图片,并返回包含图片服务器路径的json响应
KindEditor 拿到响应的图片路径后,通过
Django中的代码实现:
配置media(参考博客)并定义路由
定义保存图片的视图函数
说明:
必须返回包含
更多KindEditor 的使用,参考官网
使用
到官网下载 KindEditor 最新版本,解压后将所有文件拷贝到项目的static文件夹下。注意,可以根据需要删除以下目录:asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件
HTML模板中需要显示富文本编辑器的位置添加
<textarea>标签:
<label for="article_body">文章内容</label> <textarea id="article_body" name="article_body"></textarea>
添加脚本,引入KindEditor JS文件,为指定标签创建富文本编辑器。这里主要说使用KindEditor 上传图片时的必要参数:
<script src="{% static 'kindeditor-4.1.10/kindeditor-all-min.js' %}"></script> <script> var options = { resizeType: 0, uploadJson: "/upload/", //指定图片上传的url路径,server端写一个视图来处理上传的图片 extraFileUploadParams: { "csrfmiddlewaretoken": "{{ csrf_token }}" } }; KindEditor.create("#article_body", options); //为指定元素创建富文本编辑器 </script>
说明:
图片上传要通过
uploadJson参数指定上传的url路径
extraFileUploadParams参数用于提交csrf验证
图片的上传和预览流程:
在富文本编辑器中选择上传图片
KindEditor 将图片通过AJAX的方式上传到服务器指定url
该url对应的视图函数保存图片,并返回包含图片服务器路径的json响应
KindEditor 拿到响应的图片路径后,通过
<img>标签的
src属性,显示预览图片
Django中的代码实现:
配置media(参考博客)并定义路由
from django.conf.urls import url from app import views urlpatterns = [ url(r'^upload/$', views.upload_file, name='upload_file'), url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), # 配置media路由 ]
定义保存图片的视图函数
def upload_file(request): # 拿到文件,保存在指定路径 print(request.FILES) # {'imgFile': [<InMemoryUploadedFile: QQ图片20170523192846.jpg (image/jpeg)>]} imgFile = request.FILES.get('imgFile') # 拿到文件对象,imgFile.name, 拿到文件名 with open('app01/media/upload/img/'+imgFile.name,'wb')as f: # with open 无法创建文件夹,需要自己创建 for chunk in imgFile.chunks(): f.write(chunk) # 返回json响应 response = { 'error': 0, 'url': '/media/upload/img/'+imgFile.name # 客户端拿到路径,才能预览图片; media在setting中配置了别名,这里只写media,客户端就可以找到路径,前面不需要加/app } return HttpResponse(json.dumps(response))
说明:
request.FILES中拿到图片对象
imgFile.name拿到文件名
必须返回包含
error和
url的json响应
更多KindEditor 的使用,参考官网
相关文章推荐
- 为KindEditor图片批量上传功能添加排序支持
- kindeditor 自定义上传图片
- Struts2使用Kindeditor4.0.3在线编辑器--上传图片失败 parserequest为null
- KindEditor编辑器上传图片超过限制
- thinkphp结合KindEditor 上传图片的时候出现“\”导致图片不能正常显示,
- kindeditor修改图片上传功能(一)
- kindeditor 修改上传图片的路径的方法
- 解决kindeditor上传图片、文件的错误。
- django 整合 kindeditor ,解决上传图片 csrf 验证问题
- kindeditor中LitJson图片上传方法
- 关于kindeditor编辑器批量上传图片不显示添加图片按钮的问题
- rails2.3 kindeditor实现本地上传图片
- kindEditor插件上传图片时服务器故障
- 使用KindEditor的图片上传功能,实现图片上传到专门的图片服务器。
- KindEditor插件之图片上传
- KindEditor上传本地图片
- KindEditor简单版实战(1)图片本地上传
- asp.net关于kindeditor 上传图片出现服务器故障的解决办法
- kindeditor 单张图片上传 源码修改
- 学习淘淘商城第二十一课(解决KindEditor上传图片不兼容的问题)