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的全部目的是将内容与表示分离：如果编写网站内容的用户在编写内容的同时对排版做出决定，那么在这个过程中就出了问题

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