富文本编辑器的 Wagtail 钩子

Question

我创建了一个 wagtail 钩子，用于从 Richtext 编辑器添加代码块。钩子可以工作，但我有问题。 钩子应该像下面这样工作，

<div class="code">
content line one 
content line two
</div>

但是当我从编辑器应用该块时，它会使用以下代码应用每一行，

<div class="code">content line one </div>
<div class="code">content line two </div>

这应该是一行，Wagtail 编辑器为每一行应用多个 div，而不是为所选块应用一个 div

我的hook代码如下，

@hooks.register('register_rich_text_features')
def register_py_code_block_feature(features):
    """
    Registering for adding python code block
    """
    feature_name = 'py-code-block'
    type_ = 'py-code-block'

    control = {
        'type': type_,
        'label': 'PY',
        'description': 'Python Code Block',        
        # Optionally, we can tell Draftail what element to use when displaying those blocks in the editor.
        'element': 'div',
        'style': {
            "display": "block",
        },
    }

    db_conversion = {
        'from_database_format': {'div': BlockElementHandler(type_)},
        'to_database_format': {'block_map': {type_: {
                                                        'element': 'div',
                                                        'props': {
                                                            'class': 'code blog_code language-python'
                                                            }
                                                    }
                                            }
                                },
        }

    features.register_editor_plugin('draftail', feature_name, draftail_features.BlockFeature(control)) 
    features.register_converter_rule('contentstate', feature_name, db_conversion)
    features.default_features.append('py-code-block')

有人可以给我指出正确的方向吗

Answer 1

我使用代码块和 prism 来进行格式化。做得很好。选择您想要的语言和功能，下载 js 和 css 文件并将其加载到您使用此块的页面类型的模板中。

该块只是一种语言选择、代码和从块末尾删除填充的选项（当您希望代码与周围文本更紧密时很有用）。

选项应与您在棱镜页面上选择的语言相对应。

class CodeChoiceBlock(ChoiceBlock):
    choices=[
        ('python', 'Python'),
        ('css', 'CSS'),
        ('html', 'HTML'),
        ('javascript', 'Javascript'),
        ('django', 'Django Template'),
        ('json', 'JSON'),
        ('sql', 'SQL'),
        ('xml', 'XML'),
    ]

class BlogCodeBlock(StructBlock):
    language = CodeChoiceBlock()
    code = TextBlock()
    bottom_padding = BooleanBlock(
        label=_("Include extra space beneath code block?"),
        required=False,
        default=True
        )

    translatable_fields = []

    class Meta:
        template = "blocks/code_block.html"
        icon = "code"
        label = _("Code Block")

模板：

<div class="block-container{% if self.bottom_padding %} pb-2{% endif %}">
    <pre><code class="prism-block language-{{ self.language }}" id="code-block-{{ block.id }}">{{ self.code }}</code></pre>
</div>
{% if self.language == "django" %}
    <script>
        element = document.getElementById("code-block-{{ block.id }}");
        element.innerHTML = element.innerHTML
            .replace(/({%)(?!\s)/g, "$1 ")
            .replace(/({{)(?!\s)/g, "$1 ")
            .replace(/(?<!\s)(%})/g, " $1")
            .replace(/(?<!\s)(}})/g, " $1");
    </script>
{% endif %}

仅当您使用 django 模板 prism 类时才需要该脚本。 Prism 可以去除 {%, %}, {{ & }} 旁边的空格。如果是的话，此脚本会将这些空格添加回来。