📅 最后修改于: 2023-12-03 15:09:02.107000 🧑 作者: Mango
在 Django 中，集成富文本编辑器是一个非常常见的需求。富文本编辑器能够让用户轻松创建和编辑富文本内容，例如格式化文本、插入图像、创建列表、表格等等。
在本文中，我们将介绍如何在您的 Django 网站中集成自定义富文本编辑器。我们将使用一个名为TinyMCE的流行编辑器作为例子。TinyMCE是一个完全可定制的富文本编辑器，并且提供了非常多的功能和扩展性。
首先，您需要先安装 TinyMCE。可以通过下载TinyMCE源码并将其放置在静态文件夹中，或者使用CDN链接。我们将使用CDN链接的方式。
在您的HTML文件中，插入以下代码片段：
<head>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '#id_content',
menubar: false,
plugins: 'lists image',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | numlist bullist | image'
});
</script>
</head>
<body>
<form>
<textarea id="id_content"></textarea>
</form>
</body>
这里我们使用了 TinyMCE的CDN链接，并初始化了一个textarrea标签，id为"content" 。在初始化的时候，通过selector指定了 TinyMCE 的工作范围，这里指定为 #id_content。同时我们还添加了一些其他的 TinyMCE options，例如toolbar设置，插件设置等等。
接下来，我们需要在 Django 中进行一些配置，以便在模板中使用 TinyMCE。
首先，您需要将 TinyMCE 的静态文件夹和您的项目的静态文件夹链接起来。在您的settings.py文件中，添加以下设置：
TINYMCE_JS_URL = 'https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js'
TINYMCE_DEFAULT_CONFIG = {
'plugins': 'lists image',
'toolbar': 'undo redo | bold italic | alignleft aligncenter alignright | numlist bullist | image'
}
这里我们定义了两个变量，一个是 TinyMCE 的资源CDN链接，另一个是对 TinyMCE的默认配置。这些配置将在模板中使用。
接下来，我们需要安装 Django 的富文本编辑器包。我们将使用 django-tinymce4-lite这个包。可以使用pip进行安装：
pip install django-tinymce4-lite
然后在您的settings.py文件的INSTALLED_APPS中添加：
INSTALLED_APPS = [
...
'tinymce',
...
]
接下来，您需要将 TinyMCE 的urls链接到您的项目的urls.py中，添加以下代码：
from django.urls import include
urlpatterns = [
...
path('tinymce', include('tinymce.urls')),
...
]
最后，您需要在您的表单中启用 TinyMCE。在您的forms.py中，导入 TinyMCE widget并应用到文本字段：
from django import forms
from tinymce.widgets import TinyMCE
class MyForm(forms.Form):
content = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))
最后一步是渲染表单。在您的模板中，您可以使用以下代码片段来渲染 TinyMCE 窗体：
{% extends "base.html" %}
{% block content %}
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Submit</button>
</form>
{% endblock %}
这里我们使用 Django 的内置表单rendering，通过 {{ form.as_p }} 让 Django 将渲染的html代码加入到表单中。
That's it! 现在您已经在 Django 中成功集成了 TinyMCE富文本编辑器。
在 Django 中集成富文本编辑器可能看起来有些麻烦，但其实只需要几个简单的步骤就能完成。通过使用 TinyMCE 这样的可定制化富文本编辑器，您可以让您的 Django 网站更加富有吸引力和用户友好性。