Load image dont work in django-ckeditor?

Question

I am tring to use django-ckeditor app to my TextField.

I want to load image from computer but there is no load button. Also I cant enter url of picture. Whats wrong I did? How to fix this problem. Here below you can see want I did.

1) I add ckeditor and ckeditor_uploader to INSTALLED_APPS setting.py:

2) I run the collectstatic management command.

urls.py:

urlpatterns += [
   url(r'^upload/', login_required(views.upload), name='ckeditor_upload'),
   url(r'^browse/', never_cache(login_required(views.browse)), name='ckeditor_browse'),
]

if settings.DEBUG:
   urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
   urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

settings.py:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static_root')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media_root')
MEDIA_URL = '/media/'

CKEDITOR_UPLOAD_PATH = "media/uploads/"
CKEDITOR_JQUERY_URL = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
CKEDITOR_IMAGE_BACKEND = 'pillow'
CKEDITOR_UPLOAD_SLUGIFY_FILENAME = False
CKEDITOR_RESTRICT_BY_USER = True
CKEDITOR_BROWSE_SHOW_DIRS = True

models.py:

class Post(models.Model):
    content= RichTextUploadingField(_('Description'))

forms.py:

class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ('content',)
        widgets = {
           'content': CKEditorUploadingWidget()
        }

views.py:

def post_add(request):
    data = dict()
    if request.method == 'POST':
        post_form = PostForm(request.POST)
        if post_form.is_valid():
           post = post_form.save(commit=False)
           ***Some code***
           post.save()
           data['form_is_valid'] = True
           posts = Post.objects.all()
           context = {'posts ': posts }
           context.update(csrf(request))
           data['html_post'] = render_to_string('project/post_list.html', context)
        else:
            data['form_is_valid'] = False
    else:
        post_form = PostForm()
    context = {'post_form': post_form}
    data['html_post_form'] = render_to_string('project/post_add.html', context, request=request)
    return JsonResponse(data)

post_add.html:

  {% load widget_tweaks %}

  <form method="post" action="">
      {% csrf_token %}

      {{ post_form.media }}

      {% for field in post_form %}
         {% render_field field class="form-control" %}
      {% endfor %}

      <button type="submit">Create</button>
    </form>

<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>

<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

score 0 · Answer 1 · answered May 19 '17 at 03:01

0

You are using the RichTextField, switch to the RichTextUploadingField in your models.py

answered May 19 '17 at 03:01

Christopher Mallon

242
2
11

Yes, I notice it yesterday. I change `RichTextField` to `RichTextUploadingField` but I have steal problems. I cant load picture from comtuper, it redirect me to admin page. I use `RichTextUploadingField` in the form which is outside the admin. Also I notice that its impossible to enter text to inputs in Firefox but in Chrome inputs works fine. Do you have any ideas about that? Check my post pls again. – Nurzhan Nogerbek May 19 '17 at 04:32
What happens when you move {{form.media}} inside the form? – Christopher Mallon May 19 '17 at 13:06
I update my post check it pls. My problem was in url. I removed `url(r'^ckeditor/', include('ckeditor_uploader.urls')),` and changed it. So now I can load image, but I steal have problem. When I click submit button nothing happanes. It must create new post after submit. How take data and save it? What do you think about my `views.py`? – Nurzhan Nogerbek May 19 '17 at 13:17

score 0 · Answer 2 · answered Aug 06 '17 at 10:40

0

you lost this {{ post_form.as_p }} in post_add.html

https://github.com/django-ckeditor/django-ckeditor you should read more detil in link

answered Aug 06 '17 at 10:40

zengzhengrong

3
1

It is good practice to copy the relevant parts of linked documentation here to provide a complete answer for people reading it after the external documentation might have gone. – JSchirrmacher Aug 06 '17 at 10:58

Load image dont work in django-ckeditor?

2 Answers2