CKEditor与Django结合实现上传本地图片|极客教程

CKEditor与Django结合实现上传本地图片

在开发网页应用程序时，我们经常会使用到富文本编辑器来让用户方便地输入和编辑内容。而CKEditor是一个功能强大的富文本编辑器，它提供了丰富的编辑功能和可插拓展性，使得它成为开发者们的首选。

在Django中使用CKEditor是非常常见的，而在实际开发中，我们经常需要实现上传本地图片到服务器的功能。本文将详细介绍如何利用CKEditor与Django结合实现上传本地图片的功能。

1. 集成CKEditor到Django项目中

首先，我们需要在Django项目中集成CKEditor。这里我们以使用django-ckeditor这个第三方应用为例。

步骤1：安装django-ckeditor

在命令行中执行以下命令来安装django-ckeditor:

pip install django-ckeditor

步骤2：配置settings.py

在Django项目的settings.py文件中添加如下配置：

INSTALLED_APPS = [
    ...
    'ckeditor',
]

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Custom',
        'height': 300,
        'width': 800,
    },
}

步骤3：在模型中使用CKEditor

在需要使用CKEditor的模型中，使用CKEditorUploadingField字段来替换TextField字段，示例如下：

from ckeditor.fields import RichTextField

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = RichTextField()

2. 实现上传本地图片功能

接下来，我们将详细介绍如何实现在CKEditor中上传本地图片的功能。

步骤1：配置urls.py

首先，在项目的urls.py中添加如下配置：

from django.conf.urls import include

urlpatterns = [
    ...
    path('ckeditor/', include('ckeditor_uploader.urls')),
]

步骤2：配置settings.py

在settings.py中添加如下配置：

CKEDITOR_UPLOAD_PATH = 'uploads/'

CKEDITOR_RESTRICT_BY_USER = True

MEDIA_URL = '/media/'

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

步骤3：创建上传视图

接着，创建一个新的视图来处理图片的上传请求：

from django.http import JsonResponse
from django.views.decorators.cache import never_cache

@never_cache
def upload_image(request):
    if request.method == 'POST' and request.FILES:
        file = request.FILES.get('upload')
        path = os.path.join(settings.MEDIA_ROOT, 'ckeditor_uploads', file.name)
        with open(path, 'wb+') as destination:
            for chunk in file.chunks():
                destination.write(chunk)

        url = os.path.join(settings.MEDIA_URL, 'ckeditor_uploads', file.name)
        return JsonResponse({'url': url})
    else:
        return JsonResponse({'error': 'Invalid request'})

步骤4：在CKEditor配置中添加上传图片功能

最后，在CKEditor的配置中添加上传图片功能：

CKEDITOR_CONFIGS = {
    'default': {
        ...
        'filebrowserUploadUrl': '/upload_image/',
    }
}

3. 实例演示

为了更好地展示上传本地图片功能，我们将创建一个简单的文章发布页面，在页面中使用CKEditor来编辑文章内容并上传本地图片。

步骤1：创建文章模型

首先，创建一个简单的文章模型来存储文章信息：

from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=100)
    content = RichTextField()

步骤2：创建文章编辑页面

在templates目录下创建一个新的HTML文件article_form.html，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>发布文章</title>
    <script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
</head>
<body>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="text" name="title" placeholder="文章标题"/><br/>
        <textarea name="content"></textarea><br/>
        <input type="file" name="upload"/><br/>
        <input type="submit" value="发布文章"/>
    </form>
    <script>
        CKEDITOR.replace('content');
    </script>
</body>
</html>

步骤3：定义文章上传视图

在views.py中创建一个新的视图用于处理文章的上传请求：

from django.shortcuts import render
from .models import Article

def article_form(request):
    if request.method == 'POST':
        title = request.POST.get('title')
        content = request.POST.get('content')
        article = Article.objects.create(title=title, content=content)
        return render(request, 'success.html', {'article': article})
    else:
        return render(request, 'article_form.html')

步骤4：配置urls.py

在urls.py中配置文章上传页面的URL：

from django.urls import path
from .views import article_form

urlpatterns = [
    path('article/', article_form, name='article_form'),
]

步骤5：运行项目

现在，运行Django项目，访问文章编辑页面，你就可以使用CKEditor来编辑文章内容并上传本地图片了。

结语

通过本文的介绍，我们详细了解了如何在Django项目中集成CKEditor并实现上传本地图片的功能。

CKEditor与Django结合实现上传本地图片