ModelForm doesn't render TinyMCE (ReferenceError: tinyMCE is not defined) - django

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.

Related

Importing CSS files with Flask Mail and SendGrid Does Not Work

I am using Flask and SendGrid to send emails and I can send emails with HTML but no CSS.
Here is my code for sending emails:
from app import mail
from flask import render_template, url_for
from flask_mail import Message
def send_email(to, subject, body):
msg = Message(subject=subject, recipients=[to])
msg.body = body
msg.html = render_template('mail/email.html', body=body)
mail.send(msg)
And here is how I am importing my CSS file (this works in every other file):
<link type="text/css" href="{{ url_for('static', filename='assets/css/pixel.min.css') }}" rel="stylesheet">
If there is a problem with the above code that would cause this to happen please let me know.
As I said earlier, my problem is that CSS files that I am importing into email.html are not styling the email. So is there any way to fix this, or will I have to use SendGrid email templates?
The <link> element doesn't have good cross-email support. https://www.caniemail.com/features/html-link/
You should first inline the CSS within each element. There are services online that auto inline CSS for you.
Second, embed the CSS that can't be inlined (typically only media queries and hacks) within the HTML document, i.e. use <style>...</style> within the <head>.
The reason you can't just embed the CSS and forget about inlining is because, you guessed it, <style> isn't supported on everything! https://www.caniemail.com/features/html-style/

django-ckeditor image upload giving wrong url of the image

When I try text editing and other text related stuffs and save it, the editor does its job nicely. But when I try to upload an image it just take a different url. I am on windows. Is it because of this, cause I saw a post on this post, but it didn't helped me either. It does get saved and they each have their own thumbnails too. But its just that the wrong urls.
I checked the src of the image, and it was like this,
<img alt="" src="/media/3/10/17Hydrangeas.jpg" />
But it should have been like this,
<img alt="" src="/media/2013/10/17/Hydrangeas.jpg" />
And sometimes the src of the image is just like this,
<img alt="" src="/media/3/10/17" />
This is the snippet of my settings.py:
CKEDITOR_UPLOAD_PATH = 'C:/Users/Nanyoo/web/demo/media'
MEDIA_ROOT = 'C:/Users/Nanyoo/web/demo/media'
I've included its url in my urls.py:
(r'^ckeditor/', include('ckeditor.urls')),
models.py:
from django.db import models
from datetime import datetime
from django.contrib.auth.models import User
from time import time
def get_upload_file_name(instance, filename):
return "uploaded_files/%s_%s" %(str(time()).replace('.','_'), filename)
class Blog(models.Model):
title = models.CharField(max_length=200)
image = models.ImageField(upload_to=get_upload_file_name, blank=True)
pub_date = models.DateTimeField(default=datetime.now)
creator = models.ForeignKey(User, related_name="creator_set")
body = models.TextField()
In the forms.py:
from django import forms
from django_summernote.widgets import SummernoteWidget
from ckeditor.widgets import CKEditorWidget
class BlogForm(forms.Form):
title = forms.CharField(max_length=200,widget=SummernoteWidget())
body = forms.CharField(widget=CKEditorWidget())
In the index.html:
{% for blog in blogs %}
<div id="page">
<h1>{{ blog.title | safe}}</h1>
<p>{{ blog.body | safe}}</p>
</div>
{% endfor %}
my form in the html:
{% block content %}
<form method="post" action=".">
{% csrf_token %}
<fieldset id="create_blog">
{{form.media}}
{{ form.as_p}}
<input type="submit" value="Post Blog" />
</fieldset>
</form>
{% endblock %}
I had a bit of a time getting django-ckeditor up and running with my Django app, but eventually hacked my way through to being able to serve uploaded files on the local machine (during development/testing).
First thing I suggest doing - if you haven't done so already - is read Django's documentation regarding static files. It may help in getting a better idea as to how things are configured and why.
From the django-ckeditor installation documentation, step 4 outlines the purpose of CKEDITOR_UPLOAD_PATH This works similarly to Django's built-in MEDIA_ROOT and STATIC_ROOT, where the path provided isn't necessarily the path in which the file is stored. You must specify a path to store the file upon upload. This may be done by making sure you have a MEDIA_URL global variable declared within your projects settings file.
Once you have the initial setup complete, the final step is to enable Django to serve the files you're working with locally. Please note: This method is to be used for development and debugging purposes only. Do not deploy your code with the following snippet included.
You may read more on this method via Django's static file how-to, within the "Serving static files during development" section.
In your project's urls.py file, add the following bit of code, enabling Django to serve your local data.
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = patterns(
'',
# existing url patterns,
# ...,
) + static(settings.MEDIA_URL, document_root=settings.STATIC_ROOT)
From there, you should be all set.
Just as a quick disclaimer: I am by far a seasoned professional. This method is what has worked for me, given my specific setup and environment. Results may vary.
Hope this helps to get you headed in the right direction. Best of luck!
CKEDITOR_UPLOAD_PATH is relative to MEDIA_ROOT.
https://github.com/django-ckeditor/django-ckeditor#id2
In your case it should be
CKEDITOR_UPLOAD_PATH = ''
This worked for me. To be honest, all these *_PATH issues were probably the hardest parts of Django for me.
UPD: I see that probably your issue was of some other sort. However I noticed the error in your configuration, that's why I wanted to fix that, since I had troubles with that and other people may find this issue and my answer too. Maybe your configuration was even right, if they've changed the defaults since the time of your post.
I made it !!!
Problem solved !!!!!!
I have the same problem just as you.
Did you solve that?
Did you change
CKEDITOR_UPLOAD_PATH = 'uploads/'
to something else?? Don't change if wrong.
Every time after I successfully upload the picture to the server using django-ckeditor, the django-ckeditor would request a URL which looks like this
uploads/2015/06/11/app_software_360.jpg
And that indicates the browser is requesting to
localhost:8000/somewhere/someplace/uploads/2015/06/11/app_software_360.jpg
but not localhost:8000/media/uploads/2015/06/11/app_software_360.jpg This is the actually right URL location, but django-ckeditor just can not find it out. I guess this has something to do with the settings.py
You can check out this page github issue
By adding these to settings.py
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
MEDIA_URL = '/media/'
It works!
Thumb up if you think this is helpful. :)

django tinymce does not show toolbar

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.

django PIL image upload / display problems

I am trying to get django to show pictures. Ive installed PIL and it seams to work.
i am running py 2.7, win 7, the developement server and sqlite3
my static root:
STATIC_ROOT = r'H:/netz2/skateproject/static/'
ive got a background picture in this folder and can acces it via
http://127.0.0.1:8000/static/images/lomax.jpg
now im trying to upload a pic via an image field & the admin. it works fine, the picture lands in the right folder (ive changed the folders a million times by now to see if that could be the problem) but the picture can not be displayed.
part of my model:
class Sk8(models.Model):
name = models.CharField(max_length=50, default='name of the model')
bild1 = models.ImageField(upload_to="uploads/")
my media root:
MEDIA_ROOT = r'H:/netz2/skateproject/media/'
the picture lands in the right folder. netz/skateproject/media/pic.jpg
but it seams like localhost can not acces this folder. when i try - i get an 404 and django tells me that the url does not match anything i defined in my urls.
which is true - but neither did I define a url for the background image in the static folder - and i can access this one just fine.
ive also tried to acces the file from my html template, like this:
{% extends "grundgerüst.html" %}
{% block inhalt %}
<div id='skatelist'>
{% for sk8 in skates %}
<p>{{sk8}}</p>
<p><img src="{{sk8.bild.url}}"/></p>
{% endfor %}
</div>
{% endblock %}
obviously the picture does not show up.
I dont know what is wrong here. i guess i shoudl be able to see the pic on localhost?
heres a pic of the error chrome gives me
if i.e. in the picture the folders are different than the ones in the code example its because i changed them testing different settings.
I really hope somebody can help me to figure out image_field, cause uploading pictures if i cant display them does not make much sense :)
thanks in advance!!!
danielll
ouh and - i already tried google and django reference etc. i honestly could not figure it out that way. every help appreciated!
Django's contrib.staticfiles app will monkeypatch your urls to serve static files when in DEBUG mode [ref]. Unfortunately the same cannot be said of media files.
Add the following snippet to your project urls.py to display media
django.conf import settings
if settings.DEBUG:
urlpatterns += patterns('',
url(r'^media/(?P<path>.*)$', 'django.views.static.serve', {
'document_root': settings.MEDIA_ROOT,
}),
)
Docs reference

django-photologue constructs the wrong URLs for photos

I've installed django-photologue and added a handful of photos to the database. The basic site mechanics seem to be working fine, except no photos or thumbnails are displayed. The images and thumbnails are in ..\django\media\photologue\photos.
For a photo_detail page, the resulting HTML source looks like this:
<title>Greece 3</title>
<h1>Greece 3</h1>
<div class="gallery-photo">
<img src="photologue/photos/cache/greece003_display.jpg" alt="Greece 3"/>
<p>no caption yet</p>
</div>
<h2>This photo is found in the following galleries:</h2>
<ol>
<li>
<a title="Greece 2" href="/photologue/photo/greece-2/"><img src="photologue/photos/cache/greece002_thumbnail.jpg"/></a>
LSB Photos - Greece
<a title="Greece 4" href="/photologue/photo/greece-4/"><img src="photologue/photos/cache/greece004_thumbnail.jpg"/></a>
</li>
</ol>
Looks to me like the img src files don't resolve to the right location and therefore don't display. I think MEDIA_ROOT and MEDIA_SITE are correct, and media for other apps work like i expect.
>>> import settings
>>> settings.MEDIA_ROOT
'c:/design.ed/django/media/'
>>> settings.MEDIA_URL
''
And here's what the photologue module itself gives me.
>>> from photologue import models as phl
>>> phl.PHOTOLOGUE_DIR
'photologue'
>>> phl.PHOTOLOGUE_PATH
>>> phl.get_storage_path(None, 'foo.jpg')
'photologue\\photos\\foo.jpg'
What am i missing here?
I think i've answered my own question. The problem had nothing whatsoever to do with photologue: rather, settings.MEDIA_URL wasn't set correctly (because i'd never actually served any media through Django before).
In my case, i was running locally using the default Django server (which i know you're not supposed to do for production). So i had this in my urls.py:
(r'^site_media/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': MEDIA_ROOT, 'show_indexes': True}),
but MEDIA_URL was the default empty string. Instead i changed it to
MEDIA_URL = '/site_media/'
which is where it's supposed to be (both the leading and trailing slashes are required in this case), and all the magic worked. Apologies for clouding the issue with photologue details.