Wagtail Draftail Hovercard

一个为Wagtail的Draftail富文本编辑器添加悬停卡片的Wagtail插件。您负责在您的前端渲染悬停卡片。

需求

• Wagtail 4.2+

安装

1. 安装包

pip install wagtail-draftail-hovercard

2. 将 wagtail_draftail_hovercard 添加到您的 INSTALLED_APPS

INSTALLED_APPS = [
    # ...
    "wagtail_draftail_hovercard",
    # ...
]

3. 将 hovercard 功能添加到您的 RichTextField 或 RichTextBlock

class MyModel(models.Model):
    content = RichTextField(features=["hovercard"])

这就完成了！现在您在Draftail编辑器工具栏中有了悬停卡片功能。

在您站点的客户端渲染悬停卡片

您负责在前端渲染悬停卡片。富文本表示仅限于添加额外字段作为数据属性的 <span> 元素。您需要编写一些JS代码来查找 span[data-type="hovercard"] 并将其替换为您想要渲染的内容。

以下是Draftail渲染的HTML看起来像什么

<span data-type="hovercard" data-text="I'm the text inside the hovercard" data-heading="I'm the heading or I can be blank">
    I'm the text that the hovercard is attached to
</span>

许可证

本项目采用MIT许可协议 - 有关详细信息，请参阅 LICENSE 文件。