设为首页 加入收藏

TOP

django的admin或者应用中使用KindEditor富文本编辑器(一)
2017-09-30 13:03:01 】 浏览:7836
Tags:django admin 或者 应用 使用 KindEditor 文本 编辑器

 

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器。

之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写的很好,但是毕竟不是自己写的好多地方要么不够全面,要么看不懂,整理了一些大神的

博客,所以这次自己实现就决定写这篇博客记录下,以后如果有需求就不用到处找资料了,同时也分享给大家看看,提供借鉴。这次我使用的是kindeditor 富

文本编辑器。之所以选择这个编辑器主要看是它功能齐全还美观。下面这张图是kindeditor的样子,没错功能就是这么多,外观就是这么好看。

 

 

好了开始我们的django 使用kindeditor之路。

 

在应用中使用

第一步:

到官网下载 kindeditor    

下载好后删除这些没有的文件asp,asp.net,jsp,php.在django中这些都没用。

 

第二步:将删除后的文件引入自己的项目中。根目录下的static/js/editor/

 

 

 第三步,将kindeditor 的js文件引入到要做富文本编辑器的网页中,

    <script src="/static/js/editor/kindeditor/kindeditor-all-min.js"></script>
    <script src="/static/js/editor/kindeditor/lang/zh-CN.js"></script>
    <script src="/static/js/editor/kindeditor/themes/default/default.css"></script>
    <script>
        KindEditor.ready(function (k) {
            window.editor = k.create('#editor_id',{
                resizeType:1,
                allowPreviewEmoticons : false,
                allowImageRemote : false,
                {#处理url#}
                uploadJson : '/upload/kindeditor',

            });
        })


    </script>
View Code

 

我项目中引入截图,uploadJson 是上传文件的url地址,这个要根据自己url是怎么配置具体更改。下面会讲到url配置。

 

 第四步,在thml的textarea 中加入一个id=editor_id ,这个就是富文本编辑框。这个id在上一步的js中有用到,这个需要注意下。

<textarea id="editor_id" name="content" style="height: 400px" >{{ text }}</textarea>
View Code

 

做到这一步富文本编辑框已经出来了,下面看是做django中的配置。

 

django中配置

 第一步:配置静态文件上传目录,编辑器中上传的文件将保存在这里。

MEDIA_URL = '/static/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "static/media")
View Code

 

 第二步:在项目的urls配置文件中配置

 

 

 

 第三步:在自己的应用中创建一个文件名为uploads.py 的模块,

这里是在我的blog应用中,创建好后将下面这段代码复制到文件中

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):
    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', 'zip', "swf", "flv",
                    "mp3", "wav", "wma", "wmv",
                    "mid", "avi", "mpg", "asf",
                    "rm", "rmvb", "doc", "docx",
                    "xls", "xlsx", "ppt", "htm",
                    "html", "txt", "zip", "rar",
                    "gz", "bz2"]
    file_suffix = files.name.split(".")[-1]
    if file_suffix not in allow_suffix:
        return {"error": 1, "message"
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇python--3、函数 下一篇django的admin或者应用中使用Kind..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目