如何通过wtail添加电话链接？

Question

我正在尝试将<a href="tel:+1-555-555-5555">555-555-555</a>形式的链接任意添加到我的wagtail网站上的文本段落中。这些电话号码目前在整个网站上以纯文本形式出现，但我想将它们转换为链接。

我找到了这个老wagtail github issue，在那里他们解释了为什么他们不会添加它们，但是＆＃39;特殊用途页面＆＃39;他们描述的用例似乎与我的不同：我的网站在大多数内容页面（博客，产品，营销等）的文本段落中都有这些数字。

有人可以解释我如何添加可在整个网站上使用的电话链接吗？

我使用的是wagtail 1.x

Answer 1

要在富文本中设置电话链接，您需要为Hallo.js创建一个插件。看一下documentation以及Wagtail 1.13 creates和register这样的插件。

请注意，它通常非常复杂，Wagtail 2.0富文本编辑器现在是Draftail，而Hallo.js已被弃用。因此，如果您创建Hallo.js插件并升级到Wagtail 2.0，则必须add some configuration to continue using Hallo.js或重新创建Draftail插件。

FWIW，如果您有兴趣了解为Draftail创建插件所涉及的内容，您需要create an entity（另请注意，创建实体的API应{{3}在Wagtail 2.2）。

Answer 2

使用Raw HTML，没有什么可以阻止编辑者将恶意脚本插入页面。不要使用此块。 http://docs.wagtail.io/en/v2.1/topics/streamfield.html#rawhtmlblock

解决方法是自定义过滤器。例如：

{{ self.text|richtext|phonify }}

在你的templatetags.py中：

>>> def phonify(val):
...     for tel in re.findall(r'tel:(\d+)', val):
...         tag = '<a href="tel:{}">{}</a>'.format(tel, tel)
...         val = val.replace('tel:{}'.format(tel), tag)
...     return val
...
>>> phonify('Hello tel:123 world tel:456!')
'Hello <a href="tel:123">123</a> world <a href="tel:456">456</a>!'
>>>

现在您可以指示编辑（通过help_text）添加tel:5555555555等电话号码。

此示例不处理-和+1。但如果你弄明白了，我会更新答案;）

Answer 3

我最终砍掉了我的段落，包括我需要添加tel链接的原始html。有点单调乏味，而且某些页面的样式略有不同，但比其他任何方式都要短。