Luís Henrique : Editor TinyMCE no Django admin

Primeiramente, TinyMCE é um editor WYSIWYG (“O que você vê é o que você obtem”) mais popular em todo o mundo. É usado em grandes CMS como Wordpress e Joomla. Aqui vamos implementar o TinyMCE no painel de administração do Django.

Preview

TinyMCE no Django admin

Vamos por etapas

Fazer o download do TinyMCE
Criar estrutura de pastas do template
Configurar o TEMPLATE_DIRS no settings.py do seu projeto (exemplo abaixo)
Editar o admin.py
Criar arquivo de configuração do TinyMCE

2. Estrutura

A estrutura de pastas é algo como:

projeto
- app
- templates
  - css
  - js
    - tinymce

templates dir

Coloque a pasta do tinymce dentro de projeto > templates > js, como na figura acima.

3. TEMPLATE_DIRS (settings.py)

Edite o settings.py e edite/inclua essas linhas:

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

4. Agora o admin.py

Se você está usando o admin do django, deve existir o arquivo admin.py dentro da pasta da aplicação. Se não existir, dê uma olhada na documentação sobre o admin.

Edite o admin.py de acordo com o seu projeto. No meu exemplo está assim:

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)

5. E o textareas.js

Já está acabando, falta dizer à engine do TinyMCE qual o tema, tamanho e botões nossas textareas vão ter. Conforme colocamos no admin.py, crie o arquivo textareas.js na pasta templates > js. O meu está assim:

tinyMCE.init({
	// General options
	mode : "textareas",
	theme : "advanced",
	plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",
 
	// Theme options
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,fullscreen,code",
	theme_advanced_buttons2 : "cut,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,|,insertdate,inserttime,preview,|,forecolor,backcolor",
	theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl",
 
	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 text', inline : 'span', styles : {color : '#ff0000'}},
		{title : 'Help', inline : 'strong', classes : 'help'},
		{title : 'Table styles'},
		{title : 'Table row 1', selector : 'tr', classes : 'tablerow'}
	],
 
	width: '700',
	height: '400'
 
});