如何在django中使用富文本编辑器

[TOC]

前端后端都有讲解（附代码）

如何在后端django后台使用富文本编辑器

1. 安装

pip install django-ckeditor

2. 配置ckeditor

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'ckeditor',#这个
]

在项目的settings.py文件的最下边加上ckeditor配置内容（使用界面上的功能）

配置代码

#使用ck的工具栏并修改，宽度自适应
CKEDITOR_CONFIGS = {
    # django-ckeditor默认使用default配置
    'default': {
        # 编辑器宽度自适应
        'width':'auto',
        'height':'300px',
        # tab键转换空格数
        'tabSpaces': 4,
        # 工具栏风格
        'toolbar': 'Custom',
        # 工具栏按钮
        'toolbar_Custom': [
            # 预览、表情
            ['Preview','Smiley'],
            # 字体风格
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            # 字体颜色
            ['TextColor', 'BGColor'],
            #格式、字体、大小
            ['Format','Font','FontSize'],
            # 链接
            ['Link', 'Unlink'],
            # 列表
            ['Image', 'NumberedList', 'BulletedList'],
            #居左，居中，居右
            ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            # 最大化
            ['Maximize']
        ],
        # 加入代码块插件
        'extraPlugins': ','.join(['codesnippet','image2','filebrowser','widget', 'lineutils']),
    },
    #评论
    'comment': {
        # 编辑器宽度自适应
        'width': 'auto',
        'height': '140px',
        # tab键转换空格数
        'tabSpaces': 4,
        # 工具栏风格
        'toolbar': 'Custom',
        # 工具栏按钮
        'toolbar_Custom': [
            # 表情 代码块
            ['Smiley', 'CodeSnippet'],
            # 字体风格
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            # 字体颜色
            ['TextColor', 'BGColor'],
            # 链接
            ['Link', 'Unlink'],
            # 列表
            ['NumberedList', 'BulletedList'],
        ],
        # 加入代码块插件
        'extraPlugins': ','.join(['codesnippet']),
    }
}

注意：上面代码中的下半部分从“comment”这里开始，是可以自己配置的部分，可以自己选择富文本编辑器采用那种配置。（后面会说）

3. models字段使用，引用步骤二中的ckeditor配置

from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField
 
class Comment(models.Model):
    content = RichTextUploadingField(config_name='default')#config_name指定ckeditor配置文件，不指定就使用default

    class Meta:
        db_table = 'comment'
        verbose_name = "评论"
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.title

这里的config_name=‘’可以指定自己配置的comment

4. forms字段使用

1. 首先在自己的app中创建一个py文件命名为forms
2. 然后导入下面代码

from django import forms
from ckeditor_uploader.fields import RichTextUploadingField

from .models import Comment


class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ['content', ]

以上不懂的可以自行学习modelform的相关知识

5. admin后台使用

from django.contrib import admin
from .models import Comment

admin.site.register(Comment)#在后台注册

6. 迁移数据库

python manage.py makemigrations
python manage.py migrate

这是在终端中进行的操作。

如何在前端使用富文本编辑器

1. 安装pillow

pip install pillow

ckeditor也要安装，上面已经安装过了这里就不在赘述了。

2. settings.py配置文件储存位置

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]
STATIC_ROOT = os.path.join(BASE_DIR, "static", "ckeditor")

# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
MEDIA_URL = '/media/'  # 上传图片的路径
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # 上传图片的根路径
# CK
CKEDITOR_UPLOAD_PATH = os.path.join(BASE_DIR, 'media', 'uploads')
CKEDITOR_IMAGE_BACKEND = 'pillow'

3. 配置路由

from django.contrib import admin
from django.urls import path, include, re_path
from app01 import views
from django.views.static import serve
from .settings import MEDIA_ROOT
from django.conf.urls.static import static
from django.conf import settings


urlpatterns = [
                  path('admin/', admin.site.urls),#后台
                  path('ckeditor/', include('ckeditor_uploader.urls')),#这句必不可少
                  path('show_box/<int:nid>/', views.show_box),#这里是我自己项目的路由，每个人都有不同的设置方法，这里现在不用在意，看它对应的函数就懂了。
              ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)#配置文件储存位置

4. 创建所需文件夹

在根目录下面创建文件夹

1. media， 并且在media文件夹中创建uploads文件夹
2. static

这里看settings设置就能懂。

5. views视图函数的设置

views.py

from django.shortcuts import render
from .forms import CommentForm#引入刚写完的modelform

def show_box(request, nid):
    return render(request, "show_box.html", {'form': CommentForm()})

具体语法参见modelform使用

6. 复制文件

python manage.py collectstatic

你会发现自己刚创建的文件加里面多出来很多内容

7.编辑show_box.html

<script src="/static/ckeditor/ckeditor/ckeditor-init.js"></script>
<script src="/static/ckeditor/ckeditor/ckeditor/ckeditor.js"></script>
#上面的这两个部分要依照这自己的文件储存位置写，可能会有所差异，去刚才复制文件之后多出来的那部分文件里面去找。
<div style="text-align: center">
    <form method="post" action="">
        {% csrf_token %}
        {{ form.as_p }}#这里是最重要的
        <div style="text-align: center">
            <input type="submit" value="提交评论" style="text-align: center">
        </div>
    </form>
</div>

现在运行就能够看见富文本编辑器了

如何将前端的用户填入内容保存到数据库

安装上文中编写HTML的话，数据会从原路径安装post形式传输到后端

1. 改写views视图函数

def show_box(request, nid):
    if request.method == "GET":
        return render(request, "show_box.html", {'form': CommentForm()})
    else:
        form = CommentForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect("/show_box/{}/".format(nid))#这里返回到原路径就好（.format这里只是格式化，是项目中所需的内容）
        else:
            return render(request, "show_box.html", {'form': form})

依然是modelform内容， 打印一下得到的form你就会知道用户上传的东西是什么。

如何将数据回显到前端

1. 改写views视图函数

def show_box(request, nid):
    if request.method == "GET":
        content = Comment.objects.all().order_by("-id")#加上order_by是想要最新发送的文章在最上面展示
        return render(request, "show_box.html", {"content": content, 'form': CommentForm()})#这里也有变动哦
    else:
        form = CommentForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect("/show_box/{}/".format(nid))#这里返回到原路径就好（.format这里只是格式化，是项目中所需的内容）
        else:
            return render(request, "show_box.html", {'form': form})

2. 改写html

{% for obj in content %}
{{ obj.content | safe }}#|safe确保内容正常显示。
{%endfor%}

具体样式自己更改

这样就OK了