将段落包装到 Typo3 内容元素的 Div

Question

我目前正在尝试在 Typo3 中的文本和文本和图像组件中的段落周围包装一个 div。

当前，它们看起来像这样：

<div id="c7" class="frame frame-default frame-type-text frame-layout-0">
    <header>...</header>
    <p>...</p>
    <p>...</p>
    <p>...</p>
</div>

最终 Output 应该是：

<div id="c7" class="frame frame-default frame-type-text frame-layout-0">
    <header>...</header>
    <div class="text-content">
       <p>...</p>
       <p>...</p>
       <p>...</p>
    </div>
</div>

我只设法得到了整个元素的环绕。 是否也可以仅在段落周围获得它？ 我使用我自己的模板作为扩展。

我已经尝试复制typo3\sysext\fluid_styled_content\Resources\Private\Layouts\Default.html 下的文件并将其放入我的扩展模板中，但这对我不起作用。 没有认识到变化。

Answer 1

我认为您只需要覆盖该内容元素的标准流体模板文件

EXT:fluid_styled_content/Resources/Private/Templates/Text.html
EXT:fluid_styled_content/Resources/Private/Templates/Textmedia.html

假设您使用自己的扩展名 EXT:yourext 作为“前端包”，您可以使用 TypoScript 常量styles.templates.templateRootPath来定义文件的替代路径（调整路径为您的）：

styles.templates.templateRootPath = EXT:yourext/Resources/Private/Templates/ContentElements/

Answer 2

我将添加另一个答案，基本上它涉及模板CKEditor 插件的使用，该插件随 TYPO3

模板插件将允许您在 CKEDITOR 中添加预构建的 HTML 结构，并随意添加它们，您甚至可以添加自己的预览图像。

我假设您已经添加了自己的.yaml 配置文件，如果需要，请在此处找到教程。

1）启用插件（我只是写了yaml文件的相关部分，不是完整的）

editor:
  config:
    # add the toolbargroup document if needed (e.g. default.yaml and full.yaml configurations already have it.) with the doctools group.
    toolbarGroups:
      - { name: document,  groups: [ mode, document, doctools ] }

    contentsCss:
      - "EXT:rte_ckeditor/Resources/Public/Css/contents.css"
      #add additional CSS if needed 
      - "EXT:yourext/Resources/Public/Assets/Css/rte.min.css"

     extraPlugins:
       - templates

     #Add your template definition;  It must match definitions loaded with the templates_files setting
     templates:  mytemplates

     #Add your own template file, the EXT:yourext syntax can be used
     templates_files:   
       - EXT:yourext/Resource/Public/JavaScript/templates/default.js

     #Do not remove every content
     templates_replaceContent = false

     #Keeps class from <p> and <div> and <span>  
     extraAllowedContent: "p(*);span(*);div(*)" 

2）带有模板定义的js文件： 你可以在这里找到一个例子

基本上它是这样的：

 // Register a templates definition set named "mytemplates". CKEDITOR.addTemplates( 'mytemplates', { // The name of sub folder which hold the shortcut preview images of the // templates... it is EXT:rte_ckeditor/Resources/Public/JavaScript/Contrib/plugins/templates/templates/images...I have not found yet a method to define a different one imagesPath: CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ), // The templates definitions. templates: [ { title: 'Box div text content', image: 'template1.gif', description: 'box to emphasize content.', html: '<div class="text-content">' + '<p>'+ 'Type the text here' + '</p>'+ '</div>' }] } );

附加文件：

https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-templates

https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-templates_files