如何在Wagtail的Draftail编辑器中添加HTML查看功能？

好消息是，你完全可以在Draftail里实现类似Hallo.js的“查看原始HTML”功能！不过正如你注意到的，Draftail用JSON格式存储富文本内容（而非直接存HTML），所以不能像Hallo.js那样直接读取原始HTML字符串——我们需要通过转换结构化JSON为渲染后的HTML来实现这个需求。

下面是具体的实现思路和步骤：

核心思路 #

Draftail的内容存储是Draft.js的JSON格式，Wagtail本身提供了richtext过滤器来把这种JSON转换成最终渲染用的HTML。我们可以利用这个机制，给Draftail添加一个自定义按钮，点击时触发转换并展示HTML内容。

具体实现步骤 #

1. 编写Draftail自定义扩展（前端部分） #

你需要创建一个Draftail扩展，添加一个工具栏按钮，点击按钮时调用后端接口（或前端转换）获取对应的HTML，并通过弹窗/侧边栏展示。

示例前端代码（基于React，Draftail的扩展用React编写）：

import { Component } from 'react';
import { IconButton } from '@draftail/core';

class ShowHtmlButton extends Component {
  handleClick = () => {
    // 获取当前编辑器的JSON内容
    const contentState = this.props.editor.getCurrentContent();
    const rawContent = JSON.stringify(contentState.toJS());

    // 调用后端接口转换JSON为HTML
    fetch('/get-richtext-html/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
      },
      body: JSON.stringify({ content: rawContent }),
    })
    .then(response => response.text())
    .then(html => {
      // 用弹窗展示HTML，这里可以替换为更友好的模态框组件
      alert('富文本对应的HTML:\n\n' + html);
    });
  };

  render() {
    return (
      <IconButton
        icon="code"
        label="查看HTML"
        onMouseDown={this.handleClick}
      />
    );
  }
}

// 注册扩展
export const ShowHtmlExtension = {
  name: 'show-html',
  defaultConfig: {},
  exports: {
    controls: [ShowHtmlButton],
  },
};

2. 编写后端转换视图 #

在Wagtail后端写一个视图，接收Draftail的JSON内容，用richtext过滤器转换成HTML并返回：

from django.http import JsonResponse
from django.template.defaultfilters import richtext
from django.views.decorators.csrf import csrf_exempt
import json

@csrf_exempt
def get_richtext_html(request):
    if request.method == 'POST':
        data = json.loads(request.body)
        raw_content = data.get('content')
        # 用richtext过滤器转换JSON为HTML
        html = richtext(raw_content)
        return JsonResponse({'html': html})
    return JsonResponse({'error': 'Invalid request'}, status=400)

记得把这个视图添加到你的Django URL配置里。

3. 将扩展注册到Wagtail #

在你的Wagtail项目的wagtail_hooks.py里注册这个Draftail扩展：

from wagtail.admin.rich_text.editors.draftail import features as draftail_features
from .path_to_your_extension import ShowHtmlExtension

def register_rich_text_features(features):
    features.register_editor_plugin(
        'draftail',
        'showhtml',
        ShowHtmlExtension,
    )

    # 把这个功能添加到默认的富文本编辑器配置里
    features.default_features.append('showhtml')

注意事项 #

• 这里得到的HTML是Wagtail渲染后的最终HTML，不是像Hallo.js那样的“原始输入HTML”——因为Draftail的JSON是结构化内容，没有存储原始HTML的概念。如果你的需求是查看最终会渲染到页面上的HTML，这个方法完全满足；如果需要编辑原始HTML，那Draftail本身不支持，你可能需要切换回Hallo.js或者用其他方式。
• 弹窗展示只是示例，你可以换成更友好的模态框，比如用Wagtail自带的Modal组件来展示格式化后的HTML，体验更好。

内容的提问来源于stack exchange，提问作者Michael Volo