Wrap paragraphs into Div for Typo3 Content Elements

Question

I am currently trying to wrap a div around the paragraphs in Text and Text and Images components in Typo3.

Currenlty they look like this:

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

Final Output should be:

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

I only managed to get the wrap around the whole element. Is it also possible to get it only around the paragraphs? I am using my own template as extension.

I already tried to copy the file under typo3\sysext\fluid_styled_content\Resources\Private\Layouts\Default.html and put it into my extension template, but that did not work for me. Changes were not being recognized.

Answer 1

I will add another answer, basically it involves the usage of the templates CKEditor plugin which is shipped with TYPO3

The templates plugin will allow you to add pre-built HTML structures in your CKEDITOR, and add them at will, you can even add your own preview images.

I assume that you have added your own .yaml config file, find here a tutorial if you need it.

1) Enable the plugin (I just write the relevant part of yaml file, not the full one)

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) the js file with the template definition: you can find an example here

Basically it is something like:

// 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>'
	}]
} );

additional documentation:

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

Answer 2

I think you just have to override the standard Fluid Template file for that content elements

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

assuming you are using your own extension EXT:yourext as "frontend package" you can use the TypoScript constant styles.templates.templateRootPathto define the alternative path to your files (adjust the path to yours):

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