jquerydjangodjango-ckeditor

Can not set django-ckeditor on my app


I hate to ask those kind of question which has already been solved in similar cases but I am getting mad on it since 3 days.

I use django 1.10 & Jquery 3.1.1 (already loaded in my page for another tool). And try to make django-ckeditor 5.1.1 work on my project. I alread run the ckeditor_demo and it worked so the package is properly installed.

I have follow the git doc. And spent several hours on Stack.

The settings concerned by ckeditor in my settings.py:

from __future__ import absolute_import
import tempfile
import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sites',
    'blog',
    'CreateYourLaws',
    'captcha',
    'registration',
    'ckeditor',
    'ckeditor_uploader',
]

# Plenty of others Settings for other tools...

# Settings for ckeditors
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(tempfile.gettempdir(), 'ck_static')
MEDIA_ROOT = os.path.join(tempfile.gettempdir(), 'ck_media')

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Basic',
    },
}

CKEDITOR_UPLOAD_PATH = "uploads/"
CKEDITOR_IMAGE_BACKEND = "pillow"

I also already tried with the setting:

CKEDITOR_JQUERY_URL = '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'

It does not work either. I prefered to remove it because I have already load jquery 3.1.1 in my template.

I have also already run the manage.py collectstatic command (after writting my settings of course).

my urls.py:

from django.conf.urls import url, include
from . import views
from django.conf import settings
from django.conf.urls.static import static
#... and few others

urlpatterns = [
    url(r'^$', views.home, name='home'),
    # ... many others
    url(r'^article/(\d+)$', views.view_article, name='article'),
    url(r'^ckeditor/', include('ckeditor_uploader.urls'),)
] + static(
    settings.STATIC_URL,
    document_root=settings.STATIC_ROOT
) + static(
    settings.MEDIA_URL,
    document_root=settings.MEDIA_ROOT
)

my model:

from django.db import models
# Other imports...
from ckeditor.fields import RichTextField

class Reflection(models.Model):
    title = models.CharField(max_length=150, blank=True, null=True)
    # Some Attributes

    class Meta:
        abstract = True
        #...
class Proposition(Reflection):
    text = RichTextField()
    # Other attributes

my form:

from django import forms
# other imports...
from CreateYourLaws.models import Proposition
from ckeditor.widgets import CKEditorWidget

class PropositionForm(forms.ModelForm):
    class Meta:
        model = Proposition
        fields = ('title', 'text')
        labels = {'title': ('Nommez votre proposition de loi'),
                  'text': ("votre proposition de loi")}
        widgets = {
            'text': CKEditorWidget()
        }

my view:

@login_required
def view_article(request, id_article):

    # A very good and interesting code...

    if request.method == 'POST' and 'propform' in request.POST:
        propform = PropositionForm(request.POST)
        if propform.is_valid():
            proptitle = propform.cleaned_data['title']
            prop = propform.cleaned_data['text']
            prp = Proposition.objects.create(text=prop,
                                             title=proptitle,
                                             autor=User,
                                             content_object=Article)
            prp.save()
    propform = PropositionForm()
    # A bit of code...
    return render(request,
                  'main.html',
                  locals())

my template:

{% block script %}
    <script type="text/javascript" src="{% static 'js/jstree.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-ui.min.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'js/jquery-ui.min.css' %}"></link>
    <script type="text/javascript" src="{% static 'js/myJS_CYL.js' %}"></script>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
    <style type="text/css" media="screen">
        nav{display: block;}    
    </style>
{% endblock %}

{% block content %}
        <section class="proposition">
            <form action="{% url 'article' Article.id %}" method="post" class="propform">
                {% csrf_token %}
                {{ propform.as_p }}
                <button type="submit" class="butprop" name="propform">Poster votre proposition </button>
            </form> 
        </section>
{% endblock %}

I already tried also with adding {{ propform.media }} it doesn't work either and according to the doc, it is useless if you add the scripts in head.

My page loads normaly, everything works properly, no errors in the terminal, but instead of my CKEditorWidget, I still have my simple TextArea. What am I doing wrong and/or forget?

Bonus Question: I do not need to upload anything in my CKeditorwidget. Which settings and URL can I remove the 'ckeditor_uploader' app? MEDIA_URL, MEDIA_ROOT, CKEDITOR_UPLOAD_PATH, CKEDITOR_IMAGE_BACKEND? The 'ckeditor_uploader.urls'?

Thanks for your time and your answers


Solution

  • Ok I have found the main problem: All the text areas mus have different name on the page. I had 4 different forms in my page with a field called 'Text' in each forms so only the first one had CKeditor properly loaded.