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

Question

我将 TYPO3 7.6 与 fluid styled content 一起使用，并且允许我的编辑器将 iframe 插入富文本编辑器（RTE 或 htmlarea）。显示 iframe，因为 Snippet。没关系。

现在我想用 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

中查找更多详细信息

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

TYPO3 How can I wrap an iframe (RTE) with TypoScript?

iframe

typo3

typoscript

rte

安全旁注

TypoScript 调整

生成的输出