Jump to content

Text Area outputting P tags


Peter Knight
 Share

Recommended Posts

I have 2 pages using the same TextArea field.

Page 1 has the following content when clicking on HTML source

<p>Web and social analytics...</p>

Page 2 has the following content when clicking on HTML source

<p>Analytics company based...</p>

The opening and closing <p> tags of Page 1 are appearing in my front-end web pages and in Lister Pro columns (back end).

Page 2 correctly renders the content and not the HTML tags.

Even when I manually delete P1's P tags, they reappear and then display in the front end.

Am I missing some obscure CK Editor setting? 

TextFormatters = HTML Entity Encoder (makes no difference)

InputfieldType = CKEditor

Content Type = Unknown

Use ACF = Yes

use HTML Purifyer = Yes

  • Like 1
Link to comment
Share on other sites

Having tried a few things, it looks like any html tag within the text area is being output. That includes P tags UL and LI tags too.

It has to be a problem with the Inputfield Type not picking up the CK editor. The copy without the P was an anomaly.

I've tried everything I could think of ...

  • changing ContentType to Markup/HTML 
  • replacing non P text with P text (problem appears)
  • pasting sample copy from other pages, sites and web pages
  • removing CK editor and reinstalling
  • setting up a second TextArea field and porting copy across
  • upgrading to 2.5.23

Luckily I'm only a day into this test project and I could blitz it and start again but I'd rather find and fix the root cause.

Link to comment
Share on other sites

If the database entries are looking like they should be, than it should not be an issue of CKEditor. One thought: Could you copy the html from the database into a texteditor and see if there are any invisible chars, that should not be there? Another way to check for this would be rewriting the html part from scratch in the backend by using a simple textarea (temp. not using the ckeditor to be sure). If the error persists it should be something which happens on calling the field and not an error in saving it.

  • Like 1
Link to comment
Share on other sites

If the database entries are looking like they should be, than it should not be an issue of CKEditor. One thought: Could you copy the html from the database into a texteditor and see if there are any invisible chars, that should not be there? Another way to check for this would be rewriting the html part from scratch in the backend by using a simple textarea (temp. not using the ckeditor to be sure). If the error persists it should be something which happens on calling the field and not an error in saving it.

No special chars found.

Ideally I'd like to reinstall the textarea module but its part of the core and can't be removed

Link to comment
Share on other sites

Guy - thanks for the advice. 

I think I'll move on and setup this site again. I have all the assets and templates so it's not going to be a huge deal to redo a days work on a new install.

Ideally I'd like to come away from the problem having fixed it and learnt something in the process but I've a few deadlines to meet.

I'll keep the site on a dev server until I get more time to investigate.

Link to comment
Share on other sites

Can you give access? What is the code where you output and see HTML tags?

Do u you have a HTML entities formatter set on that textarea? Cause that converts to entities you then see the <p> on frontend.

  • Like 1
Link to comment
Share on other sites

  • 10 months later...

@szabez Thanks so much for clarifying! It's interesting that I have that enabled. I tried disabling it and enabling it again with no luck :( My setup looks like so...

HTML Entity Encoder Enabled: https://www.dropbox.com/s/qvhus1nnfgm1vdg/Screen%20Shot%202016-02-18%20at%2011.47.30%20AM.png?dl=0

Text Area Input: https://www.dropbox.com/s/bgwzfuuuxckfflw/Screen%20Shot%202016-02-18%20at%2011.46.46%20AM.png?dl=0

Text Area Output: https://www.dropbox.com/s/dtgz3ypwlmqbq17/Screen%20Shot%202016-02-18%20at%2011.47.06%20AM.png?dl=0

Link to comment
Share on other sites

If you have any of the "Markup/HTML..." Content Types selected, then this is the normal behavior. Tags are converted to HTML Entities, so the <p> tags generated by CKeditor are also converted and show up as text. You need to remove the Text Formatter in this case.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...

Output Text Area Field (CK Editor) Additional Closing - P-Tag

text-area field with CK Editor


I don't think this exactly matches the problems discussed, but you certainly get an unexpected output in the front end code which may lead to some confusion.

It was when proof reading the output code that I noticed some slightly strange behaviour when echoing the "text/area" field in an install v3.0.61 and validating the code.

This practice allows an opportunity to catch any typos or other mistakes, like forgetting to close a "div" etc. It also helps to see how the browser parses and interprets the code too. A code editor also helps, but my human error still can cause a problem.

As most web browsers show some validation in the source (typically ctrl+u) of the web page this is an easy way to have a quick look to see if all the nesting of html elements is correct or not. In doing this it was proving difficult to locate an erroneous " </p> " tag (potential errors usually show in red).

Here is the Error:-

There appears to be an additional closing P-tag if you enclose the text area output, such as the "$page->body" in a P-tag i.e. <p>  <?= $page->body; ?> </p>.

This is not good practice and the simple remedy when using CK Editor to parse the data in the text/area is to use a "<div>" or no element at all.

Processwire rarely (if ever) errors, so it seems CK Editor may be the culprit for adding an unwanted closing P-Tag?

 

Hope this helps.

 

Link to comment
Share on other sites

  • 8 months later...

Hello guys. Even though I had quite a few projects released now under ProcessWire and never had the issue aforementioned, it seems like the learning curve never ends. I ran into the same issue as described above and was having a hard time figuring it out so I can confirm that having enabled the CKEditor for textarea field is requiring to have the textformatters removed in order to avoid seeing the HTML tags converted to text.

Admirations to you again @szabesz !

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...