En este tutorial de Python Django, entenderemos cómo integrar un editor de texto enriquecido en nuestro proyecto Django. Y en este tutorial, explicaremos cómo usar el CKEditor en Django.

Además, también veremos los pasos para integrar CKEditor en Django Admin y Django Forms usando ejemplos.

Primero, comprendamos qué es un editor de texto enriquecido.

Introducción al editor de texto enriquecido

A editor de texto enriquecido es una herramienta que permite a los usuarios crear y editar documentos formateados. Por lo general, un editor de texto enriquecido incluye varias herramientas para diseñar texto, como atrevidocursiva y subrayado, así como para crear listas, tablas y enlaces.

Algunos editores de texto enriquecido también admiten la inserción de elementos multimedia, como imágenes y videos. Aquí está la lista de algunos editores de texto enriquecido conocidos disponibles para Django.

En este tutorial de Python, discutiremos cómo usar CKEditor como un editor de texto enriquecido en nuestro proyecto Django.

Este proyecto de Django se centrará en la creación de un sitio web de publicación de blog simple. Y para publicar contenido de blog, usaremos CKEditor en Django. Estos son los pasos que podemos seguir para este proyecto de Django.

Si no lo has instalado mira: Cómo instalar Django

Paso 1: Cree y active un entorno virtual para Django Project

En el primer paso, crearemos un entorno virtual para nuestro proyecto Django. Y para ello utilizaremos el siguiente comando en CMD.

> python -m venv myblogs-env

Aquí creamos un entorno virtual llamado myblogs-env.

Una vez creado el entorno virtual, utilizaremos el siguiente comando para activarlo.

> myblogs-env\Scripts\activate

Con esto, hemos creado y activado con éxito un entorno virtual usando Python.

Paso 2: Instalación de Django y CKEditor en Django

A continuación, instalaremos el framework Django usando lo siguiente pepita dominio.

Nota: Asegúrese de ejecutar el comando con el entorno virtual activado.

> pip install django

Después de Django, la siguiente dependencia es CKEditor. Sin embargo, para agregar la funcionalidad de CKEditornecesitamos a la django-ckeditor módulo usando el siguiente comando.

> pip install django-ckeditor

Paso 3: configurar un proyecto Django

Después de instalar la dependencia, seguiremos los siguientes pasos para configurar el proyecto general de Django.

Crear proyecto Django

Primero, crearemos un proyecto Django usando el siguiente comando.

> django-admin startproject MyBlogs

Aquí creamos el proyecto Django con Mis blogs como el nombre del proyecto. Esto creará el Mis blogs directorio también los archivos del proyecto.

Mover al directorio del proyecto

Una vez que se crea el directorio del proyecto, nos moveremos al directorio del proyecto usando el cd dominio.

> cd MyBlogs

Creación de la aplicación Django

Dentro del directorio del proyecto, crearemos nuestra aplicación Django usando el aplicación de inicio dominio.

> python manage.py startapp myapp

Aquí creamos la aplicación Django llamada miaplicacion. Y una vez que el comando se ejecuta con éxito, generará automáticamente todos los archivos de la aplicación bajo el miaplicacion directorio.

Abra el Proyecto Django en el VSCode

Comenzar código de estudio visual > Bajo Empezar clickea en el Carpeta abierta opción > Seleccione la misBlogs directorio.

Configurar aplicaciones en INSTALLED_APPS

A continuación, abra settings.py desde misBlogs directorio y agregue el miaplicacion aplicación y ckeditor bajo la APLICACIONES_INSTALADAS lista.

INSTALLED_APPS = [
    .
    .

    .
    'myapp',
    'ckeditor',
]

Configuración básica de URL

Django por defecto proporciona un urls.py para mapear la aplicación recién creada dentro de ella en el directorio del proyecto. Agregue el código a continuación para hacer esto.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls'))
]

Hasta ahora, este paso, hemos completado con éxito la configuración básica del proyecto Django.

Paso 4: Creación del modelo Django

Para almacenar datos para nuestros blogs, crearemos un modelo. Sin embargo, podemos definir modelos en el archivo models.py para cada aplicación.

Entonces, abre miaplicación/modelos.py y agregue el siguiente código de Python.

from django.db import models
from ckeditor.fields import RichTextField 

class BlogPost(models.Model):
    blog_title = models.CharField(max_length=200)
    blog_content = RichTextField()
    publish_date = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.blog_title

Aquí creamos un modelo llamado BlogsPublicar utilizando el modelos.Modelo clase. Este consta de los siguientes 3 campos.

• Titulo de Blog: Es un campo de carácter utilizado para almacenar el título del blog. Además, su longitud máxima es 200 caracteres.
• blog_content: Este será el campo del editor de texto enriquecido. Para esto, usamos RichTextField() de ckeditor.fields.
• fecha de publicación: Este es un campo de fecha y hora cuyo valor se completará automáticamente al enviarlo.

En el último, especificamos el nombre para mostrar de cada registro como el propio título del blog.

Paso 5: Registre el modelo en el sitio de administración

A continuación, registraremos el BlogsPublicar modelo en el sitio de administración para que podamos acceder al modelo en el Panel de administración de Django.

Para esta tarea, abra el administrador.py archivo en el directorio myapp y agregue el siguiente código.

from django.contrib import admin
from .models import BlogPost

admin.site.register(BlogPost)

Paso 6: Creando un formulario usando el modelo Django

A continuación, crearemos un Formulario Django usando los mismos campos definidos en el misBlogs modelo. Para esta ejecución simplemente agregue el siguiente código en el miaplicación/formularios.py archivo.

Nota: Tenga en cuenta que si formularios.py El archivo no está disponible, créelo en el directorio de su aplicación.

from django import forms
from .models import BlogPost


class BlogPostForm(forms.ModelForm):

    class Meta:
        model = BlogPost
        fields = ('blog_title', 'blog_content')
        exclude = ['published_date']

Paso 7: renderizar Django ModelForm en plantillas

Una vez que creamos un formulario, podemos representarlo en nuestras plantillas. Para ello, sigue los siguientes pasos:

Primero, cree un directorio de plantillas en el directorio de su aplicación (en myapp).

A continuación, abra el configuración.py archivo e incluya el directorio de plantillas en el DIRS lista de claves.

TEMPLATES = [
    {
        .
        'DIRS': ['templates'],
        .
        'OPTIONS': {
            'context_processors': [
                .,
                .,
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Después de esto, crea otro archivo llamado inicio.html en el directorio de plantillas. Y luego agregue el siguiente código de Python.

    
    
    
    


    

        {% csrf_token %}
        {{form.as_p}}

        
    

En la página HTML, estamos cargando los formularios que creamos anteriormente usando los modelos.

Paso 8: Creación de vistas y almacenamiento de datos para modelar

A continuación, necesitamos definir la lógica para obtener los datos del Formulario Django y guárdelo en el Entrada en el blog modelo.

Para esta tarea, creamos una vista basada en funciones en el archivo views.py del miaplicacion directorio. Aquí está el código de Python para el vistas.py archivo.

from django.shortcuts import render
from django.http import HttpResponse
from .forms import BlogPostForm

def create_blog_post(request):
    if request.method == 'POST':
        form = BlogPostForm(request.POST)
        if form.is_valid():
            form.save()
            return HttpResponse('New Blog Successfully Added')
    else:
        form = BlogPostForm()
        context = {
            'form':form
        }

    return render(request, 'home.html', context)

Aquí definimos una vista basada en funciones llamada crear_blog_post. Esta vista comprobará si el formulario es válido o no. Y si el formulario se valida con éxito, almacenará los datos del formulario en las tablas.

Sin embargo, si el formulario no está completamente validado, volverá a devolver el formulario.

Paso 9: Definición de la URL para la vista

A continuación, solo necesitamos mapear la vista a una URL y para esto, abrimos el miaplicación/urls.py archivo y agregue el siguiente código.

from django.urls import path
from .views import create_blog_post

urlpatterns = [
    path('', create_blog_post, name="create_blog_post")
]

Paso 10: Hacer Migraciones

Debido a que hemos creado un modelo para almacenar los datos del blog, es importante ejecutar migraciones para que los cambios se reflejen en nuestra tabla.

> python manage.py makemigrations
> python manage.py migrate

Paso 11: Crear un superusuario en Django

Una vez que se completen nuestras migraciones, debemos crear un superusuario para acceder al Panel de administración de Django. Para esto, use el siguiente comando.

> python manage.py createsuperuser

Después de ejecutar el comando, le pedirá el nombre de superusuario, el correo electrónico, la contraseña y la confirmación de la contraseña.

Paso 12: Ejecute el servidor de desarrollo

Ahora, estamos listos para acceder a nuestra aplicación, para ello utilice el siguiente comando en el símbolo del sistema.

> python manage.py runserver

Una vez que ejecutamos con éxito el comando anterior, se iniciará el servidor de desarrollo ligero de Django en 8000 puerto por defecto. Para acceder al proyecto Django, abra este http://127.0.0.1:8000/ URL en el navegador.

El resultado de esta página se muestra a continuación.

En la página, podemos ver que el editor de texto enriquecido no está agregado para el campo Contenido del blog.

A continuación, abra el http://127.0.0.1:8000/admin/ URL y utilice las credenciales de superusuario para iniciar sesión en la interfaz de administración de Django.

Aquí si abrimos el Publicaciones de blog dado bajo el MIA APLICACIÓN sección y haga clic en Agregar publicación de blogpodemos observar que se agrega el editor de texto enriquecido para el Contenido del blog campo.

Sin embargo, para agregar la CKEditor a nuestros formularios, necesitamos agregar el siguiente código al archivo HTML. Aquí el archivo HTML se refiere a home.html

        {% csrf_token %}
        {{form.as_p}}
        {{form.media}}
        
    

Después de agregar el código anterior, actualice el http://127.0.0.1:8000/ página y ahora, obtendremos la CKEditor Para el Contenido del blog campo de formulario. Aquí está el resultado.

Ahora, podemos usar esto CKEditor para agregar datos en un formato de documento que contiene diferentes propiedades de texto, negrita, cursiva, subrayado, etc. También permite insertar tablas e incluso imágenes en el mismo documento.

Aquí hay un ejemplo:

Representación de datos de CKEditor en plantilla HTML

Hasta ahora, hemos integrado con éxito el CKEditor en forma Django y Interfaz de administración de Django. A continuación, debemos entender cómo cargar o procesar los datos almacenados usando CKEditor en nuestra plantilla HTML.

Para esta tarea, crearemos 2 vistas más en nuestro archivo views.py.

1. lista_de_blogs: Esta vista mostrará una lista de todos los nombres de blog que hay en el Entrada en el blog modelo
2. blog_view: Esta vista permitirá ver el contenido exacto del blog en particular.

El código para ambas vistas se proporciona a continuación.

def blog_list(request):
    blog_list = BlogPost.objects.all()
    return render(request, 'blog_list.html', {'blogs': blog_list})

def blog_view(request,blog_id):
    blog_view = BlogPost.objects.filter(id=blog_id)
    return render(request, 'blog_view.html', {'blog': blog_view})

Ahora, en cada vista, podemos ver el blog_list la vista está redirigiendo a la blog_list.html página. Y el blog_view la vista está redirigiendo a la blog_view.html página.

Primero, veamos el código del blog_list.html página.

    
List of Blogs
    

        {% for blog in blogs %}
        
{{ blog.blog_title }}
        {% endfor %}
    

Aquí estamos usando en bucle para obtener todos los títulos del blog como una lista y luego estamos convirtiendo el título en enlaces. Este enlace URL redirigirá a la página del blog en particular.

Después de esto, veamos el blog_view.html página.

    {% for info in blog %}
    


    
{{info.blog_title}}
    {{info.blog_content | safe}}
    {% endfor %}

En esta página, también usamos for loop para obtener el título y el contenido del blog. Sin embargo, como el blog_content El campo también consta de etiquetas HTML, necesitamos usar el seguro bandera con ella.

Una vez que ambos archivos HTML están configurados, solo necesitamos definir la URL para cada vista en Django. Para esta tarea, agregaremos el siguiente código al urls.py archivo de nuestra aplicación Django.

from django.urls import path
from .views import create_blog_post, blog_list, blog_view

urlpatterns = [
    path('', create_blog_post, name="create_blog_post"),
    path('blogs/', blog_list, name="blog_list"),
    path('blogs/', blog_view, name="blog_view"),
]

Ahora, ejecuta el servidor de desarrollo usando servidor de ejecución Comando y abre el http://127.0.0.1:8000/blogs/ URL en su navegador.

Aquí se enumerarán todos los nombres de los blogs.

Ahora, si hacemos clic en cualquiera de los enlaces, se abrirá el blog_view página que contiene los datos del blog.

En este sitio podrás encontrar también tutoriales de Python Django.

• Formulario de contacto simple para sitio web en Python Django
• Cree un formulario de contacto de Django con correo electrónico
• Ejemplo de Django CRUD con PostgreSQL

Conclusión

Entonces, en este tutorial de Python Django, entendimos cómo integrar un editor de texto enriquecido en nuestro Proyecto Django. Aquí entendimos cómo integrar y usar CKEditor en Django.

Además de esto, también entendimos cómo renderizar los datos almacenados usando CKEditor en Django Template.