在 TableBlock 单元格中添加链接答案

【问题标题】：Add link in TableBlock cell在 TableBlock 单元格中添加链接
【发布时间】：2018-03-09 20:31:52
【问题描述】：

我在 StreamField 中使用 TableBlock。渲染页面，包括表格，都很好。但是无论如何允许用户在表格单元格中输入链接？只需添加一个 URL 即可将其呈现为文本（如我所料）。

这需要自定义渲染器吗？

【问题讨论】：

标签： wagtail wagtail-streamfield

【解决方案1】：

我们的内容团队也要求提供此功能。但是，TableBlock 使用的底层库不支持它。我们最终创建了一个自定义的StreamField 类型来显示链接列表，而不是尝试将链接插入TableBlock。

【讨论】：

FlipperPA 的回答是正确的，恐怕。另一种方法是使用 Markdown 插件之一在 Markdown 中创作表格，但这对于技术含量较低的作者来说不是一个很好的选择。对不起！
谢谢，看来我们暂时不用了。

【解决方案2】：

我也遇到了这个问题。我知道这个问题很久以前就发布了，但我还是想分享我的解决方案。我放弃了，但后来我尝试像 FlipperPA 提到的那样实施降价。我意识到在安装wagtail-markdown（请按照说明操作）后，我可以像这样调整我的模板：

<!-- added this at the top of my template -->
{% load wagtailmarkdown %}
....
....
<!-- then in the table replace the word `linebreaksbr` with the word `markdown` -->
<table 
    class="info-list table table-responsive">
    {% if value.table.table_header %}
    <thead>
        <tr>
            {% for column in value.table.table_header %}
            {% with forloop.counter0 as col_index %}
            <th scope="col" {% cell_classname 0 col_index %}>
                {% if column.strip %}
                {% if html_renderer %}
                {{ column.strip|safe|markdown }}  <-- HERE it was {{ column.strip|safe|linebreaksbr }} -->
                {% else %}
                {{ column.strip|markdown }} <-- HERE it was {{ column.strip|linebreaksbr }} -->
                {% endif %}
                {% endif %}
            </th>
            {% endwith %}
            {% endfor %}
        </tr>
    </thead>
    {% endif %}
    <tbody>
        {% for row in value.table.data %}
        {% with forloop.counter0 as row_index %}
        <tr>
            {% for column in row %}
            {% with forloop.counter0 as col_index %}
            {% if first_col_is_header and forloop.first %}
            <th scope="row"
                {% cell_classname row_index col_index value.table.table_header %}>
                {% if column.strip %}
                {% if html_renderer %}
                {{ column.strip|safe|markdown }} <-- HERE it was {{ column.strip|safe|linebreaksbr }} -->
                {% else %}
                {{ column.strip|markdown }} <-- HERE it was {{ column.strip|linebreaksbr }} -->
                {% endif %}
                {% endif %}
            </th>
            {% else %}
            <td {% cell_classname row_index col_index value.table.table_header %}>
                {% if column.strip %}
                {% if html_renderer %} 
                {{ column.strip|safe|markdown }} <-- HERE it was {{ column.strip|safe|linebreaksbr }} -->
                {% else %}
                {% else %}
                {{ column.strip|markdown }} <-- HERE it was {{ column.strip|linebreaksbr }} -->
                {% endif %}
                {% endif %}
            </td>
            {% endif %}
            {% endwith %}
            {% endfor %}
        </tr>
        {% endwith %}
        {% endfor %}
    </tbody>
</table>

它会在 html 中呈现您的 TableBlock。我希望这对将来会有所帮助。

【讨论】：

【解决方案3】：

实际上，如果您同意用户必须粘贴链接的整个 HTML，而不仅仅是 href 值，这很容易。

您只需要在table_options kwarg of TableBlock 中使用自定义rendered 选项传递dict。它应该看起来像这样：

TableBlock(table_options={'renderer': 'html'})

查看文档：

Wagtail 和 Handsontable

在 Wagtail 2.16 上测试

【讨论】：