1.下载kindeditor
  网址:http://kindeditor.net/demo.php
2.解压到项目中
  地址:\static\js\kindeditor-4.1.10
3.删除没用的文件
  例如:example,php,asp等
4.在需要使用富文本编辑器的model中定义meta类:

  1. class Media:
  2. js = (
  3. '/static/js/kindeditor-4.1.10/kindeditor-min.js',
  4. '/static/js/kindeditor-4.1.10/lang/zh_CN.js',
  5. '/static/js/kindeditor-4.1.10/config.js',
  6. )

5.在kindeditor-4.1.10目录中定义config.js文件:

  1. KindEditor.ready(function(K) {
  2. K.create('textarea[name=需要使用富文本的字段名]',{
  3. width:'800px',
  4. height:'200px',
                uploadJson: '/util/upload/kindeditor',
  5. });
  6. });

6.在urls.py中定义文件上传的处理器:

  1. from util.upload import upload_image
  2.  
  3. url(r'^util/upload/(?P<dir_name>[^/]+)$', upload_image, name='upload_image'),

7.在settings.py中定义文件上传的目录如下:

  1. MEDIA_URL = '/uploads/'
  2.  
  3. MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads')

8.处理upload的py文件:

  1. # -*- coding: utf-8 -*-
  2. from django.http import HttpResponse
  3. from django.conf import settings
  4. from django.views.decorators.csrf import csrf_exempt
  5. import os
  6. import uuid
  7. import json
  8. import datetime as dt
  9.  
  10. @csrf_exempt
  11. def upload_image(request, dir_name):
  12. ##################
  13. # kindeditor图片上传返回数据格式说明:
  14. # {"error": 1, "message": "出错信息"}
  15. # {"error": 0, "url": "图片地址"}
  16. ##################
  17. result = {"error": 1, "message": "上传出错"}
  18. files = request.FILES.get("imgFile", None)
  19. if files:
  20. result =image_upload(files, dir_name)
  21. return HttpResponse(json.dumps(result), content_type="application/json")
  22.  
  23. #目录创建
  24. def upload_generation_dir(dir_name):
  25. today = dt.datetime.today()
  26. dir_name = dir_name + '/%d/%d/' %(today.year,today.month)
  27. if not os.path.exists(settings.MEDIA_ROOT + dir_name):
  28. os.makedirs(settings.MEDIA_ROOT + dir_name)
  29. return dir_name
  30.  
  31. # 图片上传
  32. def image_upload(files, dir_name):
  33. #允许上传文件类型
  34. allow_suffix =['jpg', 'png', 'jpeg', 'gif', 'bmp']
  35. file_suffix = files.name.split(".")[-1]
  36. if file_suffix not in allow_suffix:
  37. return {"error": 1, "message": "图片格式不正确"}
  38. relative_path_file = upload_generation_dir(dir_name)
  39. path=os.path.join(settings.MEDIA_ROOT, relative_path_file)
  40. if not os.path.exists(path): #如果目录不存在创建目录
  41. os.makedirs(path)
  42. file_name=str(uuid.uuid1())+"."+file_suffix
  43. path_file=os.path.join(path, file_name)
  44. file_url = settings.MEDIA_URL + relative_path_file + file_name
  45. open(path_file, 'wb').write(files.file.read()) # 保存图片
  46. return {"error": 0, "url": file_url}

Django使用富文本编辑器的更多相关文章

  1. [原创]Python/Django使用富文本编辑器XHeditor上传本地图片

    前言 为了在Django框架下使用Xheditor上传图片,居然折腾了我一个晚上.期间也遇到种种问题,网上相关资料极少.现在把经验分享给大家. 正文 xheditor篇 1.下载http://xhed ...

  2. Django使用富文本编辑器ckediter

    1 - 安装 pip install django-ckeditor 2 - 注册APP ckeditor 3 - 由于djang-ckeditor在ckeditor-init.js文件中使用了JQu ...

  3. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  4. Django实现的博客系统中使用富文本编辑器ckeditor

    操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...

  5. Django后台管理admin或者adminx中使用富文本编辑器

    在admin或者adminx后台中使用富文本编辑器 一.建立模型:(安装django-tinymce==2.6.0) from django.db import models from tinymce ...

  6. django-应用中和amdin使用富文本编辑器kindeditor

    文章描述.新闻详情和产品介绍等,都需要大量的文字描述信息或图片.视频.文字的编辑等,这个时候我们就需要介绍第三方富文本编辑器. 今天介绍的是django中绑定和应用kindeditor编辑器: 效果如 ...

  7. flask项目中使用富文本编辑器

    flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...

  8. vue+element-ui 使用富文本编辑器

    npm安装编辑器组件npm install vue-quill-editor –save 在components文件夹创建ue.vue组件,如下 ue.vue代码如下: <!-- 组件代码如下 ...

  9. 使用富文本编辑器Kindeditor

    今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...

随机推荐

  1. java学习笔记——Collection集合接口

    NO 方法名称 描述 1 public boolean add(E e) 向集合中保存数据 2 public void clear() 清空集合 3 public boolean contains(O ...

  2. 屏蔽NumberPicker点击可输入问题

    1.xml布局中添加属性:Android:descendantFocusability="blocksDescendants" 2.代码中设置:numberPicker.setDe ...

  3. A Quick Look at P3P

    P3P Made Simple By default, IE will reject cookies coming from 3rd-party contexts. A 3rd-party conte ...

  4. TCO'10 Wildcard Round 1000pt

    题目大意: 给定一个N*M的棋盘,棋子可以攻击其左右距离不超过K的棋子.问有多少种放法使得棋盘上的棋子不能互相攻击. N,M,K都在1到1000000000的范围内,结果对100003取模. 官方题解 ...

  5. Spring获取HttpServletRequest

    ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest()

  6. apt-update 更新失败 (无法连接到ubuntu服务器)

    解决方法: 找一个可以更新的系统,拷贝里面的sources.list文件,并将原系统的sources.list进行备份.

  7. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  8. SpringSecurity学习二----------实现自定义登录界面

    © 版权声明:本文为博主原创文章,转载请注明出处 1.项目结构 2.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0& ...

  9. Linux - vim安装 配置与使用

    一 Vim 简单介绍 曾经一直用vi,近期開始使用 vim,以下将两者做一下比較. vi和vim都是word=%E5%A4%9A%E6%A8%A1&fr=qb_search_exp&i ...

  10. centos7 配置ssh 免密码登陆

    我只有一台机器,是因为要配置hadoop分布式环境用,需要配置ssh 两个用户: zhangxs, root 首先在切换到zhangxs用户下 执行[ ssh-keygen -t rsa] [zhan ...