Details

    • Fix Priority:
      4
    • Similar Issues:
      Show 5 results 

      Description

      When creating a web content and using the source mode of the default web content editor, it changes html structure.

      to reproduce please:

      • create web content, give it a name
      • switch editor to "source" mode
      • paste html below
      • save
      • go back to edit the same web content and switch to "source" mode
      • see changes in html structure (span tags)

      html (copied from welcome theme for convenience):
      <footer id="footer" role="contentinfo">
      <div class="column-1" id="getting-started">
      <div class="footer-column-content">
      <span class="footer-logo"></span>
      <div class="footer-box">
      <h3>Change User Data</h3>
      <a href="/group/control_panel/manage?p_p_id=2&p_p_lifecycle=0&p_p_state=maximized&p_p_mode=view">Go to MyAccount ?</a>
      </div>
      </div>
      </div>
      <div class="column-2" id="ide">
      <div class="footer-column-content">
      <span class="footer-logo"></span>
      <div class="footer-box">
      <h3>Need Help Getting Started?</h3>
      <a href="//www.liferay.com/start?wh=15">Click here ?</a>
      </div>
      </div>
      </div>
      <div class="column-3" id="social-office">
      <div class="footer-column-content">
      <span class="footer-logo"></span>
      <div class="footer-box">
      <h3>Develop Faster.</h3>
      <a href="//www.liferay.com/ide?wh=16">Click here ?</a>
      </div>
      </div>
      </div>
      </footer>

        Issue Links

          Activity

          Hide
          Ethan Bustad added a comment -

          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.

          Show
          Ethan Bustad added a comment - 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.
          Hide
          Mika Koivisto added a comment -

          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.

          Show
          Mika Koivisto added a comment - 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.
          Hide
          Jonathan Mak added a comment -

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

          Show
          Jonathan Mak added a comment - The ticket for removing the <p> tags around the CKEditor in WYSIWYG mode can be found at http://issues.liferay.com/browse/LPS-33501
          Hide
          Mika Koivisto added a comment -

          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.

          Show
          Mika Koivisto added a comment - 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.
          Hide
          Jonathan Mak added a comment -

          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!

          Show
          Jonathan Mak added a comment - 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!

            People

            • Votes:
              1 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:
                Days since last comment:
                1 year, 51 weeks, 4 days ago

                Development

                  Structure Helper Panel