TincyMCE and default <p> tags

[Gazley]

Hi there,

The TinyMCE editor appears to wrap text in <p> tags by default, unless you specify one of the other "styles" that are really edge-cases for most "normal" content.

The question is, can this behaviour be turned off so that I can return text that isn't wrapped in any tags?

Thanks!

[Gazley]

Seems this can be done in

tinymce.js but this would appear to be a global default. FYI, I want to use TinyMCE for apply inline tags to its content rendered between heading tags

in the template. Obviously, there are several ways that this could be achieved but wondered whether this has ever cropped up and been dealt with before in PW?

On reflection, probably simplest to use echo strip_tags($text, '<p>'); in the template.

[Gazley]

Jeez, I just saw the paragraph stripper! Sorry to waste the bandwidth

More senior moments. Chatting away to myself like this is the first sign of madness. I blame RoR.

[Gazley]

Actually, whilst using the Paragraph Stripper, I also turned on the HTML Entity Encoder. I figured this would be an advantage to encode apostrophes (') and such like. However, it also encodes the < > brackets and contents of the inline tags too, so they display in the rendered output. Bah. Humbug.

[Soma]

You can add additional configuration in the field setting "tinymce advanced setting" under input tab. There you have a field you can enter key:value for configuration. Like

skin-variant: silver

The value doesn't need apostrophs.

[Soma]

But then I question why you want to strip paragraphs? Usually we use the TinyMCE to have them. So can't you just simply use a textarea?

[Gazley]

Hello Mr Soma!

There are merge points in my template(s) that are already <p> tags and they have a specific style applied that I need to be there or, they are <h1-6> tags. I want the user to be able to specify the paragraph's (or heading) content and be able to apply other inline elements. So, to do this, I need TinyMCE but, TinyMCE wraps its content in <p> tags.

As far as a standard TextArea goes, the user would have to apply the inline elements themselves so this would appear to be a no-no.

[Gazley]

Wow!

You can add additional configuration in the field setting "tinymce advanced setting" under input tab. ue doesn't need apostrophs.

This was collapsed and I didn't even notice this. I need a holiday.

Thanks for pointing this out!

[Soma]

Hello Mr Soma!

There are merge points in my template(s) that are already <p> tags and they have a specific style applied that I need to be there or, they are <h1-6> tags. I want the user to be able to specify the paragraph's (or heading) content and be able to apply other inline elements. So, to do this, I need TinyMCE but, TinyMCE wraps its content in <p> tags.

As far as a standard TextArea goes, the user would have to apply the inline elements themselves so this would appear to be a no-no.

I'm officially confused. Not sure exactly how you're doing things but I feel it could be done differently. You want them to specify paragraphs but at the end don't want them to be there?

Edit: Wrapping paragraphs in <p> is the usual and wanted behaviour. If you want be able to set styles to tags, take a look at the bramus_cssextras tinymce plugin that can be installed from outside, you could use the "third party" config to install it. This will allow you to define classes used explicitly by paragraphs or headings, something not really possible with default tinymce class select. Let me know if that would be something for you and I can lead you through installing it.

[Gazley]

In certain places, for styling reasons, I have required styles in paragraph tags that are in the PHP template where the paragraph or heading tag content is user defined in Tiny. In this case, I don't want the content returned from Tiny wrapped in paragraph tags. This is all I tried to say, so to be clear, I don't want the user to specify paragraphs and then strip them off!

As far as bramus_cssextras goes, yay!

If you are kindly able to help me install this, I might be able to simplify a lot of what I want to do. Than you so much!

[Soma]

Ok download the plugin http://www.bram.us/p...xtras/#download

1. create a directory in your site folder "tinymce"

2. create a folder in it "plugins"

3. put the folder "bramus_cssextras" in there

4. put a content.css in the "tinymce" folder (this is where you can define classes or id's, like: p.lead {...}, ul.list {}, h2.red{ ... } )

5. now go to the tinymce field advanced settings

6. add the buttons to one of the button fields "bramus_cssextras_classes,bramus_cssextras_ids" if you don't need id's leave it out

7. add content.css to content_css field setting like "/site/tinymce/content.css"

8. add plugin to third party text field settings like "bramus_cssextras : /site/tinymce/plugins/bramus_cssextras" as one line

Done. You should now be able to select a class "lead" when cursor inside a <p> tag.

Have fun.

I'll create a topic for that too so anyone looking for it can find it easier.

[Gazley]

Thank you Soma! Trying it all out right now

[Gazley]

Followed the instructions but something weird happening. With "bramus_cssextras : /site/tinymce/myplugins/bramus_cssextras" added to just one TextArea field, all of the other TinyMCE TextArea fields convert to TextAreas, but the only one with the "bramus_cssextras : /site/tinymce/myplugins/bramus_cssextras" key applied is just a TextArea too.

Any thoughts?

Thanks.

[Gazley]

Soma - scratch the above - I had the path string wrong. My bad. Thanks again!

[ryan]

However, it also encodes the < > brackets and contents of the inline tags too, so they display in the rendered output. Bah. Humbug.

Sounds like you may be beyond this need, but just wanted to mention those < > brackets are probably the most important ones to encode (for security), and one of the main reasons to use the HTML entities textformatter.

But Textformatter modules are super-easy to create and make them do whatever you want. You can just copy /wire/modules/Textformatter/TextformatterEntities.module to /site/modules/TextformatterGazley.module. Then edit it and change the class name to TextformatterGazley and change the module's title (in the getModuleInfo function). Modify the format() function to do whatever you want. For instance, you could entity-encode and then just decode the < and > entities, if that was your need:

public function format(&$str) {
 $str = htmlentities($str, ENT_QUOTES, "UTF-8"); 
 $str = str_replace(array('<', '>'), array('<', '>'), $str); 
}

Decoding those < and > entities is definitely not something to do with untrusted user input though.

[Gazley]

Thanks Ryan and thanks for the warning around the potentially untrusted user. On this occasion, that particular scoundrel happens to be me.

My Wife doesn't trust me either. Apparently. Usually. jk!

@Soma,

I have the styles showing up in TinyMCE and all seems well, except, that the .class drop down list doesn't actually drop down, if you know what I mean. I must have done something wrong or not completed 100% of the task but after a close look, I can't actually see what's missing. Any thoughts?

Thanks.

[Soma]

Not sure what you mean. It's context aware so without focusing a element in the text that actually has a class defined the dropdown is disabled. If it's not otherwise it's may a your browser.

[Gazley]

I tried in Chrome and FireFox and the class drop down stays disabled even though I'm focused on the element. When I try the demo on their website, the drop down list is enabled when you click on one of the items like the 'label'.

So, it seems it's something to do with my overall configuration.

[Soma]

What have you defined in the content.css? It needs to have something in there to work.

Like: p.lead {}

Classes like: .lead{} won't work

[Gazley]

That was it! Thank you very much.

[typ9]

Jeez, I just saw the paragraph stripper! Sorry to waste the bandwidth

More senior moments. Chatting away to myself like this is the first sign of madness. I blame RoR.

Thanks, that helped me much! So easy - once you found it...