Django + tiny_mce

56 views
Skip to first unread message

ll...@paisite.com

unread,
Jul 6, 2008, 11:56:39 AM7/6/08
to django...@googlegroups.com
Hello,

I'm working through James Bennett's Practical Django Projects. Have brought up the cms; would like to add Rich Text Editing, but the instructions in Bennet's book don't seem to work for me.

Googling around, I find a number of recipes for adding RTE. Thought I try the approach suggested by the Django project: http://code.djangoproject.com/wiki/AddWYSIWYGEditor.

But this doesn't work for me either.

Here's my config:

1) tiny_mce.js is in: /usr/share/tinymce/www
2) TEMPLATE_DIRS in settings.py is set to:

TEMPLATE_DIRS = (
    '/home/lloyd/django/templates/cms/',
 )

3) my template is in: ~/django/templates/cms/flatpages
4) I've copied change_form.html, the admin template, into: ~/django/templates/admin_copies

5) the admin template extension, change_forms.html, is in: ~/django/templates/admin/flatpages/flatpage

...and reads:

{% extends "admin_copies/change_form.html" %}
{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="/usr/share/tinymce/www/tiny_mce.js"></script>
<script type="text/javascript" src="/usr/share/tinymce/www/textareas.js"</script>
{% endblock %}

With this configuration, everything works fine, except the tiny_mce editor fails to show on the admin page.

Questions:

1) Am I missing or misunderstanding  a step?
2) Is there an effective debugging method that I can use in a case like this?

Many thanks,

Lloyd R. Prentice




Chatchai Neanudorn

unread,
Jul 6, 2008, 12:26:30 PM7/6/08
to django...@googlegroups.com
First thing when you work with Java script is, make sure it is available. In this case, where is your urls config.

From these,


<script type="text/javascript" src="/usr/share/tinymce/www/tiny_mce.js"></script>
<script type="text/javascript" src="/usr/share/tinymce/www/textareas.js"</script>


Can you start web server and type http://localhost/usr/share/tinymce/www/tiny_mce.js and see if it return something rather than 400.

For me, I usually do things like this

Let say I have static folder under project path name "static", under static I have css, js image.

In settings,
DIR = os.path.dirname(__file__)
MEDIA_ROOT = os.path.join(DIR, 'static')
 
In urls

urlpatterns += patterns('',
    (r'^static/(?P<path>.*)$','django.views.static.serve',{'document_root':settings.MEDIA_ROOT, 'show_indexes': True}),
)

I enable show_indexs just in case I want make sure I can see all file via browser.

After you have it work, you can even grab java script from outside website or on your media site to improve performance. For example,

<script type="text/javascript" src="http://mymedia.com/js/tinymce/www/tiny_mce.js"></script>
<script type="text/javascript" src="
http://mymedia.com/js/tinymce/www/textareas.js"</script>

This can apply to css as well.

Hope this help,

Chatchai

2008/7/6 <ll...@paisite.com>:

LRP

unread,
Jul 6, 2008, 11:04:39 PM7/6/08
to Django users
Many thanks for the help, Chatchai.

> Can you start web server and typehttp://localhost/usr/share/tinymce/www/tiny_mce.js
> and see if it return something rather than 400.

I get 404.

Here's url config:

urlpatterns = patterns('',
# Example:
# (r'^cms/', include('cms.foo.urls')),

# Uncomment this for admin:
(r'^admin/', include('django.contrib.admin.urls')),
(r'', include('django.contrib.flatpages.urls')),
)

In addition to Bennett and djangoprogject docs, the approach you
suggest is yet a third solution to the problem of applying tiny_mce to
django admin... I'll give it a try tomorrow when my mind is a more
rested.

But meanwhile, I'm curious...

I've followed the instructions in both Bennett' and the djangoproject
docs scrupulously; double-checking my work in both cases. And in both
cases I've failed. It's likely, I'm sure, that my failure is due to a
misreading, misunderstanding, or mistyping on my part. I'm wondering,
however, has anyone else achieved success based on either Bennett's or
djangoproject doc's instructions?

If so, then I'll have to carefully review what I've done.

If not, then there's a chance that either or both of the sources are
either wrong, or are missing something, and should be corrected.

I do recall that I got it working quite easily once in Karrigell.

Thanks again,

Lloyd



Chatchai Neanudorn

unread,
Jul 6, 2008, 11:36:20 PM7/6/08
to django...@googlegroups.com
Oh, Fixed me, 404 (File not found!)

I was in situation like you, before. Some instruction or recipe assume you have basic understanding of django.

There are a lot of django recipe assume that you put js or css under the same place of admin media.
In this case, you don't need to configure media url by your self. But for running dev server only.

For example, put js under /django/contrib/admin/media/js/some.js. Then /media/js/some.js will availale for you.

For now, I'm working with java script and first thing I have to do is making it available first and do things I want.

Anyway, when you run your web using apache, you will need to use alias to provide admin media.

For my solution, I use something like this,

ADMIN_MEDIA_PREFIX = 'http://eestud.kku.ac.th/~u4316562/media/openfrog/media/'

For this setting, I don't need to setup my admin media and save bandwidth for my share host account.

For another media, I use,

DIR = os.path.dirname(__file__)

MEDIA_ROOT = os.path.join(DIR, 'static')
MEDIA_URL = 'http://feedfrog.net/static/'

httpd.conf

Alias /static /home/meledictas/webapps/django/meledictas/static


I use this for all of my django site.

Have a nice day.

Chatchai.

2008/7/7 LRP <ll...@paisite.com>:

LRP

unread,
Jul 8, 2008, 4:27:40 PM7/8/08
to Django users
Thanks Chatchai.

Unfortunately, integration of tiny_mce still eludes me. It seems that
django is not looking in the proper directory for tiny_mce.js. But I
can't see why, despite generous off-list help from kind-soul Peter.

1) I've reviewed and documented my configuration below and would be
truly grateful if someone could point out the error or my way.

2) Also, at one point I though the problem might be due to improper
file permissions. So I've opened tiny_mce.js and change_form.html wide
open. Didn't help, but I suspect it may have created a security
problem. Can anyone tell me how to set the permissions correctly?

Lloyd

Review of tiny_mce configuration:

1) Bennett:p23

"In urls.py, add a new line..."

**** my urls.py *****

from django.conf.urls.defaults import *

urlpatterns = patterns('',
# Example:
# (r'^cms/', include('cms.foo.urls')),

# Uncomment this for admin:
(r'^admin/', include('django.contrib.admin.urls')),
(r'^tiny_mce/(?P<path>.*)$','django.views.static.serve',
{ 'document_root': '/home/lloyd/
django/media/jscripts/tiny_mce' }),
(r'', include('django.contrib.flatpages.urls')),
)

**********************

2) Bennett:p24

"Replace the /path-to-tiny_mce/..."

See above.

2a) Confirm path to tiny_mce

Entered in browser: http://192.168.1.4:8000/tiny_mce/tiny_mce.js

Browser returned: var tinymce={majorVersion:'3',minorVersion:'0.8',...

3) Bennett:p25

"So inside your templates directory, create an admin directory. Then
create a flatpages directory inside of admin and a flatpage
subdirectory inside of flatpages. Finally copy the change_form
template..."

lloyd@Discovery:~/django/templates/admin/flatpages/flatpage$ ls -l
total 4
-rwxrwxrwx 1 lloyd lloyd 3493 2008-07-08 02:16 change_form.html

4) Bennett:p25

"Now you can open up the change_form.html template in your template
directory and edit it..."

{% extends "admin/base_site.html" %}
{% load i18n admin_modify adminmedia %}
{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="../../../jsi18n/"></script>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>

5) Test

Enter in browser: 192.168.1.4:8000/admin/ and advance to change form.

Output of runserver:

[08/Jul/2008 15:37:57] "GET /admin/ HTTP/1.1" 200 4851
[08/Jul/2008 15:38:00] "GET /admin/flatpages/flatpage/ HTTP/1.1" 200
2817
[08/Jul/2008 15:38:06] "GET /admin/flatpages/flatpage/2/ HTTP/1.1" 200
5186
[08/Jul/2008 15:38:07] "GET /admin/jsi18n/ HTTP/1.1" 200 803
[08/Jul/2008 15:38:07] "GET /admin/flatpages/flatpage/2/tiny_mce/
tiny_mce.js HTTP/1.1" 404 1780

Clearly django is looking for tiny_mce.js in wrong place.

6) Confirm location of tiny_mce:

lloyd@Discovery:~/django/media/jscripts/tiny_mce$ ls -l
total 424
-rw-r--r-- 1 lloyd lloyd 453 2008-07-07 16:12 example.html
-rw-r--r-- 1 lloyd lloyd 1617 2008-07-07 16:12 textareas.js
-rwxrwxrwx 1 lloyd lloyd 153025 2008-07-07 16:12 tiny_mce.js
-rw-r--r-- 1 lloyd lloyd 7145 2008-07-07 16:12 tiny_mce_popup.js
-rw-r--r-- 1 lloyd lloyd 251714 2008-07-07 16:12 tiny_mce_src.js

7) Let's look at settings.py:

TEMPLATE_DIRS = (
# Put strings here, like "/home/html/django_templates" or "C:/www/
django/templates".
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
'/home/lloyd/django/templates',

8) QUESTION?????

Why is django looking for tiny_mce in .../admin/flatpages/flatpage ?





Matthias Kestenholz

unread,
Jul 8, 2008, 4:34:52 PM7/8/08
to django...@googlegroups.com
2008/7/8 LRP <ll...@paisite.com>:

>
> <script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
>

Add a slash here:
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>

Mario

unread,
Jul 8, 2008, 7:23:00 PM7/8/08
to Django users
Easy fix. Open your models.py and in the Class Admin section of the
model insert js = ['tiny_mce/tiny_mce.js', 'js/textareas.js'].

For example:

class Admin:
list_display = ('headline', 'author', 'pub_date', 'publish')
list_filter = ['pub_date']
save_as = True
js = ['tiny_mce/tiny_mce.js', 'js/textareas.js']

Save the model.
Stop and restart you apache server.
Login the Admin and verify the changes.

-Mario

LRP

unread,
Jul 8, 2008, 8:01:50 PM7/8/08
to Django users
Hi,

Thanks to all for responses, but puzzle persists...

Mathias, I added the slash. Still can't see the tiny_mce edit bar.
But it does provide a clue: Output of runserver now looks like:

[08/Jul/2008 19:37:17] "GET /admin/ HTTP/1.1" 200 4851
[08/Jul/2008 19:37:20] "GET /admin/flatpages/flatpage/ HTTP/1.1" 200
2817
[08/Jul/2008 19:37:23] "GET /admin/flatpages/flatpage/2/ HTTP/1.1" 200
5187
[08/Jul/2008 19:37:23] "GET /admin/jsi18n/ HTTP/1.1" 200 803
[08/Jul/2008 19:37:23] "GET /tiny_mce/langs/en.js HTTP/1.1" 404 1771
[08/Jul/2008 19:37:24] "GET /tiny_mce/themes/simple/editor_template.js
HTTP/1.1" 404 1834

If I enter http://192.168.1.4:8000/tiny_mce/tiny_mce.js, I still see:
var tinymce={majorVersion:'3',minorVersion:'0.8'...

Mario,

I'm serving through the development server , runserver, not Apache.
Also, the model is buried in django.contrib.flatpages somewhere. I
would think that James Bennett would have mentioned something about
adding to the model if it were required. I'll keep you idea in mind,
however.

Thanks again to all,

Lloyd


Chatchai Neanudorn

unread,
Jul 8, 2008, 8:35:49 PM7/8/08
to django...@googlegroups.com
http://192.168.1.4:8000/tiny_mce/tiny_mce.js vs [08/Jul/2008 19:37:23] "GET /tiny_mce/langs/en.js HTTP/1.1" 404 1771

What is "lang" at the right side?

Chatchai

2008/7/9 LRP <ll...@paisite.com>:

Chatchai Neanudorn

unread,
Jul 8, 2008, 8:47:56 PM7/8/08
to django...@googlegroups.com
Ok, Got you. Where is retrun code for /tiny_mce/tiny_mce.js itself, Did you mean all js under /tiny_mce cannot be loadded by django? What is environment you are working on?

2008/7/9 Chatchai Neanudorn <meled...@gmail.com>:

Mario

unread,
Jul 8, 2008, 9:18:12 PM7/8/08
to Django users
Lloyd,

There's more than one way to skin a cat. It does not matter if you are
using development server or apache. I have been using Tiny MCE for
about a year now and I am happy with the setup.

For flatpages, if you have admin rights to the server, you need to
edit your flatpages model located in the /usr/lib/python2.5/site-
packages/django/contrib/flatpages directory. Make sure make a copy of
the model prior to making any changes.

Check out Bill DeOra write about Tiny_MCE. It was written in 2006. The
URL is http://dehora.net/journal/2006/05/

Gracias,

-Mario

On Jul 8, 8:01 pm, LRP <ll...@paisite.com> wrote:
> Hi,
>
> Thanks to all for responses, but puzzle persists...
>
> Mathias, I added the slash. Still can't see the tiny_mce edit bar.
> But it does provide a clue: Output of runserver now looks like:
>
> [08/Jul/2008 19:37:17] "GET /admin/ HTTP/1.1" 200 4851
> [08/Jul/2008 19:37:20] "GET /admin/flatpages/flatpage/ HTTP/1.1" 200
> 2817
> [08/Jul/2008 19:37:23] "GET /admin/flatpages/flatpage/2/ HTTP/1.1" 200
> 5187
> [08/Jul/2008 19:37:23] "GET /admin/jsi18n/ HTTP/1.1" 200 803
> [08/Jul/2008 19:37:23] "GET /tiny_mce/langs/en.js HTTP/1.1" 404 1771
> [08/Jul/2008 19:37:24] "GET /tiny_mce/themes/simple/editor_template.js
> HTTP/1.1" 404 1834
>
> If I enterhttp://192.168.1.4:8000/tiny_mce/tiny_mce.js, I still see:

Chatchai Neanudorn

unread,
Jul 8, 2008, 9:23:59 PM7/8/08
to django...@googlegroups.com
Work fine for me. Check attachment.

Login using admin/welcome or delete tiny.db and run syncdb again.

Hope this help.

Chatchai

2008/7/9 Mario <goobe...@gmail.com>:
tiny.zip

LRP

unread,
Jul 9, 2008, 2:43:54 PM7/9/08
to Django users
Many many thanks to all who helped.

Problem solved.

There seem to have been two issues:

1) Mathias pointed out missing slash.

2) I'd copied only the top tiny_mce directory into my .../media/
jscripts/tiny_mce directory.

Mario, I'll definitely look at your note again when I try out django
under Apache. But, for now, I'm still struggling with the
fundamentals.

I apologize to all for all the hassle stirred up by my clumsiness.
This is a great list.

Best wishes,

Lloyd


ColdSun

unread,
Jul 12, 2008, 12:29:35 AM7/12/08
to Django users
Try changing your change_form.html to reflect the nested directories
(by including "../" for each level of directory its in... or, as a
simplier fix:


Change:
<script type="text/javascript" src="/tiny_mce/tiny_mce.js"></script>

to

<script type="text/javascript" src="http://127.0.0.1:8000/tiny_mce/
tiny_mce.js"></script>

theTrystero

unread,
Jul 18, 2008, 8:34:52 PM7/18/08
to Django users
I ran into problems with tinyMCE integration too... I ended up adding
the new line to urls.py in the wrong order. D'oh.

Complete file looked like this:
from django.conf.urls.defaults import *

urlpatterns = patterns('',
# Example:
# (r'^cms/', include('cms.foo.urls')),

# Uncomment this for admin:
(r'^admin/', include('django.contrib.admin.urls')),
(r'', include('django.contrib.flatpages.urls')),
(r'^tiny_mce/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': '/Users/userName/Development/django/sites/addin/
tinymce/jscripts'}),


)

Instead of this:
from django.conf.urls.defaults import *

urlpatterns = patterns('',
# Example:
# (r'^cms/', include('cms.foo.urls')),

# Uncomment this for admin:
(r'^admin/', include('django.contrib.admin.urls')),
(r'^tiny_mce/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': '/Users/userName/Development/django/sites/addin/
tinymce/jscripts'}),
(r'', include('django.contrib.flatpages.urls')),

)

I initially thought the code in the book was a bit odd considering
that it's presented like this:
from django.conf.urls.defaults import *

urlpatterns = patterns('',
# Example:
# (r'^cms/', include('cms.foo.urls')),

# Uncomment this for admin:
(r'^admin/', include('django.contrib.admin.urls')),
(r'^tiny_mce/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': '/Users/userName/Development/django/sites/addin/
tinymce/jscripts'},
)

The tuple seems to be missing the closing parens, and the tuple list
isn't closed in the code. Hope this helps someone sort things out :)

Homebone

unread,
Aug 1, 2008, 8:16:16 PM8/1/08
to Django users
In the change_form.html change src="tiny_mce/tiny_mce.js" to src="/
tiny_mce/tiny_mce.js"
Reply all
Reply to author
Forward
0 new messages