Django配置KindEditor

KindEditor

一、文件夹说明

├── asp                          asp示例，删掉
├── asp.net                    asp.net示例，删掉
├── attached                  空文件夹，放置关联文件attached
├── examples                 HTML示例，删掉
├── jsp                          java示例，删掉
├── kindeditor-all-min.js 全部JS（压缩）
├── kindeditor-all.js        全部JS（未压缩）
├── kindeditor-min.js      仅KindEditor JS（压缩）
├── kindeditor.js            仅KindEditor JS（未压缩）
├── lang                        支持语言
├── license.txt               License
├── php                        PHP示例，删掉
├── plugins                    KindEditor内部使用的插件
└── themes                   KindEditor主题

二、实例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
# 配置文件：
# 与用户上传相关的配置
MEDIA_ROOT= os.path.join(BASE_DIR, "media")
MEDIA_URL = "/media/"
 
# 路由中:
from django.urls import path, re_path
from django.views.static import serve
from django.conf import settings
from app01 import views
 
urlpatterns = [
    # media配置:
    re_path(r"media/(?P<path>.*)$", serve, {"document_root": settings.MEDIA_ROOT}),
    # 文本编辑器上传图片url
    path('ke_upload/', views.ke_upload),
]
 
# 模板中：
"""
<div class="form-group">
    <label for="content">内容 </label>  <!--<textarea name="content" cols="30" rows="10"></textarea>-->
    {{ form.content }} <span>{{ form.content.errors.0 }}</span>
</div>
 
{% block js %}
<script src = "/static/js/jquery-3.2.1.min.js"> </script>
<script charset="utf-8" src="/static/plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="/static/plugins/kindeditor/lang/zh_CN.js"></script>
<script>
    // KindEditor 上传的瞬间，帮你生成iframe+form进行伪Ajax操作
    KindEditor.ready(function (K) {
        window.editor = K.create('textarea[name="content"]', {
                resizeType: 1,
                allowPreviewEmoticons: true,
                allowImageUpload: true,
                items: [
                    'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                    'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                    'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
                uploadJson: '/ke_upload/',
                //filePostName:"upload_img",   //默认是imgFile
                extraFileUploadParams:{
                    "csrfmiddlewaretoken":"{{ csrf_token }}"
                }
 
        });
    });
</script>
{% endblock %}
 
"""
 
# 视图中：
from django.shortcuts import render, redirect, HttpResponse
import os
import time
import json
 
 
def ke_upload(request):
    file_obj = request.FILES.get('imgFile')  # 通过filePostName修改
    # 上传后面的参数kd用的是dir
    # upload_img.html?dir=image  说明是图片
    # upload_img.html?dir=media  说明是视频，
    file_type = request.GET.get('dir')
    file_obj.name = "%s%s" % (time.time(), file_obj.name)
    file_dir = 'media%s%s' % (os.sep, file_type)
    if not os.path.exists(file_dir):
        os.makedirs(file_dir)
    file_path = os.path.join("media", file_type, file_obj.name)
    with open(file_path, 'wb') as f:
        for line in file_obj:
            f.write(line)
 
    dic = {
        'error': 0,
        'url': '/media/%s/%s' % (file_type, file_obj.name),
        'message': '错误了...'
    }
    return HttpResponse(json.dumps(dic))

三、补充

用kindeditor上传的flash和视频播放不了，打开编辑器的源码把type属性去掉就可以播放了

四、django-ckeditor

1.下载 

pip install django-ckeditor

2.注册和配置

```
INSTALLED_APPS = [
    
    'ckeditor',
    'ckeditor_uploader',
]

CKEDITOR_UPLOAD_PATH = "ckeditor/"   #是和media结合使用的

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

```

3.使用字段：

```
class Category(models.Model):
    name = models.CharField(verbose_name='类别名称',max_length=16)

class Article(models.Model):
    title = models.CharField(verbose_name='文章标题',max_length=32)
    category = models.ForeignKey('Category',blank=True,null=True,verbose_name='文章类别')
    summary = models.CharField(verbose_name='文章摘要',max_length=256)
    img = models.ImageField(upload_to="article_img/%Y-%m",verbose_name='显示图片',blank=True,default='')
    create_at = models.DateTimeField(auto_now_add=True,verbose_name='创建时间')
    detail = models.OneToOneField('ArticleDetail',verbose_name='文章详情',blank=True,null=True)


from ckeditor_uploader.fields import RichTextUploadingField
class ArticleDetail(models.Model):
    content = RichTextUploadingField(verbose_name='文章详情')
```

4.配置URL：

```python
from django.views.static import serve
from django.conf import settings
from ckeditor_uploader import views

urlpatterns = [

    url(r'^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT}),
    # 上传文件
    url(r'^ckeditor/upload/', views.upload),
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),

]
```

5.模板中：

```python
{{ field }}   富文本编辑框的字段

<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
<script src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
```

6.视图中：
```python
def article_add(request):
    form_obj = ArticleForm()
    detail_form = ArticleDetailForm()

    if request.method == 'POST':
        detail_form = ArticleDetailForm(request.POST)
        if detail_form.is_valid():
            detail_form.save()

        qd = request.POST.copy()
        qd['detail'] = detail_form.instance.pk  #注意是pk
        form_obj = ArticleForm(data=qd, files=request.FILES)
        if form_obj.is_valid():
            form_obj.save()
            return redirect('backend:article_list')

        ##防止多次添加
        if detail_form.is_valid() and detail_form.instance:
            detail_form.instance.delete()

    return render(request,'backend/article_form.html',{'form_obj':form_obj,'detail_form':detail_form})



def article_edit(request,pk):
    obj = models.Article.objects.filter(pk=pk).first()
    form_obj = ArticleForm(instance=obj)
    detail_form = ArticleDetailForm(instance=obj.detail) #

    if request.method == 'POST':
        detail_form = ArticleDetailForm(request.POST, instance=obj.detail)
        if detail_form.is_valid():
            detail_form.save()

        qd = request.POST.copy()
        qd['detail'] = detail_form.instance.pk  #注意是pk
        form_obj = ArticleForm(data=qd, files=request.FILES,instance=obj)
        if form_obj.is_valid():
            form_obj.save()
            return redirect('backend:article_list')

        ##这不用删了

    return render(request,'backend/article_form.html',{'form_obj':form_obj,'detail_form':detail_form})


def article_del(request,pk):
    obj = models.Article.objects.filter(pk=pk).first()
    obj.detail.delete()  #级联删除
    return redirect('backend:article_list')
```



```python
###############
"../../(.*?)"   ===>   "{% static '$1' %}"
"../../"  ===> {% get_static_prefix %}

<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% get_static_prefix %} css/style.css">
##############
```
View Code
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/bubu99/p/10317775.html