对于 Typo3 内容元素，将段落换行到 Div

Question

我目前正在尝试将 div 环绕在 Typo3 中的文本和文本和图像组件中的段落。

目前它们看起来像这样：

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

最终输出应该是：

<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 作为 "frontend package"，您可以使用 TypoScript 常量 styles.templates.templateRootPath 来定义文件的替代路径（调整您的路径）：

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

Answer 2

我再补充一个答案，主要是涉及TYPO3自带的templatesCKEditor插件的使用

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

我假设您已经添加了自己的 .yaml 配置文件，find here a tutorial if you need it.

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文件：you can find an example here

基本上是这样的：

// 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

对于 Typo3 内容元素，将段落换行到 Div

Wrap paragraphs into Div for Typo3 Content Elements

typo3

typo3-9.x