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

class Media:
js = (
'/static/js/kindeditor-4.1.10/kindeditor-min.js',
'/static/js/kindeditor-4.1.10/lang/zh_CN.js',
'/static/js/kindeditor-4.1.10/config.js',
)

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

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

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

from util.upload import upload_image

url(r'^util/upload/(?P<dir_name>[^/]+)$', upload_image, name='upload_image'),

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

MEDIA_URL = '/uploads/'

MEDIA_ROOT = os.path.join(BASE_DIR,  'uploads')

8.处理upload的py文件:

# -*- coding: utf-8 -*-
from django.http import HttpResponse
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
import os
import uuid
import json
import datetime as dt @csrf_exempt
def upload_image(request, dir_name):
##################
# kindeditor图片上传返回数据格式说明:
# {"error": 1, "message": "出错信息"}
# {"error": 0, "url": "图片地址"}
##################
result = {"error": 1, "message": "上传出错"}
files = request.FILES.get("imgFile", None)
if files:
result =image_upload(files, dir_name)
return HttpResponse(json.dumps(result), content_type="application/json") #目录创建
def upload_generation_dir(dir_name):
today = dt.datetime.today()
dir_name = dir_name + '/%d/%d/' %(today.year,today.month)
if not os.path.exists(settings.MEDIA_ROOT + dir_name):
os.makedirs(settings.MEDIA_ROOT + dir_name)
return dir_name # 图片上传
def image_upload(files, dir_name):
#允许上传文件类型
allow_suffix =['jpg', 'png', 'jpeg', 'gif', 'bmp']
file_suffix = files.name.split(".")[-1]
if file_suffix not in allow_suffix:
return {"error": 1, "message": "图片格式不正确"}
relative_path_file = upload_generation_dir(dir_name)
path=os.path.join(settings.MEDIA_ROOT, relative_path_file)
if not os.path.exists(path): #如果目录不存在创建目录
os.makedirs(path)
file_name=str(uuid.uuid1())+"."+file_suffix
path_file=os.path.join(path, file_name)
file_url = settings.MEDIA_URL + relative_path_file + file_name
open(path_file, 'wb').write(files.file.read()) # 保存图片
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. 系统重装 VISTA下如何删除EISA分区

      现在的品牌电脑大部分都有一键还原,把还原内容存储在EISA配置的隐藏分区里面,一般的软件都无法对其进行操作,保证分区及系统还原的安全性.这样的功能对于一些人不使用一键还原(笔者即是)来说实属鸡肋功 ...

  3. Mysql和SqlServer互相转换

    环境: Windows XP sp2 MS SQL Server 2OOO sp1 MySql 5.0.41 1:MSSQLServer数据库导入到MySql数据库 步骤: 1.安装mysql数据库的 ...

  4. SQL JOB 调用 SSIS package 权限问题

    来自: http://www.cnblogs.com/sodacc/archive/2012/11/26/2789135.html 第一次用SQL给SSIS包排JOB的时候,都会遇到这样一个问题:单独 ...

  5. awk、sed、cut、grep

    二.sed [可以理解为 行在线编辑工具] 作用:sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命 ...

  6. lodash 数组元素查找 findIndex

    _.findIndex(array, [predicate=_.identity]) 这个方法类似 _.find.除了它返回最先通过 predicate 判断为真值的元素的 index ,而不是元素本 ...

  7. JUnit编写单元测试代码注意点小结

    用eclipse编写单元测试的时候,可以直接选中某个类,然后右键new新疆一个junit case,界面如下图1所示: 图1:新建test case 选 择图1中的JUnit Test Case,然后 ...

  8. Docker在Centos下使用Dockerfile构建远程Tomcat和Jenkins镜像

    镜像构建准备环境原料 构建CentOS Docker tomcat镜像 Dockerfile文件内容: FROM centos:latest MAINTAINER boonya <boonya@ ...

  9. Android下关于消息的推送(9.10)

    1 http://developer.baidu.com/wiki/index.php?title=docs/cplat/push/api  百度云推送 2 http://blog.csdn.net/ ...

  10. "fcitx按ctrl+space没反应"解决方法

    如果是KDM.GDM.LightDM,打开~/.xprofile.如果是startx.Slim,打开~/.xinitrc.(没有就新建一个) export GTK_IM_MODULE=fcitxexp ...