Really I’m motivated to write a tutorial on how to resolve common issues that might break the nice editor. The nICE editor is pretty sensitive to code errors. It’s doing a pretty complex job, so this isn’t’ really surprising. But I do want to document some of the easy fixes.
Some of the factors that I’m aware of are:
unclosed HTML tags
malformed HTML
HTML comments
sometimes putting elements inside a snippet can resolve issues, but I can’t remember the case for this.
A good general troubleshooting strategy is to duplicate the page and try to narrow down the issue by removing sections until the page is displaying properly in nice and then reviewing those sections to see if fixes can be made.
Has anybody else had issue with the nICE editor that can be resolved by yourself? Any common gotchas? Any good strategies for resolving nICE issues?
Editor Menu at the bottom of the page that displays “Save” and “Exit nICE” buttons doesn’t show. This is due to missing or unclosed html “body” tag.
Pop-up error message. ie:
This page contains the following errors: error on line 17 at column 8 opening and ending tag mismatch: p line 0 and body.
In this error the ending html “p” tag is missing. It also indicates that the body tag is missing. Any time there is an error message it always shows the parent tag as missing as well. This usually is not the case.
Also note that after closing the error message the “Exit nICE” button in the bottom menu disappears. Reloading the page will bring it back however any changes will be lost.
Current items you can’t edit in nICE:
Images
Site Information module content
Lists - you can edit list items but you can’t remove or add items.
Editing issues
When hitting return at the end of a paragraph to add a new paragraph the html “p” tags are incorrectly added causing the “p” tags to look like this - <p>original content<p>new content</p></p>.
When hitting return in the paragraph to add a line break it adds a large space. If left and saved your paragraph will look like this - <p>original content<p><br /></p>original content</p>. however if you click in the area of the space created when you hit return it will collapse and the end result removes the “p” tags surrounding the break tag. The end result is - <p>original content<br />original content</p>.
Editing text with format tools adds a “span” tag round the text. The “Clear Formatting” tool will only remove formatting in a span. Any formatting in any other tag will not be touched. It doesn’t matter if the formatting is via a class or style tag if it is not on the “span” tag nothing will happen.
List items text can be edited but that’s about it. Hitting return to add another list item instead just adds a “p” tag in your “li” tag. You also can’t delete an item in your list, all it does is delete the text, but you still have the dot or number.
Okay I have a few:
NICE is not compatible with HTML comments … so avoid comments <!-- comment -->Screenshot by Lightshot
In general … you have to be super careful with your html … Below are some examples pointed out by support to me that may help others … (hard to find but obvious once pointed out ) …
with attribute name redefined error the solution for me was that the input in form shouldn’t include two “names” (Screenshot by Lightshot)
and finally the most important tip from support: double-check your code (the code editor in the admin shows where the code is invalid and the error message indicates the line with the error)
Thank you everybody for pitching in. I’ve summarized all of the above into the following article for the docs. @Adam.Wilson Please edit and add as you see fit.
Troubleshooting
The nICE editor is doing a pretty complex job translating pages, modules, templates, snippets, into a live editable page that can be written back to the server.
Because of this, errors can occur that can cause nICE to not work properly in a page.
Below are some tips and first-steps to troubleshoot pages that aren’t displaying properly in nICE.
Items that can’t be edited in nICE:
Images
Site Information module content
Lists - you can edit list items but you can’t remove or add items.
Some issues that can cause nICE not to work properly:
Unclosed HTML tags
HTML errors
HTML comments
General Troubleshooting strategies:
Double-check your code in the admin code editor. The code editor in the admin shows where the code is invalid and the error message indicates the line with the error.
Replace HTML comments with liquid comments. Instead of <!-- commented out --> we can use the liquid equivalent {% comment %} commented out {% endcomment %}. More on the official page.
Test by omission. If it’s not clear where an issue might be, a good strategy to narrow down where the problem might be coming from is to omit each section of the page and test if nice starts working. To do this create a duplicate of the page, and then remove sections of the page one at a time and test if nICE starts working.
Specific errors:
Editor Menu at the bottom of the page that displays “Save” and “Exit nICE” buttons doesn’t show.This is due to missing or unclosed html “body” tag.
"This page contains the following errors: error on line 17 at column 8 opening and ending tag mismatch: p line 0 and body."In this error the ending html “p” tag is missing. It also indicates that the body tag is missing. Any time there is an error message it always shows the parent tag as missing as well. This usually is not the case.
Also note that after closing the error message the “Exit nICE” button in the bottom menu disappears. Reloading the page will bring it back however any changes will be lost.
The page you are editing in nICE must be attached to a content template.
If you choose “Don’t Use Template” on your page and add the standard html structure, like… <html> <head></head> <body> Content </body> </html>
After you edit in nICE it will remove all html tags before, after and including the “body” tags leaving only the content of the page.
attribute construct errors - it generally means something is wrong with your html
classes shouldn’t start with space
invalid HTML
ul shouldn’t be in the tag p
attribute name redefined - the solution is that the input in form shouldn’t include two “names”
When hitting return at the end of a paragraph to add a new paragraph the html “p” tags are incorrectly added causing the “p” tags to look like this - <p>original content<p>new content</p></p>.
When hitting return in the paragraph to add a line break it adds a large space. If left and saved your paragraph will look like this - <p>original content<p><br /></p>original content</p>. however if you click in the area of the space created when you hit return it will collapse and the end result removes the “p” tags surrounding the break tag. The end result is - <p>original content<br />original content</p>.
Editing text with format tools adds a “span” tag round the text. The “Clear Formatting” tool will only remove formatting in a span. Any formatting in any other tag will not be touched. It doesn’t matter if the formatting is via a class or style tag if it is not on the “span” tag nothing will happen.
List items text can be edited but that’s about it. Hitting return to add another list item instead just adds a “p” tag in your “li” tag. You also can’t delete an item in your list, all it does is delete the text, but you still have the dot or number.
Ah, thanks so much @Alex_B_Centrifuge. I actually have most of this article already written up… just running some further tests and waiting on some info from the team.
But this is great and I’ll integrate what you have too and link back to this post as a resource.
I’ve created an article on nICE along with a troubleshooting section consolidating the above.
@Alex_B_Centrifuge this does deviate from your write-up above as I have firstly, tried to create an article on what exactly nICE is and does and secondly, troubleshooting steps based on that description.
So I think some things aren’t needed (in the context of a documentation article) and with the description of what nICE is and does further clarifies some issues users may encounter. And some other things listed here are probably more bugs/shortcomings in nICE and probably should be addressed as such.
I’ve linked out to this forum post as well though, as all this info makes sense in the context of the forum and is super helpful.
But, as always, I’m open to further suggestions.
@Rhatch, @Adele_Taylor I’ve added contributor profiles for you both and assigned you to this documentation article. Please let me know if this is ok or not and if you have any further feedback as well.
I’d like an option to EXCLUDE NICE altogether on client websites.
We simply have too many types of ‘untrained’ customer admin users with varying levels of HTML editing capabilities and desire. And, using the admin facing WSYWYG editors to manipulate content adds another level of complexity to the fidelity of the HTML that impacts NICE behaviour.
My question for the team:
Beyond configuring custom admin menus that explicitly exclude the NICE access link, is there a way to ‘disable’ NICE on a site altogether?
Hi @Alex_B_Centrifuge you’re right, that helps ‘hide’ the link to the NICE function, but I think I was stuck on disabling the feature altogether. Now that I ponder about it some more, simply hiding NICE in the menus may do the trick. Thanks for your note, much appreciated!
Just a reminder that if you update the admin menus, you have to update it EVERY time treepl push out an update, I would strongly suggest user admin roles rather than custom admin menus
Hi @lee.relianceit , understood. Another nuance we discovered in our exploration is that once a custom admin menu is created, it is not updated with newly created Custom Modules, it must be manually updated with each addition/deletion. As you’ve suggested, we’re continuing with our consideration of specific user admin roles. Thanks!
