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 编辑器中选择一段文本并像这样应用首字下沉功能，

这是最终页面的样子，

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

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

我做错了什么，如何在 Wagtail 的 Draftail 编辑器中向具有选定功能的文本添加元素和 classes？

Answer 1

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

我不知道是否有解决方法，但无论如何，我不建议以这种方式实施首字下沉。像 Wagtail 这样的 CMS 的全部意义在于将内容与表示分开：如果编写网站内容的用户在编写时正在决定排版，那么这个过程就出了问题。

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

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

Wagtail CMS Draftail Inline Elements and Classes not showing

html

css

python

wagtail

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

Wagtail CMS Draftail Inline Elements and Classes not showing

html

css

python

wagtail

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