Wagtail CMS Draftail 内联元素和类未显示

Question

我已经注册了以下钩子：

from wagtail.core import hooks
from wagtail.admin.rich_text.converters.html_to_contentstate import InlineStyleElementHandler
import wagtail.admin.rich_text.editors.draftail.features as draftail_features
from django.templatetags.static import static
from django.utils.html import format_html

@hooks.register('insert_editor_css')
def editor_css():
    return format_html(
        '<link rel="stylesheet" href="{}">',
        static('css/styles.css')
    )

@hooks.register('register_rich_text_features')
def register_smallcaption_feature(features):

    feature_name = 'dropcap'
    type_ = 'DROPCAP'

    control = {
        'type': type_,
        'label': 'Drop',
        'description': 'Dropcap',
        'element': 'p class="has-dropcap"',
    }

    features.register_editor_plugin(
        'draftail',
        feature_name,
        draftail_features.InlineStyleFeature(control)
    )

    db_conversion = {
        'from_database_format': {
            'p[class="has-dropcap"]':
                   InlineStyleElementHandler(type_)
        },
        'to_database_format': {
            'style_map': {type_: 'p class="has-dropcap"'}
        },
    }

    features.register_converter_rule(
        'contentstate',
        feature_name,
        db_conversion
    )

我在 Draftail 编辑器中选择一个文本块并像这样应用 dropcap 功能，

这是最后一页的样子，

我选择的文本块已按照已发布页面的预期包含在带有has-dropcap 类的段落标记中。

但内联编辑器不会像我在控件变量 'element': 'p class="has-dropcap"', 中要求的那样，使用带有 has-dropcap 类的段落标记来包装文本块

我做错了什么，如何在 Wagtail 的 Draftail 编辑器中使用所选功能向文本添加元素和类？

Answer 1

这不起作用，因为p class="has-dropcap" 不是有效的 HTML 标记名称。通过标签名称注入属性在某些地方可能会作为非官方的黑客攻击，因为 Wagtail 的那些特定内部通过拼凑 HTML 字符串来工作，但 Wagtail 代码的其他部分（例如 Draftail 编辑器）使用 Javascript DOM API，其中标签名称和属性是完全不同的概念。

我不知道是否有解决方法，但无论如何，我不建议以这种方式实现 dropcaps。像 Wagtail 这样的 CMS 的全部意义在于将内容与呈现分开：如果编写网站内容的用户在编写内容时正在对排版做出决定，那么该过程中出现了问题。

如果您的网站设计要求正文的第一段具有首字下沉，那么您的 CSS 应该使用诸如 .body p:first 之类的规则来表示该设计选择，而不是手动应用的类名。