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
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.