如何在Django中添加文本编辑器字段？

在许多web应用程序中，文本编辑器都是必不可少的一部分。一个文本编辑器可以在网站中创建丰富的内容，包括文章、博客、新闻等等。在Django中，我们可以很容易地添加一个文本编辑器字段来处理这些数据。本文将讲解如何在Django中添加文本编辑器字段。

阅读更多：Python 教程

安装django-tinymce

Django中有很多第三方插件可以实现文本编辑器的功能，常见的有ckeditor和tinymce。本篇文章将使用tinymce作为示例来展示如何在Django中添加文本编辑器字段。

首先，我们需要在Django项目中安装django-tinymce，这可以通过pip来完成。在命令行中运行以下命令即可：

pip install django-tinymce

首先，我们需要添加“tinymce”到INSTALLED_APPS中：

INSTALLED_APPS = [

    # ...

    'tinymce',

]

然后进行迁移操作：

python manage.py migrate

配置django-tinymce

django-tinymce提供了一个默认的配置，但也可以在settings.py中配置它。

# settings.py
# TinyMCE Settings

TINYMCE_DEFAULT_CONFIG = {
    'height': '250px',
    'width': '100%',
    'cleanup_on_startup': True,
    'custom_undo_redo_levels': 10,
    'selector': 'textarea',
    'plugins': '''
        textcolor save link image media preview codesample contextmenu
        table code lists fullscreen  insertdatetime  nonbreaking
        contextmenu directionality searchreplace wordcount visualblocks
        visualchars  code fullscreen autolink lists  charmap print  hr
        anchor pagebreak
    ''',
    'toolbar': '''
        undo redo | styleselect fontselect fontsizeselect | bold italic |
        forecolor backcolor | link | image media | preview | codesample
        alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |
        nonbreaking | contextmenu directionality searchreplace | code fullscreen
    ''',
    'menubar': True,
    'statusbar': True,
}

这个默认配置将在所有的textarea元素中启用TinyMCE。

让我们来解释一下这个默认配置：

height 和 width：定义TinyMCE编辑器的高度和宽度。
cleanup_on_startup：在启动编辑器时是否清除所有HTML标记。
custom_undo_redo_levels：设置编辑操作的最大数量。
selector：TinyMCE被应用到的DOM元素选择器。
plugins：启用的TinyMCE插件。
toolbar：定义TinyMCE的工具栏。
menubar：定义是否显示菜单栏。
statusbar：定义是否显示状态栏。

您可以根据您的需要编辑配置信息。

添加文本编辑器字段

接下来，我们创建一个Model类，向其中添加需要文本编辑器的字段。

from django.db import models
from tinymce.models import HTMLField

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = HTMLField('Content')
    pub_date = models.DateTimeField('Publish Date')

    class Meta:
        ordering = ['-pub_date']

    def __str__(self):
        return self.title

在这个Model类中，我们创建一个名为content的HTMLField。在TinyMCE中，HTMLField是一个富文本字段，类似于Django的TextField，但是可以与TinyMCE一起使用。

要在视图中使用这个Model类，导入它并使用它。

from django.shortcuts import render
from .models import Post

def post_list(request):
    posts = Post.objects.all()
    return render(request, 'blog/post_list.html', {'posts': posts})

创建表单

我们现在有了一个Model类，其中包括一个需要TinyMCE的HTMLField字段，现在我们需要创建一个能够上传并存储这个字段的表单。

from django import forms
from .models import Post
from tinymce.widgets import TinyMCE

class PostForm(forms.ModelForm):
    content = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))

    class Meta:
        model = Post
        fields = ('title', 'content', 'pub_date')

在这个表单中，我们使用forms.CharField来代替HTMLField，使用TinyMCE作为widget，确保我们的HTMLField与TinyMCE配合使用。

创建视图

接下来，我们创建一个视图来渲染表单，并采用POST方法来上传数据。

from django.shortcuts import render, redirect
from .forms import PostForm

def new_post(request):
    if request.method == 'POST':
        form = PostForm(request.POST)
        if form.is_valid():
            post = form.save(commit=False)
            post.author = request.user
            post.save()
            return redirect('post_list')
    else:
        form = PostForm()
    return render(request, 'blog/new_post.html', {'form': form})

在这个视图中，我们首先检查请求方法是否为POST。如果是，则我们使用POST请求提交的数据来实例化一个PostForm对象，如果数据验证通过，我们就可以将post实例保存到数据库中，并重定向到帖子列表。否则，如果这是一个GET请求，我们只是简单的渲染表单。

创建模板

最后，我们需要为我们的表单编写一个模板：

<!-- blog/new_post.html -->
{% extends 'blog/base.html' %}
{% load static %}

{% block content %}
  <form method="POST" class="post-form">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="save btn btn-default">Save</button>
  </form>
{% endblock %}

{% block scripts %}
  <script src="{% static 'tinymce/tinymce.min.js' %}"></script>
  <script>
    tinymce.init({{ form.media.tinymce_config|safe }});
  </script>
{% endblock %}

我们在模板中使用form.as_p来呈现表单，还包含指向TinyMCE cdn的JavaScript文件。在scripts块中，我们在每行的末尾加入|safe来告诉Django此行是安全的代码，不应该被转义。

以上就是在Django中添加文本编辑器字段的完整示例。通过django-tinymce，我们能够很容易地使用TinyMCE编辑器来创建富文本内容。