13

This is a duplicate of Django Ckeditor image browser not finding images, but I believe the answer there is wrong (there is an obvious bug in it with an undefined variable, not to mention the lack of Python indentation).

I'm using Django CKEditor 5.0.3 and Django 1.9.6. I am able to upload images in my admin, but they appear as a red X within the admin and do not appear on my site.

I'm still struggling a bit with MEDIA_ROOT and whatnot, but I think I have it right:

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

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

CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_IMAGE_BACKEND = "pillow"
CKEDITOR_UPLOAD_SLUGIFY_FILENAME = False

My urls.py, including my attempt at cleaning up the linked answer:

from django.conf import settings
from django.conf.urls import url, include
from django.conf.urls.static import static
from django.contrib import admin
from mainsite.views import HomepageView, AboutView, ContactView
from django.contrib.staticfiles.urls import staticfiles_urlpatterns

urlpatterns = [
    url(r'^admin/', admin.site.urls, name="admin"),
    url(r'^$', HomepageView.as_view(), name="homepage"),
    url(r'^about/', AboutView.as_view(), name="about"),
    url(r'^contact/', ContactView.as_view(), name="contact"),
    url(r'^blog/', include("blog.urls", namespace="blog")),
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

if settings.DEBUG:
    urlpatterns += [
        url(r'^media/(?P<path>.*)$',
            'django.views.static.serve', {
                'document_root': settings.MEDIA_ROOT,
            }
        ),
    ]

urlpatterns += staticfiles_urlpatterns()
1
  • What worked for me....is changing MEDIA_URL = '/media/' to MEDIA_URL = 'media/' . Note the missing forward slash . Apr 5, 2018 at 11:44

5 Answers 5

17
+25

Using CKEDITOR_UPLOAD_PATH = 'uploads/' makes django-ckeditor to upload an image to /media/uploads/, like:

settings.py:

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static/'),
]
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'
CKEDITOR_UPLOAD_PATH = 'uploads/'

When using the Django's dev server, static files are served by default but not media files, so you can force the server to consider them, the url configuration below should work.

urls.py:

from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.views.static import serve
from .views import HomeView

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', HomeView.as_view(), name='home'),
    url(r'^ckeditor/', include('ckeditor_uploader.urls')),

# serving media files only on debug mode
if settings.DEBUG:
    urlpatterns += [
        url(r'^media/(?P<path>.*)$', serve, {
            'document_root': settings.MEDIA_ROOT
        }),
    ]

The missing function patterns from the old example was an old function I believe used on Django 1.6 or 1.7.

1
  • 2
    Its important to put CKEDITOR_UPLOAD_PATH after MEDIA_URL else your picture won't be shown. Nov 3, 2019 at 10:03
7

After installing ckeditor, perform the following :

  1. In Settings.py: add 'ckeditor' and 'ckeditor_uploader' into INSTALLED_APPS. Add CKEDITOR_UPLOAD_PATH = 'uploads_directory/' (Do not join MEDIA_ROOT with the upload_directory, ckeditor will take the MEDIA_ROOT as its root upload directory)

  2. In your models files: USE : from ckeditor_uploader import RichTextUploadingField and modify your required model field to type RichTextUploadingField

  3. In urls.py: add re_path(r'^ckeditor/', include('ckeditor_uploader.urls')) into urlpatterns

1
  • this is the correct method (as of ckeditor 4 with django 3). Thanks!
    – SGhaleb
    Jun 17, 2020 at 17:44
4

Using Django 1.8 with django-ckeditor 5.3.0, I was getting the exact same symptoms as those above (uploading files worked, but the src attribute of the <img> tag was set incorrectly, causing a red "X" in the preview and broken image links upon publication).

In my case, however, I didn't have to change anything in urls.py. My problem was that I had:

CKEDITOR_UPLOAD_PATH = os.path.join(MEDIA_ROOT, "ckeditor")

So my mistake was giving CKEDITOR_UPLOAD_PATH the path where I wanted ckeditor to upload to (logical, no?).

The fix was to change the above line to

CKEDITOR_UPLOAD_PATH = "ckeditor"

In hindsight I can see how this allows django-ckeditor the ability to use the MEDIA_ROOT for uploading and the MEDIA_URL for serving. Still I thought someone should say it: "Don't use the full path when setting CKEDITOR_UPLOAD_PATH!"

I hope this saves others some time.

3

For Django 4 the steps to enable image or file upload in django-ckeditor is:

1. Install django-ckeditor

pip install django-ckeditor

2. Update settings.py

Add file upload path:

CKEDITOR_UPLOAD_PATH = "uploads/"

Add ckeditor,ckeditor_uploader in INSTALLED_APPS:

INSTALLED_APPS = [
    ...

    # plugins
    'ckeditor',
    'ckeditor_uploader'
]

3. Update urls.py

Add path('ckeditor/', include('ckeditor_uploader.urls')) in urlpatterns:

urlpatterns = [
                  ...
                  path('ckeditor/', include('ckeditor_uploader.urls')),
              ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

4. Use RichTextUploadingField in models

from ckeditor_uploader.fields import RichTextUploadingField

class ResearchTopic(models.Model):
    title = models.CharField(max_length=200)
    description = RichTextUploadingField()

Tested with:

Django==4.0.4
django-ckeditor==6.4.0

References:

0
2

The @Mohammed-tayab's solution worked for me with a little modification:

from ckeditor_uploader.fields import RichTextUploadingField

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.