Editor TinyMCE in Django admin

 

Let stepwise

1. Make the download of TinyMCE
2. Create folder structure template
3. Configure TEMPLATE_DIRS in settings.py of your project ( example below )
4. Edit the urls.py
5. Edit admin.py
6. Create configuration file TinyMCE

 1. Download TinyMCE 

you can download tinymce from http://www.tinymce.com/download/download.php

2. Structure

The folder structure is something like:

• project
  • app
  • templates
    • css
    • js
      • tinymce

 

 Place the folder inside tinymce project> templates> js , as shown above.

3. TEMPLATE_DIRS (settings.py)

Edit the settings.py and edit / add these lines:

import  the . path
 
TEMPLATE_DIRS = ( 
    the . path . join ( the . path . dirname ( __file__ ) , 'templates' ) ,    
 )

4. Serving static files

Open the file urls.py (the project root) and add the line 3 as below:

urlpatterns = patterns ( '' ,
...
    ( r '^ js / (? <path> P. *) $' , 'django.views.static.serve' , { 'document_root' : 'templates / js' } ) ,
...
)

So when we opened http://127.0.0.1:8000/js/textareas.js, for example, the file / project / templates / js / textareas.js is required.

5. Now admin.py

If you are using the django admin, the file must exist admin.py inside the application folder. If not, take a look at the documentation on the admin .

Edit the admin.py according to your project. In my example looks like this:

from django. contrib  import admin
from weblog. blog . models  import Post
 
class PostAdmin ( admin. ModelAdmin ) :
  class Media:
  js = ( '/ js / tiny_mce / tiny_mce.js' , '/ js / textareas.js' )
 
admin. site . register ( Post PostAdmin )

6. And textareas.js

Already over, tell the engine lack of TinyMCE which the subject, size and buttons ourtextareas will have. As put in admin.py, create the file textareas.js folder templates> js .Mine is like this:

tinyMCE. init ( { 
 / / General   
 
 / / Theme   
 
 theme_advanced_toolbar_location : "top",
 theme_advanced_toolbar_align : "left",
 theme_advanced_statusbar_location : "bottom",
 theme_advanced_resizing : true,
 
 / / Example content CSS (should be your site CSS) 
 / / content_css: "/ css / style.css"
 
 template_external_list_url : "lists/template_list.js",
 external_link_list_url : "lists/link_list.js",
 external_image_list_url : "lists/image_list.js",
 media_external_list_url : "lists/media_list.js",
 
 / / Style formats 
 style_formats :  [ 
  { title :  'Bold text' , inline :  'strong' } , 
  { title :  'Red styles' } , { title : 'Table row 1' , selector : 'tr' , classes : 'TableRow' } ] ,   
        height : '400'
 width : '700' });

The downloaded file you have examples of simple and advanced theme.

More information: AddWYSIWYGEditor (on the official Django)

UPDATE: Considerations for those in Apache server into production

To follow the tutorial in Apache (with mod_python), considering that you have used your static files , make the following changes:

settings.py :

ADMIN_MEDIA_PREFIX = '/ myproject / media /'

urls.py :

(r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/your/project/folder/myproject/templates/'}),

 admin.py

from django.conf import settings
...
  js = (settings.ADMIN_MEDIA_PREFIX + 'js/tiny_mce/tiny_mce.js', settings.ADMIN_MEDIA_PREFIX + 'js/textareas.js')
...

Thus the request to /media/js/scripts.js will deliver the file /your/project/folder/myproject/templates/js/scripts.js, similarly to /media/css,/media/img, etc..