django CMS富文本插件
项目描述
djangocms-text
djangocms-text 是一个灵活且可扩展的Django CMS富文本编辑解决方案。此软件包旨在替代 djangocms-text-ckeditor,引入可切换的富文本编辑器界面,并支持在HTML和JSON格式中增强数据存储。
功能
可切换的富文本编辑器:根据项目需求选择和切换不同的富文本编辑器。
定制和扩展:轻松添加或定制您喜欢的富文本编辑器的新版本。
增强数据存储:以HTML或JSON格式存储内容,为不同的用例提供灵活性。
与 djangocms-text-ckeditor 兼容性:初始版本包含 CKEditor 4 接口和子插件功能的移植。此编辑器与 djangocms-text-ckeditor 插件兼容,可以作为直接替换品使用。
安装
使用 pip 安装 djangocms-text: pip install djangocms-text。
使用 git 构建最新开发分支
git clone git@github.com:fsbraun/djangocms-text.git
cd djangocms-text
nvm use
npm install
npx webpack --mode development
然后,您可以使用 pip install -e /path/to/the/repo/djangocms-text 安装克隆的库。
最后,将 djangocms_text 添加到您的 Django 项目设置中的 INSTALLED_APPS
INSTALLED_APPS = [..., "djangocms_text", ...]
将编辑器前端添加到您的已安装应用程序中(如果与默认的 TipTap 前端不同),并设置您想使用的编辑器
INSTALLED_APPS = [..., "djangocms_text.contrib.text_ckeditor4", ...]
DJANGOCMS_TEXT_EDITOR = "djangocms_text.contrib.text_ckeditor4.ckeditor4"
从 djangocms-text-ckeditor 升级
djangocms-text 的迁移会自动将现有的文本插件从 djangocms-text-ckeditor 迁移过来。您只需
从 INSTALLED_APPS 中删除 djangocms_text_ckeditor
将 djangocms_text 添加到 INSTALLED_APPS(见上文)
运行 python -m manage migrate djangocms_text
在项目从 CKEditor4 过渡到 Tiptap 作为富文本编辑器时,请考虑以下要点
切换编辑器:最大的挑战可能是适应 CKEditor4 和新默认富文本编辑器 Tiptap 之间的差异。Tiptap 提供了更现代的编辑体验,但在内容处理方面存在重要的区别。
不支持直接 HTML 源代码编辑:Tiptap 不支持直接 HTML 源代码编辑。虽然这简化了大多数用户的编辑器,但对于习惯于手动编辑 HTML 的高级用户或开发人员来说,这可能是一个缺点。
非标准格式丢失:通过 CKEditor4 插件创建或手动添加的 HTML 类的格式可能不会保留。Tiptap 以抽象的 JSON 格式存储内容,并在编辑时重新生成 HTML,这可能导致非标准格式的丢失。然而,这仅在迁移后编辑字段时才会发生。
可能的解决方案:如果维护 CKEditor4 功能至关重要,您可以通过使用 djangocms-text 提供的 CKEditor4 后端来规避这些问题。这允许您保留熟悉的 CKEditor4 行为,同时受益于其他更新。
用法
安装后,djangocms-text 可以作为 Django CMS 中的富文本编辑器使用。它可以作为 djangocms-text-ckeditor 的替代品使用。将提供详细的使用和自定义文档。
编辑器
djangocms-text 支持多个富文本编辑器,可以根据需要更换。以下编辑器目前受到支持
TipTap:一个具有模块化架构的现代富文本编辑器,TipTap 目前处于开发中,是默认编辑器。TipTap 不允许用户直接编辑 HTML,这意味着在从 CKEditor 4 切换到 TipTap 时,某些格式选项会丢失。
CKEditor 4:djangocms-text 的初始版本包含 CKEditor 4 接口和子插件功能的移植。此编辑器与 djangocms-text-ckeditor 插件兼容,可以作为直接替换品使用。它支持内联编辑和文本启用插件。
CKEditor 5:为了保持许可证分离,有一个单独的包 djangocms-text-ckeditor5,它提供了 CKEditor 5 作为富文本编辑器。
贡献
欢迎为 djangocms-text 贡献!请阅读我们的贡献指南以开始。
许可证
本项目采用BSD-3-Clause许可证 - 有关详细信息,请参阅LICENSE文件。
配置
富文本编辑器选择
要选择富文本编辑器,将编辑器的包添加到您的INSTALLED_APPS中,并将设置DJANGOCMS_TEXT_EDITOR添加到指向编辑器RTEConfig路径。
示例
INSTALLED_APPS = [ ..., "djangocms_text.contrib.text_ckeditor4", ... ] DJANGOCMS_TEXT_EDITOR = "djangocms_text.contrib.text_ckeditor5.ckeditor4"
可能还有其他富文本编辑器可用,例如在extension_text_ckeditor5中的CKEditor 5。
内联编辑功能
内联编辑允许编辑器直接点击文本插件并在django CMS的编辑模式下更改内容。CKEditor将直接出现在文本字段周围,并可正常使用。一旦文本字段失去焦点,更改就会保存。
内联编辑需要在编辑模式中将HTML文本封装在一个<div>中。这可能会与网站的CSS产生一些副作用,例如直接子规则。
要激活内联编辑,请在项目的settings.py中添加以下行
TEXT_INLINE_EDITING = True
这将添加一个切换按钮到工具栏,允许在当前会话中开启和关闭内联编辑。
当内联编辑激活时,编辑器每次失去焦点都会保存插件的内容。如果只有文本已更改,用户可以立即继续编辑。如果更改了文本启用的插件,添加了或删除了它,页面将刷新以更新页面树并获得更改插件的正确渲染版本。
文本启用的插件
djangocms-text支持文本启用的插件,但并非所有富文本编辑器前端都支持。
如果您已创建一个希望在文本插件中使用的插件,您可以通过将其设置为text_enabled来使它们出现在下拉菜单中。这意味着您将插件的属性text_enabled设置为True,默认值为False。以下是一个非常简单的实现
class MyTextPlugin(TextPlugin): name = "My text plugin" model = MyTextModel text_enabled = True
当插件被选中时,它将在CMS插件下拉菜单(拼图图标)中可用,您可以在编辑器中找到它。这使得用户可以非常容易地在一个用户友好的文本块中插入特殊内容,这是他们熟悉的。
该插件甚至会在文本编辑器中预览。小贴士:请确保您的插件提供了自己的icon_alt方法。这样,如果您有许多text_enabled插件,它可以显示有关它的提示。例如,如果您创建了一个显示可配置产品价格的插件,它可以显示带有该产品名称的工具提示。
有关如何扩展CMS以添加插件的信息,请参阅django-cms文档。
文本启用的插件可以使用djangocms-text具有自己的图标。如果插件类具有text_icon属性,则应包含一个图标的SVG源代码。图标将在CMS插件下拉菜单或工具栏中显示。
class MyTextPlugin(TextPlugin):
name = "My text plugin"
model = MyTextModel
text_enabled = True
text_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>'
您还可以通过将插件名称添加到工具栏配置中,例如"LinkPlugin",来配置文本启用的插件,使其可以从富文本编辑器工具栏直接访问。
占位符中的默认内容
您可以在“default_plugins”中使用 TextPlugin(请参阅有关 CMS_PLACEHOLDER_CONF 设置的文档)。TextPlugin 只需要一个值:body,在其中写入您的默认 HTML 内容。如果您想为自动添加的插件(例如 LinkPlugin)添加一些“默认子项”,您必须在正文中放置子项引用。引用格式为 "%(_tag_child_<order>)s",其中包含子项的插入顺序。例如
CMS_PLACEHOLDER_CONF = {
'content': {
'name' : _('Content'),
'plugins': ['TextPlugin', 'LinkPlugin'],
'default_plugins':[
{
'plugin_type':'TextPlugin',
'values':{
'body':'<p>Great websites : %(_tag_child_1)s and %(_tag_child_2)s</p>'
},
'children':[
{
'plugin_type':'LinkPlugin',
'values':{
'name':'django',
'url':'https://django.ac.cn/'
},
},
{
'plugin_type':'LinkPlugin',
'values':{
'name':'django-cms',
'url':'https://www.django-cms.org'
},
},
]
},
]
}
}
可配置的清理器
djangocms-text 使用 nh3 对 HTML 进行清理,以避免安全问题并检查 HTML 代码的正确性。清理可能会移除一些对某些用例有用的标签,例如 iframe;您可以通过覆盖 TEXT_ADDITIONAL_ATTRIBUTES 设置来自定义允许的标签和属性。
TEXT_ADDITIONAL_ATTRIBUTES = { 'iframe': {'scrolling', 'allowfullscreen', 'frameborder'}, }
注意,TEXT_ADDITIONAL_ATTRIBUTES 设置是一个字典,其中键是标签名称,值是属性名称的集合。
如果您有类似 djangocms-text-ckeditor 的设置,该设置利用了 TEXT_ADDITIONAL_TAGS 和 TEXT_ADDITIONAL_ATTRIBUTES,这些设置将自动为您转换,但您将在服务器启动时从 Django 检查框架收到警告。
注意:某些前端编辑器将在将文本传递给 Web 服务器之前对文本进行预清理,这使得上述设置无效。
要完全禁用此功能,请设置 TEXT_HTML_SANITIZE = False。
开发
pre-commit 钩子
该仓库使用 pre-commit git 钩子来运行确保代码质量的工具。
要利用此功能,请运行 pip install pre-commit,然后 pre-commit install。
构建 JavaScript
djangocms-text 分发一个插件运行的 JavaScript 包,该包包含前端编辑器本身以及 CMS 内部运行的必要插件。要构建此包,您需要使用 nvm use、npm install,然后运行 npx webpack。
致谢
特别感谢 Django CMS 社区和所有对 djangocms-text-ckeditor 项目的贡献者。