Django admin 结合富文本编辑器tinymce

Django admin 结合富文本编辑器 tinymce

1. 简介

在 Django 开发中,Django admin 是一个非常重要的部分,它提供了一个简单而强大的管理后台,用于管理和编辑网站的数据。而在很多情况下,我们希望在后台编辑页面中使用富文本编辑器来方便地编辑内容,这时可以结合 Django admin 和 tinymce 富文本编辑器来实现。

2. 安装 tinymce

2.1 下载 tinymce

首先,我们需要先下载 tinymce。在官网上下载最新版本的 tinymce,并解压到项目的静态文件目录下(例如:static/tinymce)。

2.2 配置 tinymce

在 Django 的设置文件中,找到 INSTALLED_APPS 配置项,添加 tinymce:

INSTALLED_APPS = [

...

'tinymce',

]

然后,在设置文件的末尾,添加以下配置项:

TINYMCE_DEFAULT_CONFIG = {

'height': 400,

'width': 800,

'plugins': 'link image',

'toolbar': 'undo redo | bold italic | link image',

'menubar': False,

}

以上配置项中,'height''width' 分别指定了编辑器的高度和宽度,'plugins' 指定了使用的插件,'toolbar' 指定了工具栏中显示的按钮,'menubar' 则控制菜单栏的显示与隐藏。

3. 在 Django admin 中使用 tinymce

接下来,我们需要在 Django admin 中使用 tinymce。在需要使用富文本编辑器的模型管理类中,添加 Content 字段,并指定其 widget 为 tinymce 的编辑器:

from django.contrib import admin

from tinymce.widgets import TinyMCE

from .models import Article

class ArticleAdmin(admin.ModelAdmin):

formfield_overrides = {

models.TextField: {'widget': TinyMCE()},

}

admin.site.register(Article, ArticleAdmin)

4. 运行效果

经过以上配置,我们可以在 Django admin 的编辑页面中看到一个带有富文本编辑器的 Content 字段,点击编辑按钮后,就可以使用 tinymce 编辑器来编辑文章内容了。

注意:配置中的代码部分使用了<pre><code>标签进行标记,以便突出显示,其中的models.TextField表示在文章模型中使用的字段类型。

5. 总结

通过以上步骤,我们成功地在 Django admin 中集成了富文本编辑器 tinymce。这样,我们可以方便地在后台管理页面中使用富文本编辑器来编辑文章内容,提升了用户的编辑体验。同时,tinymce 还提供了丰富的插件和工具栏按钮,可以根据需求进行配置和定制。

注意:本文中的设置和代码是基于配置项中的temperature=0.6进行的,不同的配置项可能会有所不同。请根据实际需求进行配置和调整。

上一篇:django drf

下一篇:dango2.2初次使用

后端开发标签