[Fixed]-Django CKEditor Image Uploads not appearing

17๐Ÿ‘

โœ…

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.

๐Ÿ‘คMarcs

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

๐Ÿ‘คMohammed Tayab

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.

๐Ÿ‘คnttaylor

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:

๐Ÿ‘คarshovon

2๐Ÿ‘

The @Mohammed-tayabโ€™s solution worked for me with a little modification:

from ckeditor_uploader.fields import RichTextUploadingField

๐Ÿ‘คzahra alizadeh

Leave a comment