WYSIWYG Editor(Editor HTML) no admin Django

Postado por Ricardo Perez em 3/09/2007

Olá pessoal, Olha eu aqui denovo depois de muito tempo!!! Hoje eu vou falar de uma integração muito interessante para o admin do Django, é o uso do WYSIWYG(What you see is what you get) Editor chamado tinyMCE, que nada mais é um editor rich text, esta dica é muito interessante caso você queira fazer algum um tipo de CMS só usando o admin do django.

Segue os passos:

  • Primeiro baixe a última versão do tinyMCE em http://tinymce.moxiecode.com/download.php
  • Descompacte o arquivo
  • Agora copie a pasta tiny_mce dentro de ../tinymce/jscripts/ para seu diretório de media do seu projeto (pode ser também o diretório de scripts)
  • Crie um arquivo chamado textareas.js dentro do seu diretório de scripts, este arquivo será responsável pela configurção de seu editor, ver mais em http://wiki.moxiecode.com/index.php/TinyMCE:Index, e coloque o seguinte código abaixo
  • [js]
    tinyMCE.init({
    lang:'pt-br', //Para que funcione a tradução do tinyMCE você deve baixar o pacote em http://tinymce.moxiecode.com/language.php e descompactar os arquivos dentro da pasta ../tinyMCE
    mode : "textareas",
    theme : "advanced",
    height : "400",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_buttons1 : "fullscreen,separator,preview
    ,separator,bold,italic,underline,strikethrough,separator,bullist,numlist,outdent,indent,separator,undo,redo,separator,link,unlink,anchor,separator,image,cleanup,help,separator,code",
    theme_advanced_buttons2 : "removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor",
    theme_advanced_buttons3 : "sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print",
    //theme_advanced_buttons2 : "",
    //theme_advanced_buttons3 : "",
    auto_cleanup_word : true,
    plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,fullscreen",
    plugin_insertdate_dateFormat : "%d/%m/%Y",
    plugin_insertdate_timeFormat : "%H:%M:%S",
    extended_valid_elements : "a[name|href|target=_blank|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
    fullscreen_settings : {
    theme_advanced_path_location : "top",
    theme_advanced_buttons1 : "fullscreen,separator,preview,separator,cut,copy,paste,separator,undo,redo,separator,search,replace,separator,code,separator,cleanup,separator,bold,italic,underline,strikethrough,separator,forecolor,backcolor,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,help",
    theme_advanced_buttons2 : "removeformat,styleselect,formatselect,fontselect,fontsizeselect,separator,bullist,numlist,outdent,indent,separator,link,unlink,anchor",
    theme_advanced_buttons3 : "sub,sup,separator,image,insertdate,inserttime,separator,tablecontrols,separator,hr,advhr,visualaid,separator,charmap,emotions,iespell,flash,separator,print"
    }
    });
    [/js]

  • Configure seu model
  • [python]
    class Content(models.Model):
    content = models.TextField(blank=True)
    creator = models.ForeignKey(User)
    date_creation = models.DateTimeField(auto_now_add=True)
    session = models.OneToOneField(Session)

    def __str__(self):
    return self.content[0:30]

    class Admin:
    pass
    # Esta trecho será responsável pela integração do admin com tinyMCE
    js = (
    '/media/tiny_mce/tiny_mce.js', #Eu joguei a pasta tiny_mce para a pasta media() do meu projeto eu poderia ter jogado pra "media/js"
    '/media/js/textarea.js', #Arquivo que formata o editor
    )
    [/python]

    Pronto pessoal seu admin ja está hábil para a inserção de conteúdo rich-text, essa integração do tinyMCE é muito proveitosa mesmo. Pessoal por hoje é só isso mesmo, até o próximo post.

    3 Comentário para “WYSIWYG Editor(Editor HTML) no admin Django”

    1. Rafael Camillis disse em 3/09/2007 as 09:17

      Caramba legal dá até pra montar um bloco de notas online com o django utilizando essa tua dica Ricardo. =) Flw, muito bom o post!

    2. Érico disse em 3/09/2007 as 16:35

      Rs, acho muito bacana ter um rich-text no admin.
      Já havia tentado através de um outro “tuto” sou noob em django, comecei a usa-lo a pouco.

      Fiz tudo certinho, no fonte do admin aparecem os js, mas nada em meus textareas, alguma dica?

      Abraços
      Érico

    3. Érico disse em 3/09/2007 as 16:37

      Faça parte da campanha: ajude um noob rs

    Trackback URI | RSS dos comentários

    Deixe um comentário

    Av. Conselheiro Nébias, 368A, Cj. 413
    Vila Mathias - Santos - SP
    Telefone: (13) 3345-4580

    © 2008 - 2009 Stiod. Todos os direitos reservados.