I have an issue similar to this previous question : Django-ckeditor not displaying correctly in html
except that my settings seem to be ok but still not displaying in the html page. What am I missing?
settings.py
INSTALLED_APPS = [
'ckeditor',
'ckeditor_uploader',
]
CKEDITOR_CONFIGS = {
'awesome_ckeditor': {
'toolbar': 'full',
},
}
CKEDITOR_IMAGE_BACKEND = "pillow"
and in the html page rendering the edited post I have:
post_detail.html
<div class="post-content">{{post.text|safe|linebreaksbr}}</div>
Everything works fine on the admin side:
yet it is not displayed on the page:
It seems that the html was rendered properly and only missing css formatting to add for the html tags. I am leaving this post in case it could be useful for someone to check for such issue.
Related
Hi Im trying to install TinyMCE on a Django project and Im totally lost about static files, MEDIA, and the world itself.
I want to use TinyMCE in one of the fields of a form:
class MovieForm(forms.ModelForm):
class Meta:
model = Movie
fields = ['title', 'language', 'description']
widgets = {
'languages': forms.SelectMultiple(),
'description': TinyMCE({'cols':80, 'rows':30}),
}
I installed django-tinymce
pip install django-tinymce
Then I added it to the installed apps
INSTALLED_APPS = (
...
'tinymce',
...
)
And then added the urls in my project urls.py
urlpatterns = patterns('',
...
(r'^tinymce/', include('tinymce.urls')),
...
)
Great. So what do I do next?
I read the Configuration part on http://django-tinymce.readthedocs.io/en/latest/installation.html#configuration but I dont get it.
Should I add TINYMCE_JS_URL = os.path.join(MEDIA_URL, "path/to/tiny_mce/tiny_mce.js") to my project settings.py? Where do I put tiny_mce.js? Should I configure MEDIA_URL somewhere?
Would be awesome if someone can point me in the right direction.
Thanks! :)
I figured this, so I'm posting an answer in case anyone else comes across this.
I read more in details the documentation on Static files (https://docs.djangoproject.com/en/1.10/howto/static-files/), and read the related section of the great book Tango with Django (http://www.tangowithdjango.com/).
That helped me to understand the MEDIA and STATIC setup I needed to get right in order to get working TinyMCE with Django.
tiny_mce.js went to the static files folder (specifically to static/tiny_mce/).
The settings.py of Tinymce check if static is confidured, and points there to get the needed files. Tadaa! It works!
Hopefully it will help someone!
I'm trying to implement django-tinymce in my project. I'd love to use some rich text capability when writing my blog posts, so I'm aiming at applying the HTMLField to the body in the admin.
The settings that I am currently using are really simple - this is what I have in settings.py:
TINYMCE_DEFAULT_CONFIG = {
'theme': "advanced",
'plugins': "wordcount,preview,emotions,", //only wordcount seems to have any effect
'height': "400px",
'width': "700px",
}
this is in the models.py:
from tinymce import models as tinymce_models
...
body = tinymce_models.HTMLField()
and I call the .js in the heads like so:
<script type="text/javascript" src="{% static "tiny_mce/tiny_mce.js" %}"></script>
My issue - no matter what I do in the settings, I get the same result:
Here is what I got
I would appreciate any pointers to what I might be doing wrong.
Thanks a bunch!
Deyan
So, after banging my head for a few days, this is what I finally achieved.
settings.py
# tinymce
TINYMCE_DEFAULT_CONFIG = {
'theme': "advanced",
'plugins': "wordcount,preview,emotions,preview,spellchecker,",
'height': "400px",
'width': "700px",
'theme_advanced_buttons3' : "fontselect,fontsizeselect,emotions,preview,",
}
models.py
from tinymce.models import HTMLField
...
body = HTMLField()
result:
As you can see, smilies are smiling beautifully, I've got control over font family and size, it's looking really ugly, but it works and this is the price you pay for hacking stuff I suppose. But it works!
I found this list of plugins and buttons really helpful - what I wasn't getting before was that the plugins you only load into your django app, but in order to use them, you need to call their buttons. Really straightforward once you get it, but there you go.
Thanks!
I recently implemented django-summernote with my forms, which works well for text. However, I struggle to get exactly how image upload works. Does anyone have some input on how it is done?
Problem
When choosing an image from file with Summernote, the Insert Image button is deactivated (works fine for image links). I did not write a custom 'upload_to' function, but as I get it, this is already done in django-summernote.
Details
Installed django-summernote according to documentation.
Added summernote to urls and in INSTALLED_APPS
Added summernote to my form field
directions = forms.CharField(
widget=SummernoteInplaceWidget(attrs={'maxlength':'4000'}),
required=False,
)
Also added some config in SUMMERNOTE_CONFIG (settings.py)
SUMMERNOTE_CONFIG = {
'iframe': True,
'airMode': True,
'width': '100%',
'height': '300',
'toolbar': [
# ['style', ['style']],
['font', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']],
# ['fontname', ['fontname']],
['fontsize', ['fontsize']],
# ['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr']],
['view', ['fullscreen', 'codeview']],
['help', ['help']],
], }
Do I also have to write my own backend for attachments (images)? STATIC_URL and MEDIA_URL is defined in my settings.py, if that matters for this issue.
Update November 29th 2014:
When choosing an image, the following error is given in the console: "undefined is not a function", which is related to
imageInput.fileupload();
The "Insert Image" button is disabled.
As my project is in developing mode, I have DEBUG=True in my settings.
My urls look like:
urlpatterns += patterns('',
url(r'^summernote/', include('django_summernote.urls')),
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
and Media_root and Media_url are set to:
MEDIA_ROOT = path.join(path.dirname(__file__), 'media',)
MEDIA_URL = '/media/'
I use picture uploads outside django-summernote with these settings.
Feels like I am missing something, but can´t see what.
Thanks in advance.
django-summernote shipped with backend support for image uploading out of box. So you don't have to write your own backend for it. MEDIA_ROOT or MEDIA_URL settings may have wrong value for uploading - permission problem or not valid path.
Run django project with runserver and please check the browser console(inspect) and python console after trying to upload an image.
And also refer Need a minimal Django file upload example for handling files on django project.
i have install django-tinymce and set js url and js root correctly
but as a result it show only a simple text area and doesnt show toolbar and other tinymce features:
from django.db import models
from tinymce import models as tinymce_models
class MyModel(models.Model):
content= HTMLField()
i use this:
self.fields['content'].widget=TinyMCE(attrs={'cols': 80, 'rows': 30})
but this not work too! and it show only a simple text area with 80 cols and 30 rows size.
please help me! what should i do?
Make sure you have added tinymce urls to your urls.py and loaded media resources in your templates like:
<head>
...
{{ form.media }}
</head>
There is my django-tinymce config, add them to your settings.py:
TINYMCE_DEFAULT_CONFIG = {
'theme': 'advanced',
'relative_urls': False,
'plugins': 'media',
'theme_advanced_buttons1': 'bold,italic,underline,bullist,numlist,|,media,link,unlink,image',
'theme_advanced_resizing': True,
'theme_advanced_path': False,
}
You can get more details via reading the docs.
I have got django-tinymce working for the admin page. Now outside the admin page, when using a modelform I was expecting the TinyMCE editor to be loaded and shown to the user, this however didn't happen. All I see is a plain text area. But it works in admin page.
from tinymce.models import HTMLField
class Punch(models.Model):
discussion = HTMLField()
class PunchForm(forms.ModelForm):
class Meta:
model = Punch
I can see with firebug that the TinyMCE snippet is added to the HTML:
However I get an error message in the console:
ReferenceError: tinyMCE is not defined
That makes no sense, why does the admin page have no problems finding the TinyMCE?
Besides I added it even myself to the base.html:
<script type="text/javascript" src="{{ STATIC_URL }}tiny_mce/tiny_mce.js"></script>
And the server can load it too:
[21/Apr/2013 13:42:40] "GET /static/tiny_mce/tiny_mce.js HTTP/1.1" 304 0
SO what could be the problem please?
oh dear, what a silly mistake.
So I can confirm that I have to define the js in base.html as I did in my question.
<script type="text/javascript" src="{{ STATIC_URL }}tiny_mce/tiny_mce.js"></script>
However this has to be in the header and not the body. Header is initialized first and hence there won't be any longer a ReferenceError: tinyMCE is not defined
Hope it helps someone else.