Web Content Editor changes html structure in Source Mode

It also adds random <p> </p> tags after saving from WYSIWYG mode.

What you can do to save the proper structure is to save the web content while the wysiwyg editor is in source mode. But you can't tell that to unexperienced content admins!

This is unfortunately feature of the WYSIWYG editor it reformats the html to it's liking.

Is there no way to disable that functionality?

I found this http://docs.cksource.com/CKEditor_3.x/Howto/FCKeditor_HTML_Output which might help. I asked one of our UI engineers to take a look what we can do.

Looks like this is caused by intentional CKeditor features.

<p></p> tags are apparently added to inline level elements if they are the first or last code in the editor. CKeditor does this to prevent any unexpected line-sharing before or after the inserted HTML (it assumes you want everything you enter to essentially be inserted as block-level). But Liferay already prevents this from happening - the HTML is inserted as a portlet (wrapped in <div> elements). So turning off this behavior by default might make sense. Changing this behavior simply requires adding "config.autoParagraph = false;" to the config.js file.

Empty inline-level elements are simply removed by default to prevent you from accruing empty elements by accident that you don't even notice. (They have a wontfix ticket on this: http://dev.ckeditor.com/ticket/8782, and a similar one at http://dev.ckeditor.com/ticket/2253.) One way to get around this is to add an HTML comment inside the span - the editor won't delete it, because it's not empty, but it will still appear the same. It may be possible to change this behavior within config.js, but I haven't yet been able to find a way.

Right now, config.js is unversioned, so we'd have to add it to the repo if we wanted to change any values by default.

Oh, and changing the editor back to FCKeditor style wouldn't fix these issues - it would just change the way the editor formats line breaks and white space when you look at the source. I do think the FCKeditor way is a lot more intuitive. Changing this would require modifying and versioning config.js as well.

Thanks for checking this Ethan. We have portal-web/docroot/html/js/editor/ckeditor_diffs/ckeditor.jsp which I believe is used instead of config.js or is used in addition to it to change the editor config. I think it could be configured there.

The ticket for removing the <p> tags around the CKEditor in WYSIWYG mode can be found at http://issues.liferay.com/browse/LPS-33501

Thanks Jon. I'm going to close this ticket as won't fix because that is what CKEditor does. If CKEditor at some point introduces an option to modify that behavior then this can be reevaluated.

Thank you for contacting Liferay! We appreciate your help in making our product better. After some analysis and review of the issue of removing tags without content:

<span class="footer-logo"></span>

we have discovered that this is a CKEditor bug and they have marked these issues as "Won't Fix" tickets. We are going to proceed and resolve this Liferay ticket as well. If you still feel this issue is a bug, please feel free to reopen the issue and we can revisit it. If you feel that this issue is a limitation with the CKEditor, you can set your Liferay instance to use TinyMCE or FCKEditor as your WYSIWYG editor via portal.properties.

##
## Editors
##

    #
    # You can configure individual JSP pages to use a specific implementation of
    # the available WYSIWYG editors: bbcode, ckeditor, ckeditor_bbcode,
    # ckeditor_creole, fckeditor, simple, tinymce, or tinymce_simple.
    #
    editor.wysiwyg.default=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.announcements.edit_entry.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.asset_publisher.configuration.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.blogs.configuration.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.blogs.edit_entry.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.bookmarks.configuration.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.calendar.configuration.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.calendar.edit_event.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.document_library.configuration.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.invitation.configuration.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.journal.configuration.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.journal.edit_article_content.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.journal.edit_article_content_xsd_el.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.login.configuration.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.mail.edit.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.mail.edit_message.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.message_boards.configuration.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.message_boards.edit_message.bb_code.jsp=ckeditor_bbcode
    editor.wysiwyg.portal-web.docroot.html.portlet.message_boards.edit_message.html.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.portal_settings.email_notifications.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.shopping.configuration.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.wiki.edit.creole.jsp=ckeditor_creole
    editor.wysiwyg.portal-web.docroot.html.portlet.wiki.edit.html.jsp=ckeditor
    editor.wysiwyg.portal-web.docroot.html.portlet.wiki.edit.mediawiki.jsp=simple

Thank you for your support!