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

【问题标题】：Wrap paragraphs into Div for Typo3 Content Elements将段落包装到 Typo3 内容元素的 Div
【发布时间】：2020-04-15 15:41:01
【问题描述】：

我目前正在尝试在 Typo3 中的 Text 和 Text 和 Images 组件中的段落周围包裹一个 div。

当前它们看起来像这样：

<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 下的文件并将其放入我的扩展模板中，但这对我不起作用。更改未被识别。

【问题讨论】：

标签： typo3 typo3-9.x

【解决方案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/

【讨论】：

我已经检查了这些文件。而文本只给了我“{data.bodytext}”。标题和段落之间真的没有区别
我刚刚看到标题不是它的一部分，所以我可以在它周围添加 div。所以基本上它可以工作

【解决方案2】：

我将添加另一个答案，基本上它涉及使用 TYPO3 附带的 templates CKEditor 插件

模板插件可以让你在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

【讨论】：