¿Cómo integrar un editor de texto enriquecido personalizado en su sitio web de Django?

En este artículo, implementaremos el editor de texto tinymce en nuestra aplicación Django.

¿Qué es django-tinymce?

django-tinymce es una aplicación Django que contiene un widget para representar un campo de formulario como un editor TinyMCE.

caracteristicas :-

• Úselo como un widget de formulario o con una vista.
• Compatibilidad mejorada con los idiomas del contenido.
• Integración con el corrector ortográfico TinyMCE.
• Habilita listas de imágenes y vínculos predefinidos para los cuadros de diálogo.
• Soporte para django-archivos estáticos
• Puede comprimir el código Javascript de TinyMCE.

¿Cómo agregar Tinymce Editor en Django Project?

Paso 1: instale Django y cree un proyecto y una aplicación de Django.

Paso 2: instale django-tinymce:

pip install django-tinymce

Paso 3 – 

Agrega tinymce a INSTALLED_APPS en settings.py para tu proyecto:

INSTALLED_APPS = (
   ...
   'tinymce',
)

Paso 4 –

Agregue tinymce.urls a urls.py para su proyecto:

urlpatterns = [
   ...
   url(r'^tinymce/', include('tinymce.urls')),
]

Paso 5 –

Edite su archivo models.py en consecuencia e introduzca un HTMLField() para Rich Text Editor:]

from django.db import models
from tinymce.models import HTMLField
class MyModel(models.Model):
   ...
   content = HTMLField()

Esto integrará un editor de texto enriquecido simple en su aplicación django.

Tendrá algo como esto en el panel de administración de su base de datos: –

 Ahora nuestra tarea es personalizar este editor para que se vea bien y agregarle más funcionalidades.

Agregar más personalizaciones – 

Paso 6 –

Ahora vaya a la página de descarga de Tinymce y descargue cualquier versión adecuada para su aplicación django.

Nota : también puede usar Tinymce CDN para integrar tinymce en su aplicación django.

Paso 7 – 

Ahora copie sus archivos Tinymce descargados y péguelos en la carpeta estática de su proyecto. como estático/js/tinymce

Paso 8 –

Ahora vaya a la página de demostración de Tinymce y elija el editor de texto que prefiera. También puede elegir una versión paga, si necesita más funcionalidades. Copie el contenido del archivo JS del editor.

Paso 9 –

Cree un nuevo archivo custom.js en la carpeta static/js/tinymce y pegue el contenido copiado en él y guárdelo. Hay muchos complementos en el contenido de este archivo JS que puede agregar o eliminar según sus necesidades.

Paso 10 –

Ahora incluya los archivos tinymce.min.js y custom.js en la plantilla deseada.

<!--Tinymce Text-Editor (Must be in Head Tag) -->
 <script src="{% static 'myapp/js/tinymce/tinymce.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'myapp/js/tinymce/custom.js' %}" ></script>

Paso 11 – 

Ahora cree un formulario de acuerdo con su modelo de Django y reprodúzcalo en la plantilla deseada. Puede usar {{ form.as_p }} o {{ form.as_ul }} o {{ form.as_table }} para mostrar el nuevo editor de texto enriquecido. Si desea mostrar un texto de cuerpo predeterminado en su editor de texto y puede ver la fuente de la página de su formulario y copiarlo y editarlo según sus necesidades y eliminar la sección {{ }} y pegar ese formulario copiado y renderizarlo en su plantilla de django .