How to add class to <p> wrap tag on textfields?

[douglas81]

Hi PW Boffins,

So you know the way CKEditor adds <p> wrap-tags to the output. I'm actually okay with that and it's almost always exactly what I want it to do. However, one thing that has come up a couple of times is where I'd like to add a class style attribute to those tags, e.g. <p class="blah">. Is there a simple way of doing this?

Lets say I have a field called "summary". Maybe I want the wrap tag to say <p class="summary">, rather than just <p>.

In other words, what's the best way to add a style class to the auto p wraptag which reflects the name of the field from which it was created?

Douglas.

[LostKobrakai]

Maybe there is a way, but wouldn't it be way easier just wrapping the output of this field in something with a class and use this ".summary p{ }"?

[douglas81]

Yes, normally that's exactly what I'd do. But on occasion, it would be nice to target that particular block element without having to wrap it.

[dazzyweb]

You can switch off 'ACF' in your CK Editor settings which will stop the editor stripping any markup

If you just want to allow 'class' then go to CK Editor settings for your field and find 'Extra Allowed content' and enter in there the following:

*(*)

This should allow you to put classes without them being stripped.

[DaveP]

There's an entry on the CKEditor forum which looks like it should be what you need, although I haven't tried it.

[Mike Rockett]

It's actually quite straightforward. In your field settings, under Input, add a reference to a JS Styles Set:

mystyles:/site/modules/InputfieldCKEditor/mystyles.js

If you're using the blank profile, that file won't exist. If so, you'll need to copy the one from wire/modules/Inputfield/InputfieldCKEditor.

All that's left is to add the style you want for your paragraphs.

Your file should look like this:

CKEDITOR.stylesSet.add( 'mystyles', [ 
    { name: 'Inline Code', element: 'code' }, 
    { name: 'Inline Quotation', element: 'q' },
    { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },
    { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },
    { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } }, 
    { name: 'Small', element: 'small' },
    { name: 'Deleted Text', element: 'del' },
    { name: 'Inserted Text', element: 'ins' },
    { name: 'Cited Work', element: 'cite' }

    // plus your style
    { name: 'Summary', element: 'p', attributes: {'class': 'summary'} }
] );

Then, you can select your whole paragraph and choose the Summary style for it.

Edit: Might also be a nice idea to add a CSS file to apply the style in the editor too.

Edit: Hold up, I see you're wanting this to happen automatically for the name of the field... Didn't pick that up, sorry. That said, this is cool for a targeting specific paragraphs.

[Soma]

Summary belongs to it's own field.

[johannes]

You could use a custom Textformatter module for this. I quickly hacked together this one, nothing perfect as it replaces all occurrences of opening p tags, but you could spice it up using regex etc. I gave it a quick test – it does it's job. This should get you started:

<?php

class TextformatterAutoClass extends Textformatter{

	public static function getModuleInfo() {
		return array(
			'title' => 'AutoClass Textformatter', 
			'version' => 100, 
			'summary' => "Adds a class to the automatic p wraptag of CKEditor" ,
			'author' => 'Johannes Dachsel'
		); 
	}

	public function formatValue(Page $page, Field $field, &$str) {		
		$str = str_replace("<p>", "<p class='summary'>", $str);
		return;
	}	
}

[LostKobrakai]

This fills in the field name automatically and the return shouldn't be necessary as the function is at it's end and does not return anything. 

	public function formatValue(Page $page, Field $field, &$str) {		
		$str = str_replace("<p>", "<p class='{$field->name}'>", $str);
	}

[douglas81]

Sorry for the silence. I've been offline since yesterday.

Thanks everyone for your input. I'm sure these will all come in handy for various things.

I think the TextFormatter route is definitely the way to go in this instance. Not too concerned about it adding for every p tag within the textfield, as generally when I need this functionality, it's when there is only one paragraph of text.

Thanks again!