一个可定制的WYSIWYG/富文本编辑器的Django模型字段和小部件
项目描述
一个可定制的富文本/WYSIWYG小部件的Django模型字段和小部件。
在Django的admin界面和“正常”表单中工作。
支持全局 编辑器设置、可重用的 编辑器配置文件 以及每个 字段 & 小部件设置。内置了对可插拔的服务端 内容清理器 的支持。
测试了TinyMCE和CKEditor。设计为易于扩展以使用其他编辑器。
快速入门
安装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_settings和custom_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.admin在INSTALLED_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的散列
算法 | 散列摘要 | |
---|---|---|
SHA256 | 7efe9c397437922ed6ca3071b7a54db5bf8ebfa4ced7172dfb0b7472df66b0c4 |
|
MD5 | 9d81f96dce807ac02adec03cb3f0ad14 |
|
BLAKE2b-256 | b81375336f29fc675192ed8a247025327d591898e9c7ac7df39952c2eab896b7 |
哈希值 for django_richtextfield-1.6.2-py3-none-any.whl
算法 | 散列摘要 | |
---|---|---|
SHA256 | 56b7404f52ae9a313bcbdb4c47aea16e5fa26a48539c1221e3de39186ee839bf |
|
MD5 | 7af5fd71ca7d891f3a20a1602d6b8cb0 |
|
BLAKE2b-256 | 4ddc96a1f25ff2270c807c0e3ad242ea96f40561ad10c066d1a1741367e188f4 |