TYPO3中嵌入Infogram仪表盘：如何添加含HTML/JS的记录？

方案一：自定义字段+模板渲染（推荐，安全易维护） #

直接在新闻记录里存JS容易被过滤且不安全，建议通过自定义字段存储Infogram标识，再通过ext+模板渲染完整代码：

1. 给tt_news添加自定义字段

   • 推荐创建一个小型自定义扩展（避免修改核心News扩展导致更新覆盖），给tt_news表添加两个字段：
     • infogram_id：输入框，存储Infogram的data-id值
     • infogram_title：输入框，存储Infogram的data-title值
   • 激活扩展后，在新闻记录编辑页面会新增这两个输入框，填入对应的值。

2. 修改ext+的新闻模板

   • 找到ext+模板中负责新闻详情渲染的文件（通常路径类似fileadmin/templates/ext+/News/Detail.html，根据实际路径调整）
   • 在需要显示仪表盘的位置（比如正文后）插入以下代码：

     <f:if condition="{newsItem.infogramId}">
         <!-- Infogram嵌入代码 -->
         <div class="infogram-embed" data-id="{newsItem.infogramId}" data-type="interactive" data-title="{newsItem.infogramTitle}"></div>
     </f:if>
     

   • 优化：避免JS重复加载
     把Infogram的JS代码放到ext+的全局 footer 模板中（只加载一次）：

     <script>!function(e,n,i,s){var d="InfogramEmbeds";var o=e.getElementsByTagName(n)[0];if(window[d]&&window[d].initialized)window[d].process&&window[d].process();else if(!e.getElementById(i)){var r=e.createElement(n);r.async=1,r.id=i,r.src=s,o.parentNode.insertBefore(r,o)}}(document,"script","infogram-async","https://infogram.com/js/dist/embed-loader-min.js");</script>
     

3. 清除TYPO3缓存
   后端顶部点击「清除缓存」按钮，确保模板和字段配置生效。

方案二：允许RTE直接插入代码（不推荐，存在安全风险） #

如果必须在新闻内容源码中直接插入代码，需要修改RTE和内容渲染配置，关闭相关过滤：

1. 配置RTE允许标签和属性
   进入「模板」模块，编辑根模板的「设置」，添加以下TypoScript代码：

   RTE {
       default {
           content {
               allowedTags := addItems(div, script)
               allowedAttributes := addItems(class, data-id, data-type, data-title, src, id, async)
           }
           proc {
               allowTags := addItems(div, script)
               allowHTMLSpecialChars = 1
               entryHTMLparser_db {
                   allowTags := addItems(div, script)
               }
           }
       }
   }
   

2. 关闭tt_news内容字段的过滤
   继续在模板设置中添加：

   plugin.tt_news {
       display {
           detail {
               bodytext {
                   parseFunc < lib.parseFunc_RTE
                   parseFunc.allowTags := addItems(script)
                   parseFunc.allowAttributes := addItems(class, data-id, data-type, data-title, src, id, async)
               }
           }
       }
   }
   

3. 插入代码并测试
   编辑新闻记录时切换到「源码」模式，粘贴完整的Infogram HTML+JS代码，保存后清除缓存查看效果。

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