Hoy os voy a hablar sobre Summernote , un editor WYSIWYG que me ha ahorrado varios dolores de cabeza en mis proyectos Django . Ya os hable hace tiempo sobre el editor Wysihtml5 que también es uno de mis favoritos.

Si entras a su web oficial se definen como: " Super Simple WYSIWYG Editor on Bootstrap" , y sus según mi opinión cumplen con su palabra.


¿Por qué me gusta el editor Summernote ?

A continuación te dejo un listado con las características que mas me gustan sobre Summernote .

  • Se basa en HTML5.
  • Air-mode: Permite editar en contenido inline mediante una barra flotante.
  • Api y Callbacks.
  • Multiples temas y estilos.
  • Soporte de estilos de CodeMirror.
  • Embebido de imágenes mediante Drag and Drop.
  • Multilenguaje.
  • Integración con el backend de forma sencilla.

En la siguiente sección de este artículo te explicaré como integrar este editor WysiWyg con un proyecto Django.

Summernote WysiWyg con Django


  1. Para integrar este editor WysiWyg con modelos o campos de nuestros formularios Django debemos instalar la aplicación django-summernote en nuestro entorno virtual ( virtualevn ):
    pip install django-summernote
  2. Añadimos la aplicación django_summernote a INSTALLED_APPS en el archivo settings.py:
    INSTALLED_APPS += ('django_summernote', )
    
  3. Añadimos las urls django_summernote.urls al archivo urls.py:
    urlpatterns = patterns('',
        ...
        (r'^summernote/', include('django_summernote.urls')),
        ...
    )
    
  4. Ejecutamos syncdb o migrate ( dependiendo de nuestra versión de Django ) para preparar los modelos:
    python manage.py syncdb
    python manage.py migrate
    

Uso

  • En el administrador de Django admin.py :
    	from django_summernote.admin import SummernoteModelAdmin
    	# Activamos el editor Summernote en todos los TextField del modelo.
    	class ArticuloAdmin(SummernoteModelAdmin):  # en lugar de ModelAdmin
    	    ...
    
  • En los formularios forms.py :
    from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget
    
    # Activamos el editor Summernote en campos especificos.
    class ContactoForm(forms.Form):
    	mensaje = forms.CharField(widget=SummernoteWidget())  # en lugar de forms.Textarea
    
    # Si no quieres usar un <iframe>, en tonces debes usar el widget inplace.
    # o si estás usando django-crispy-forms, debes usar:
    class ContactoForm(forms.Form):
    	mensaje = forms.CharField(widget=SummernoteInplaceWidget())
    
  • Por ultimo para los formularios de un modelo ModelForm :
    	class ArticuloForm(forms.ModelForm):
    	    class Meta:
    	        model = Articulo
    	        widgets = {
    	            'foo': SummernoteWidget(),
    	            'bar': SummernoteInplaceWidget(),
    	        }
    
Recuerda que debes usar el templatetag safe para mostrar el contenido que ha sido generado con el editor:
{{ contenido|safe }}

Si quieres personalizar las opciones del editor, el menú, el tema y otras opciones deberás realizarlo en el settings.py , puedes ver las opciones de configuración la página de django-summernote en Github.

Con esto tendremos configurado y activo el editor Summernote en nuestros templates y en el administrador de Django, soportando la subida de imágenes a la carpeta MEDIA del fichero settings.py

¿ Conoces algún otro editor WysiWyg de fácil integración con Django? Cuéntanos tu experiencia en los comentarios o anímate a escribir tu propio artículo en la opción "PUBLICAR ARTÍCULO" del menú superior.

Si te ha gustado este artículo debes compartirlo en las redes sociales :)