如何在你的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步-

在你的项目的settings.py中把tinymce添加到INSTALLED_APPS。

INSTALLED_APPS = (
   ...
   'tinymce',
)

第4步-

为你的项目添加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应用程序中集成一个简单的富文本编辑器。

在你的数据库管理面板中，你会有这样的东西：-

如何在你的Django网站中整合自定义富文本编辑器？

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

添加更多的自定义功能 –

第6步 –

现在去Tinymce下载页面，为你的django应用下载任何合适的版本。

注意 – 你也可以使用Tinymce CDN将tinymce集成到你的django应用中。

第7步 –

现在复制你下载的Tinymce文件，并将其粘贴到你的项目的静态文件夹中。比如static/js/tinymce

第8步 –

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

第9步 –

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

第10步 –

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

<!--Tinymce Text-Editor (Must be in Head Tag) -->
 <script src="{% static 'myapp/js/tinymce/tinymce.min.js' %}"></script>
 <script type="text/javascript" src="{% static 'myapp/js/tinymce/custom.js' %}" ></script>

第11步 –

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