Wagtail F Richtext

一个可在您的应用设置中配置的替代Wagtail richtext过滤器。

它可以以与Wagtail richtext过滤器相同的方式解析RichText字段中的内容，并向HTML添加类或内联样式。

将包添加到您的Wagtail站点后，将配置添加到您的设置中，然后在您希望将CSS类或内联样式添加到HTML内容的位置使用f_richtext模板标签。

如果您包括CSS框架，例如：

• Bulma
• CodyHouse
• Tachyons
• Tailwind
• 其他框架也可用 :)

安装

将包安装到您的Python环境中。

pip install wagtail-f-richtext

将包添加到您的INSTALLED_APS

"wagtail_f_richtext"

在您看到富文本内容的样式变化之前，需要安装任何CSS框架样式。如果您只使用内联样式，则在查看页面时应该看到它们的效果。

使用f_richtext过滤器

您可以在模板中使用f_richtext过滤器，就像Wagtail核心提供的richtext过滤器一样。

首先将过滤器添加到您的模板中。

{% load wagtail_f_richtext %}

然后在模板中使用它。

与RichText字段一起使用

• {{ page.body|f_richtext:"framework" }}将为HTML标签添加类
• {{ page.body|f_richtext:"inline_styles" }}将为HTML标签添加内联样式

与RichText块一起使用

• {{ value|f_richtext:"framework" }}将为HTML标签添加类
• {{ value|f_richtext:"inline_styles" }}将为HTML标签添加内联样式

您可以使用不带参数的它{{ page.body|f_richtext }}，它将像Wagtail核心提供的过滤器一样工作（不是必需的）

示例framework渲染

<div class="text-component">
    <p data-block-key="92eli">A paragraph <b class="font-bold">Vulputate Vestibulum</b> <i class="font-italic">Commodo</i></p>
    <h2 class="heading-2" data-block-key="fkden">Heading 2</h2>
    <ul class="list list--ul">
        <li data-block-key="fe5cv">UL List Item 1</li>
        <li data-block-key="6ort3">UL List Item 2</li>
    </ul>
    <ol class="list list--ol">
        <li data-block-key="d5s3r">OL List Item 1</li>
        <li data-block-key="5l47j">OL List Item 2</li>
    </ol>
    <img alt="IMG_4511" class="f-richtext-image f-richtext-image--right" height="375" src="/media/images/IMG_4511.width-500.jpg" width="500">
    <div style="clear: both;"></div>
</div>

示例inline_styles渲染

<div style="overflow:hidden;">
    <p data-block-key="92eli" style="margin-bottom: 1em;">A paragraph <b style="font-weight: bold;">Vulputate Vestibulum</b> <i style="font-style: italic;">Commodo</i></p>
    <h2 data-block-key="fkden" style="margin-bottom: 1em;">Heading 2</h2>
    <ul style="float: none; clear: both; list-style: disc; margin-left: 2em; margin-bottom: 1em;">
        <li data-block-key="fe5cv">UL List Item 1</li>
        <li data-block-key="6ort3">UL List Item 2</li>
    </ul>
    <ol style="float: none; clear: both; list-style: decimal; margin-left: 2em; margin-bottom: 1em;">
        <li data-block-key="d5s3r">OL List Item 1</li>
        <li data-block-key="5l47j">OL List Item 2</li>
    </ol>
    <img alt="IMG_4511" class="richtext-image right" height="375" src="/media/images/IMG_4511.width-500.jpg" style="float: right; margin-left: 1rem; margin-right: 0; margin-bottom: 1rem; height: auto;" width="500">
    <div style="clear: both;"></div>
</div>

配置

您需要将以下设置之一或两者添加到您的应用程序设置中。

• F_RICHTEXT_FRAMEWORK_CONFIG
• F_RICHTEXT_INLINE_CONFIG

向HTML标签添加类的示例

F_RICHTEXT_FRAMEWORK_CONFIG = {
    # target html tags
    "classes": {
        "h1": "heading-1",
        "h2": "heading-2",
        "ul": "list list--ul",
        "ol": "list list--ol",
        "a": "color-contrast-higher",
        "b": "font-bold",
        "i": "font-italic",
    },
    # wrap the richtext content with a class
    "wrapper_classes": [
        "text-component",
    ],
    # swap the richtext image alignment classes
    "alignment_classes": {
        "richtext-image left": "f-richtext-image f-richtext-image--left",
        "richtext-image right": "f-richtext-image f-richtext-image--right",
        "richtext-image full-width": "margin: 1em 0; width: 100%; height: auto;",
    },
    # remove any empty HTML tags (blank lines in the richtext editor)
    "remove_empty_tags": [
        "p",
    ],
    # add a clearfix to the end of the content
    "append_clearfix": True,
}

添加内联样式的示例

F_RICHTEXT_INLINE_CONFIG = {
    # target html tags
     "styles": {
        "h1": "margin-bottom: 1em;",
        "h2": "margin-bottom: 1em;",
        "h3": "margin-bottom: 1em;",
        "h4": "margin-bottom: 1em;",
        "h5": "margin-bottom: 1em;",
        "h6": "margin-bottom: 1em;",
        "p": "margin-bottom: 1em;",
        "ul": "float: none; clear: both; list-style: disc; margin-left: 2em; margin-bottom: 1em;",
        "ol": "float: none; clear: both; list-style: decimal; margin-left: 2em; margin-bottom: 1em;",
        "code": "font-family: monospace; background-color: #f5f5f5; padding: 0.25rem 0.5rem;",
        "sub": "vertical-align: sub; font-size: smaller;",
        "sup": "vertical-align: super; font-size: smaller;",
        "div": "float: none; clear: both;",
        "iframe": "max-width: 100%; width: 720px; height: 400px; margin-top: 1em; margin-bottom: 1em;",
        "b": "font-weight: bold;",
        "i": "font-style: italic;",
    },
    # wrap the richtext content with a style
    "wrapper_styles": [
        "overflow:hidden;",
    ],
    # swap the richtext image alignment classes for an inline style
    "alignment_styles": {
        "richtext-image left": "float: left; margin-right: 1rem; margin-left: 0; margin-bottom: 1rem; height: auto;",
        "richtext-image right": "float: right; margin-left: 1rem; margin-right: 0; margin-bottom: 1rem; height: auto;",
        "richtext-image full-width": "margin: 1em 0; width: 100%; height: auto;",
    },
    # remove any empty HTML tags (blank lines in the richtext editor)
    "remove_empty_tags": [
        "p",
    ],
    # add a clearfix to the end of the content
    "append_clearfix": True,
}

可选使用

使用自己的解析器类

解析器类可以扩展以添加您自己的解析需求。

创建一个继承自fRichTextParser的自己的类，并将其添加到您的应用程序设置中。

F_RICHTEXT_PARSER_CLASS="the.dotted.path.to.your.own.Class"

使用自己的运行函数

解析和加载配置的顺序由f_richtext过滤器调用的运行方法执行。

在合适的位置创建自己的运行函数，并将其添加到您的应用程序设置中。

F_RICHTEXT_PARSER_RUNNER="the.dotted.path.to.your.own.function"

贡献

可以运行测试应用程序来开发您的贡献。

1. 对仓库进行分叉，并将其克隆到您的计算机上。
2. 切换到您克隆它的文件夹。

创建一个虚拟环境并安装依赖项

python3 -m venv venv
source venv/bin/activate
pip install -e ".[development,testing]"

# run the migrations, add an admin account and start the app
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver

然后您可以在http://localhost:8000查看应用程序，并在http://localhost:8000/admin登录到管理员界面

运行测试

python manage.py test

您可以在Makefile中使用快捷方式来运行上述命令。

make setup

将运行所有上述初始命令并创建一个具有登录凭据的超级用户，用户名：admin 密码：admin

支持

• Wagtail 4.1, 4.2, 5.0, 5.1. 5.2, 6.0
• Django 3.2, 4.0, 4.1, 4.2
• Python 3.8, 3.9, 3.10, 3.11, 3.12