Django 集成富文本KindEditor

前提条件：

1、下载 kindeditor-4.1.10 并放到static目录中

 

第一步：

在项目根目录创建media目录，然后配置media_url和media_root

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

 

第二步：

在urls.py中配置media url和upload_image url

url(r'media/(?P<path>.*)/$', serve, {"document_root": MEDIA_ROOT}),
url(r'^upload_image/$', UploadImageView.as_view(), name="upload_image"),

 

第三步：

在views.py中配置UploadImageView视图

class UploadImageView(View):
    """
    富文本图片上传
    """
    def post(self, request):
        images_dir = "kind_editor_upload_images"
        result = {'error': 1, 'message': '上传出错'}
        image = request.FILES.get('imgFile', None)
        if image:
            result = self.image_upload(image, images_dir)
        return HttpResponse(json.dumps(result))

    def image_upload(self, image, images_dir):
        """
        图片上传
        :param image: 接收图片文件
        :param images_dir: 接收图片上传根目录
        :return: 返回图片url
        """
        allow_suffix = ['jpg', 'png', 'jpeg', 'git', 'bmp']     # 允许上传的图片类型
        image_suffix = image.name.split('.')[-1]
        if image_suffix not in allow_suffix:
            return {'error': 1, 'message': '图片格式不正确'}
        relative_file_path = self.image_dir(images_dir)
        dir_path = os.path.join(settings.MEDIA_ROOT, relative_file_path)
        if not os.path.exists(dir_path):
            os.makedirs(dir_path)
        image_name = str(uuid.uuid1()) + '.' + image_suffix
        image_path = os.path.join(dir_path, image_name)
        image_url = settings.MEDIA_URL + relative_file_path + image_name
        open(image_path, 'wb').write(image.file.read())
        return {'error': 0, 'url': image_url}

    def image_dir(self, images_dir):
        """
        生成图片目录
        :param images_dir: 接收图片上传根目录
        :return: 返回当前日期生成的图片目录
        """
        today = datetime.today()
        images_dir += '/%d/%d/' % (today.year, today.month)
        return images_dir
View Code

 

第四步：

在HTML Template中配置KindEditor JS代码 （注意JS代码中的CSRF_TOKEN）

<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static "kindeditor-4.1.10/themes/default/default.css" %}">
    <link rel="stylesheet" href="{% static "css/bootstrap11.css" %}">
    <script src="{% static "js/jquery-3.2.1.js" %}"></script>
    <script src="{% static "kindeditor-4.1.10/kindeditor-all-min.js" %}"></script>
</head>
<body>
<div style="margin-bottom: 50px" class="col-md-12">
    <form action="{% url "article" %}" method="post" class="col-md-6">
        <input type="text" name="title" class="form-control col-md-6">
        <textarea id="content" name="content" class="form-control col-md-6"></textarea>
        {% csrf_token %}
        <input type="submit" value="submit">
    </form>
</div>

<div>
    <h1>文章列表</h1>
    {% for article in articles %}
    <div style="margin-bottom: 20px">
        <ul>
            <li>{{ article.title }}</li>
            <li>{{ article.content|safe }}</li>
        </ul>
    </div>
    {% endfor %}
</div>


</body>
<script>
    var csrfitems = document.getElementsByName("csrfmiddlewaretoken");
    var csrftoken = "";
    if(csrfitems.length > 0)
    {
        csrftoken = csrfitems[0].value;
    }
    $(function () {
            initKindEditor();
        });
    function initKindEditor() {
        $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        });
        var kind = KindEditor.create('#content', {
            width: '900px',       // 文本框宽度(可以百分比或像素)
            height: '300px',     // 文本框高度(只能像素)
            minWidth: 200,       // 最小宽度（数字）
            minHeight: 400,      // 最小高度（数字）
            uploadJson: '{% url "upload_image" %}',
            extraFileUploadParams : {
                csrfmiddlewaretoken: csrftoken
            }
        });
    }
</script>
</html>
View Code

 

效果：

 

posted @ 2017-06-13 18:12  Vincen_shen  阅读(228)  评论(0)    收藏  举报