关闭

11. Django 引入富文本编辑器KindEditor

标签: django文本编辑python
3870人阅读 评论(5) 收藏 举报
分类:

码农故事多
打开微信扫一扫,关注微信公众号【数据与算法联盟】

转载请注明出处:http://blog.csdn.net/gamer_gyt
博主微博:http://weibo.com/234654758
Github:https://github.com/thinkgamer


写在前边的话

一路走来,DJango也用了挺久了,自己也做了一些基于Django的小项目,具体可看github,但是Django默认的admin后台编辑文本框实在是太丑了,而且单一,其实在很久之前就想写这篇文章了,但是由于种种原因拖延到了现在,终于下定了决心来写,现在时间是00:17。


KindEditor介绍

官网地址是:http://kindeditor.net
目前最新版本是4.1.1,我现在做这个东西是用python3.5 ,django 1.10.4 ,三者之间完全兼容
看一张效果图吧:
这里写图片描述


使用过程

1:下载该文件,解压至相应的js文件目录

例如我的目录是:
这里写图片描述
这里我删除了多余的文件,因为是python项目,其他的都用不到,所以选择删除,节省空间

2:settings.py和urls.py配置

在项目的settings.py 中设置MEDIA_ROOT 目录
eg:

#文件上传配置
MEDIA_ROOT = os.path.join(BASE_DIR,’uploads’)

项目的根urls.py 配置
eg:

url(r'^admin/uploads/(?P<dir_name>[^/]+)$', upload_image, name='upload_image'),
url(r"^uploads/(?P<path>.*)$", views.static.serve, {"document_root": settings.MEDIA_ROOT, }),

3:编写upload.py文件

该文件存放于项目的根目录同名文件夹下,eg:

这里写图片描述

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):
        os.makedirs(settings.MEDIA_ROOT)
    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}

4:config.js 配置

该配置文件主要是对django admin后台作用的,比如说我们现在有一个news的app,我们需要对该模块下的 news类的content加上富文本编辑器,这里需要做两步

第一:在news 的admin.py中加入

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',
    )

第二:config.js 中配置
上边说了我们是要对news的content加上富文本编辑器,那么我们首先要定位到该文本框的name属性,鼠标右键查看源代码,如下红线标示:
这里写图片描述

config.js 中加入:

//news
KindEditor.ready(function(K) {
    K.create('textarea[name="new_content"]', {
        width : "800px",
        height : "500px",
        uploadJson: '/admin/uploads/kindeditor',
    });
});

至此,已经完成,如果你还有什么不懂的,可以加我关注我的微信公众号,进行提问,谢谢!


Over!

1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Django后台整合TinyMCE富文本编辑器

##### 前情提要:(其实并没有什么前情) 我们已经有了一个最基本的博客应用,博客的结构如下。博客有基本的后台以及article发布功能。下面我们将后台的新建article的编辑框换成TinyMC...
  • bianer199
  • bianer199
  • 2015-10-03 00:32
  • 2099

django-tinymce django支持富文本编辑器

先展示一个呵呵:流程大致如下:1:下载最新版本的tinymce2:解压然后把tinymce放到你的meida目录下,我放在media下的js文件夹里(media和js如果没有自己创建),结构下:3:编...
  • cugyyt
  • cugyyt
  • 2010-07-31 18:58
  • 13929

Django之富文本编辑器的使用,超级简单~

前端显示:Step1: pip3 install django-tinymce Step2: tinyMCE.init({ 'mode':'textareas', ...
  • qq_33733970
  • qq_33733970
  • 2017-11-24 15:38
  • 270

给Django后台富文本编辑器添加上传文件的功能

原文链接:http://www.cnblogs.com/shawlang/p/4766681.html 使用富文本编辑器上传的文件是要放到服务器上的,所以这是一个request。既然是一个reque...
  • u013398398
  • u013398398
  • 2016-08-05 11:45
  • 1270

django 个人博客系统开发 - 富文本编辑器

常见的富文本编辑器 ckeditor  ueditor kindeditor tinymce admin中添加富文本编辑器的方式 1,第三方库,如django-ckeditor 2,admin中定...
  • valexchao
  • valexchao
  • 2016-05-04 16:06
  • 2237

django 整合富文本编辑器 tiny_mce

from:http://blog.csdn.net/fuwencaho/article/details/41164901 目录(?)[-] 一下载代码二服务器目录三modelspy...
  • fighter_yy
  • fighter_yy
  • 2014-11-18 16:40
  • 4389

Django集成Ueditor富文本编辑器及少量功能定制详解

本文介绍了如何在Python2.7+Django1.7的环境下集成Ueditor1.4.3的前端,并自行编写后端的处理过程,使得该富文本编辑器可以上传图片、文件、涂鸦等等。 本文适合已经对Python...
  • samed
  • samed
  • 2015-01-06 23:24
  • 2844

Django开发,给admin模块添加富文本

第一步,下载kindeditor  http://kindeditor.net/down.php 第二步,下载下来后放到静态文件static 下面的js下面,如图: 第三步,接着在admin...
  • xfyangle
  • xfyangle
  • 2017-02-19 12:34
  • 1209

django—bootstrapt 前端网页开发总结

一、导航栏         navbar-inverse navbar-fixed-top">         ...
  • JackLiu16
  • JackLiu16
  • 2017-12-12 22:31
  • 80

django之admin中使用markdown编辑器,并实时预览一

不清楚的可查看:本人博客github地址安装django-markdownx Macos:直接pip install django-mrakdownx;Ubuntu需要先安装pillow,参考此链接。...
  • u014547577
  • u014547577
  • 2017-04-21 14:53
  • 1835
    Thinkgamer微博
    微信公众号【数据与算法联盟】

    扫码关注公众号,获取小编微信拉你进数据算法大佬群!
    个人资料
    • 访问:994152次
    • 积分:11213
    • 等级:
    • 排名:第1630名
    • 原创:221篇
    • 转载:22篇
    • 译文:2篇
    • 评论:331条
    个人简介
    姓名:Thinkgamer

    Github:https://github.com/thinkgamer

    主攻:云计算/python/数据分析

    程度:熟悉/熟悉/熟悉

    微信:gyt13342445911

    Email:thinkgamer@163.com

    工作状态:在职ing

    心灵鸡汤:只要努力,你就是下一个大牛...

    hadoop/spark/机器学习群:279807394(大神建的群,蹭个管理员)

    欢迎骚扰........
    博客专栏
    最新评论