跳转到主要内容

一个可定制的WYSIWYG/富文本编辑器的Django模型字段和小部件

项目描述

Latest Version https://github.com/jaap3/django-richtextfield/actions/workflows/ci.yml/badge.svg?branch=main

一个可定制的富文本/WYSIWYG小部件的Django模型字段和小部件。

在Django的admin界面和“正常”表单中工作。

支持全局 编辑器设置、可重用的 编辑器配置文件 以及每个 字段 & 小部件设置。内置了对可插拔的服务端 内容清理器 的支持。

测试了TinyMCECKEditor。设计为易于扩展以使用其他编辑器。

快速入门

安装django-richtextfield并将其添加到Django项目的INSTALLED_APPS中,django.contrib.admin也必须在INSTALLED_APPS

INSTALLED_APPS = [
    'django.contrib.admin',
    ...
    'djrichtextfield'
]

将URL添加到项目的urlpatterns

path('djrichtextfield/', include('djrichtextfield.urls'))

settings.py中配置django-richtextfield

DJRICHTEXTFIELD_CONFIG = {
    'js': ['//cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js'],
    'init_template': 'djrichtextfield/init/tinymce.js',
    'settings': {
        'menubar': False,
        'plugins': 'link image',
        'toolbar': 'bold italic | link image | removeformat',
        'width': 700
    }
}

现在您可以在模型中使用该字段

from djrichtextfield.models import RichTextField

class Post(models.Model):
    content = RichTextField()

或表单

from djrichtextfield.widgets import RichTextWidget

class CommentForm(forms.ModelForm):
    content = forms.CharField(widget=RichTextWidget())

当在admin之外使用编辑器时,请确保在模板的<head>中包含form.media

<head>
  ...
  {{ form.media }}
  ...
</head>

配置

在项目设置中定义DJRICHTEXTFIELD_CONFIG字典。此字典可以具有以下键

JavaScript源

'js'

所需JavaScript文件列表。这些可以是CDN的URL或相对于你的STATIC_URL的路径,例如。

'js': ['//cdn.ckeditor.com/4.14.0/standard/ckeditor.js']

或者

'js': ['path/to/editor.js', 'path/to/plugin.js']

CSS源文件

'css'

所需CSS文件的字典。这些可以是CDN的URL或相对于你的STATIC_URL的路径,例如。

'css': {
    'all': [
        'https://cdn.example.com/css/editor.css'
    ]
}

或者

'css': {'all': ['path/to/editor.css', 'path/to/plugin.css']}

编辑器初始化模板

'init_template'

到你的编辑器初始化模板的路径。目前django-richtextfield附带两个模板,任选其一

'init_template': 'djrichtextfield/init/tinymce.js'

或者

'init_template': 'djrichtextfield/init/ckeditor.js'

编辑器设置

'settings'

一个Python字典,包含你的编辑器的默认配置数据,例如。

'settings': {  # TinyMCE
    'menubar': False,
    'plugins': 'link image',
    'toolbar': 'bold italic | link image | removeformat',
    'width': 700
}

或者

'settings': {  # CKEditor
    'toolbar': [
        {'items': ['Format', '-', 'Bold', 'Italic', '-',
                   'RemoveFormat']},
        {'items': ['Link', 'Unlink', 'Image', 'Table']},
        {'items': ['Source']}
    ],
    'format_tags': 'p;h1;h2;h3',
    'width': 700
}

编辑器配置文件

'profiles'

这是一个可选的配置键。配置文件是“命名”的定制设置,用于配置特定类型的字段。你可以这样配置配置文件

'profiles': {
    'basic': {
        'toolbar': 'bold italic | removeformat'
    },
    'advanced': {
        'plugins': 'link image table code',
        'toolbar': 'formatselect | bold italic | removeformat |'
                   ' link unlink image table | code'
    }
}

内容清理器

'sanitizer'

这是一个可选的配置键。清理器可以在小部件返回值之前处理提交的值。默认情况下,不会对提交的值执行任何处理。你可以通过提供函数或可导入的函数路径来配置清理器,如下所示

'sanitizer': lambda value: '<h1>Title</h1>' + value

或者

'sanitizer': 'bleach.clean'
'sanitizer_profiles'

这是一个可选的配置键。可以为配置的每个配置文件覆盖默认或配置的清理器。例如,要为advanced配置文件设置自定义清理器

'sanitizer_profiles': {
    'advanced': lambda value: value + 'This text has been sanitized.'
}

字段 & 小部件设置

你可以按字段覆盖默认设置

class CommentForm(forms.ModelForm):
    content = forms.CharField(widget=RichTextWidget())
    content.widget.field_settings = {'your': 'custom', 'settings': True}

或者

class Post(models.Model):
    content = RichTextField(
        field_settings={'your': 'custom', 'settings': True},
        sanitizer='bleach.linkify'
    )

建议使用配置文件,它们使得切换配置或甚至编辑器在以后日期更容易。你可以这样使用配置文件

class CommentForm(forms.ModelForm):
    content = forms.CharField(widget=RichTextWidget(field_settings='basic'))

或者

class Post(models.Model):
    content = RichTextField(field_settings='advanced')

自定义初始化 / 使用其他编辑器

应该很容易将此项目与另一个编辑器一起使用。所需的所有操作是将DJRICHTEXTFIELD_CONFIG配置为加载正确的JavaScript/CSS文件,并创建一个自定义的初始化模板

例如,要使用基于jQuery的Summernote(精简版)编辑器

DJRICHTEXTFIELD_CONFIG = {
    'js': [
        '//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js',
        '//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js',
    ],
    'css': {
        'all': [
            '//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css',
        ]
    },
    'init_template': 'path/to/init/summernote.js',
    'settings': {
        'followingToolbar': False,
        'minHeight': 250,
        'width': 700,
        'toolbar': [
            ['style', ['bold', 'italic', 'clear']],
        ],
    }
}

初始化模板

初始化模板是一个Django模板(因此它应该在模板中,而不是在静态目录中)。它包含一些用于初始化每个编辑器的JavaScript代码。例如,Summernote的初始化模板可能如下所示

$('#' + id).summernote(settings)

初始化模板有以下JavaScript变量可供外部作用域使用

field

要替换的textarea的DOM节点

id

textarea的id属性

default_settings

DJRICHTEXTFIELD_CONFIG['settings']作为一个JS对象

custom_settings

field_settings作为一个JS对象

settings

default_settingscustom_settings的合并

处理上传 & 其他高级功能

django-richtextfield设计为不依赖特定编辑器。这意味着文件上传、显示内容预览和支持其他“高级”功能取决于你。

历史

1.6.2 (2024-03-07)

  • 代码刷新,没有功能更改

  • 将CI切换到GitHub动作

  • 使用Django 3.2和4.2进行测试

  • 使用Python 3.8、3.10和3.12进行测试

  • 放弃对旧版Python和Django版本的支持

1.6.1 (2021-04-14)

  • 支持Django 3.2(无需更改)

  • 使用Django主版本(4.0)进行测试

  • 使用force_str代替force_text,因为后者在Django 4.0中被弃用并删除

1.6 (2020-05-20)

  • init.js不再依赖于jQuery。这可能会对以下用户造成不兼容的向后兼容性更改

    • 定义了自己的init脚本并依赖于$e变量。此变量已被替换为field,它是一个纯DOM节点而不是jQuery对象。

    • 依赖于Django捆绑版jQuery的隐式加载的用户现在必须显式地加载它。

  • 已验证TinyMCE init/config与TinyMCE 4和5兼容

  • 已测试并验证与Django 3.1兼容

1.5.0 (2019-12-04)

  • 放弃对Python 2的支持

  • 放弃对Django < 2.2的支持

  • 添加对Django 3.0的支持

1.4.0 (2019-01-31)

  • 注意:这是支持Python 2的最后一个版本!

  • 添加对可插拔服务器端内容清理器的支持

1.3.0 (2018-11-05)

  • 允许CSS文件通过RichTextWidget包含

1.2.4 (2018-09-25)

  • 修复Django 2.1的admin界面显示问题

1.2.3 (2018-09-11)

  • 添加对Django 2.1的支持

1.2.2 (2018-06-12)

  • 根据DEBUG条件加载未压缩/压缩版本的jQuery

  • 在所有其他脚本之前加载jQuery

1.2.1 (2018-01-18)

  • ['admin/js/vendor/jquery/jquery.min.js', 'admin/js/jquery.init.js']添加到RichTextWidget.media.js中。这使得小部件可以在admin之外使用(但仍需要django.contrib.adminINSTALLED_APPS中),并防止在特定边缘情况下在admin中发生JavaScript错误。

1.2 (2017-12-04)

  • 移除对Django < 1.11的支持

  • 添加对Django 2.0的支持

1.1 (2016-01-14)

  • 移除对Django < 1.8的支持

  • 与Django 1.8和Django 1.9进行了测试

1.0.1 (2014-11-13)

  • 修复Unicode错误

1.0 (2014-09-30)

  • 第一个版本

项目详情


下载文件

下载适用于您的平台的文件。如果您不确定选择哪个,请了解更多关于安装软件包的信息。

源分发

django-richtextfield-1.6.2.tar.gz (16.6 KB 查看散列

上传时间

构建分发

django_richtextfield-1.6.2-py3-none-any.whl (11.6 KB 查看散列

上传时间 Python 3

支持者