如何在您的 Django 网站中集成自定义富文本编辑器？

在本文中，我们将在 Django 应用程序中实现 tinymce 文本编辑器。

什么是 django-tinymce？

django-tinymce 是一个 Django 应用程序，它包含一个小部件，用于将表单字段呈现为 TinyMCE 编辑器。

特点：-

用作表单小部件或视图。
增强了对内容语言的支持。
与 TinyMCE 拼写检查器集成。
为对话框启用预定义的链接和图像列表。
支持 django-staticfiles
可以压缩 TinyMCE Javascript 代码。

如何在 Django 项目中添加 Tinymce 编辑器？

第 1 步 -安装 Django 并创建一个 django 项目和应用程序。

第 2 步 -安装 django-tinymce：

pip install django-tinymce

第 3 步 –

将 tinymce 添加到 settings.py 中的 INSTALLED_APPS 为您的项目：

INSTALLED_APPS = (
   ...
   'tinymce',
)

第四步 -

将tinymce.urls添加到 urls.py 为您的项目：

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

第 5 步 –

相应地编辑您的 models.py 文件并为富文本编辑器引入HTMLField() ：]

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

这将在您的 django 应用程序中集成一个简单的富文本编辑器。

您将在数据库管理面板中看到类似的内容：-

现在我们的任务是定制这个编辑器以使其看起来不错并在其中添加更多功能。

添加更多自定义 -

第 6 步 –

现在转到 Tinymce 下载页面并为您的 django 应用下载任何合适的版本。

Note – you can also use Tinymce CDN to integrate tinymce in your django app.

编程需要懂一点英语

第 7 步 –

现在复制您下载的 Tinymce 文件并将它们粘贴到您项目的静态文件夹中。像静态/js/tinymce

第 8 步 –

现在转到 Tinymce 演示页面并选择所需的文本编辑器。如果您需要更多功能，您也可以选择付费版本。从编辑器中复制 JS 文件的内容。

第 9 步 –

在static/js/tinymce文件夹中创建一个新文件 custom.js 并将复制的内容粘贴到其中并保存。这个 JS 文件内容中有很多插件，你可以根据需要添加或删除它们。

第 10 步 –

现在在你想要的模板中包含 tinymce.min.js 和 custom.js 文件。

第 11 步 –

现在根据您的 Django 模型创建一个表单并将其呈现在所需的模板中。您可以使用{{ form.as_p }} 或 {{ form.as_ul }} 或 {{ form.as_table }}来显示新的富文本编辑器。如果您想在文本编辑器中显示默认正文，并且可以查看表单的页面源代码并根据需要复制和编辑它，然后删除 {{ }} 部分并粘贴复制的表单并将其呈现在 django 模板中.