TYPO3 如何使用 TypoScript 包装 iframe (RTE)？

Question

我正在使用带有fluid styled content 的TYPO3 7.6，并且我允许我的编辑器将iframe 插入富文本编辑器（RTE 或htmlarea）。因为Snippet，所以显示了iframe。没关系。

现在我想用typoscript 包装这个iframe，因为iframe 必须是响应式的，所以我需要……像这样，作为包装器：

<div class="embed-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/7DRU" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

如何用一些 HTML 代码包装来自 TYPO3-RTE 的 iframe？

我试过了。像这样......但它不起作用。

### wrap iframe at RTE
lib.parseFunc_RTE {
    externalBlocks := addToList(iframe)
    externalBlocks {
        iframe.stripNL = 1
        iframe.callRecursive = 1
        iframe.callRecursive.tagStdWrap.HTMLparser = 1
        iframe.callRecursive.tagStdWrap.HTMLparser.tags.iframe {
            fixAttrib.class.default = classOfiframe
            wrap = <div>|</div>
        }
    }
}

或

lib.parseFunc_RTE.tags.iframe = TEXT
lib.parseFunc_RTE.tags.iframe {
    wrap = <div class="test">|</div>
}

Answer 1

安全附注

允许您的编辑人员手工制作 HTML 会增加您的网站受到 XSS（跨站点脚本）攻击的可能性。不建议允许直接 HTML 输入，尤其是在您不能完全信任您的编辑器的情况下。

TypoScript 调整

你的 TypoScript 几乎没问题，只是你应用属性的级别是错误的。

以下示例将问题放在一个整体中。开头的部分基本上是通过获取内容元素来解决的——在这方面它初始化了要解析的状态。在您的方案中只需要进行lib.parseFunce_RTE 调整。

# Simulating some content
page = PAGE
page.10 = TEXT
page.10.value (
  <p>Before</p>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/7DRU" frameborder="0" allowfullscreen></iframe>
  <p>After</p>
  <main>Not parsed...</main>
)
page.10.parseFunc =< lib.parseFunc_RTE

# Adjusting parsing instructions for IFRAMES
lib.parseFunc_RTE {
    allowedTags := addToList(iframe)

    externalBlocks := addToList(iframe)
    externalBlocks {
      iframe.stripNL = 1
      iframe.stdWrap.wrap = <div class="frame-wrapper">|</div>
    }
}

生成的输出

这会产生以下输出 - 预计 <main> 标记已被编码，因为它没有被定义为被处理。 nonTypoTagStdWrap.HTMLparser 语句负责对不匹配的标签进行这种编码。

<p class="bodytext">Before</p>
<div class="frame-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/7DRU" frameborder="0" allowfullscreen></iframe>
</div>
<p class="bodytext">After</p>
<p class="bodytext">  &lt;main&gt;Not parsed...&lt;/main&gt;</p>

在parseFuncTypoScript reference了解更多详情