aimeos / ai-admin-jqadm

Aimeos e-commerce Vue.js+Bootstrap based admin interface
https://aimeos.org
GNU Lesser General Public License v3.0
184 stars 43 forks source link

CKEditor adds white space after <br> tag on each save action #151

Closed rowild closed 4 years ago

rowild commented 4 years ago

Environment

  1. Version (e.g. 2020.07)
  2. Integration (TYPO3, but probably not relevant)
  3. System (Mac)

Describe the bug In any category or product (or any other) text field, white space is added adter a soft-break (
).

To Reproduce Steps to reproduce the behavior:

  1. Go to e.g. "Products" -> "Texts" and create a text item of any kind
  2. Enter some text, create a soft break (
    , Shift+Return) nd write some more text
  3. Switch to CKEditor's "Source" view
  4. Click save.
  5. Switch again to CKEditor's "Source" view
  6. Click save again
  7. Repeat steps 5 and 6 several times.

Expected behaviour Text in source view should not change in any way.

Video The zip file contains a mp4 video that demonstrates the behaviour.

Additional context I strongly assume that this is not at all a problem with Aimeos. However, I would like to ask for feedback and opinions here before heading over to CKEditor. Thank you!

rowild commented 4 years ago

BTW: This affect ALL text fields of a record and can also be seen, when using var_dump on an object, e.g. var_dump($productItem). Screen Shot 2020-11-04 at 12 51 19

aimeos commented 4 years ago

Seems to be a problem of CKEditor but don't know if it can be suppressed by a configuration setting. If not, they may refuse the fix it in CKEditor4 but we want to switch to CKEditor5 in the next version nevertheless.

rowild commented 4 years ago

It turns out that this behaviour can be configured. In "ai-admin-jqadm"'s vue-component.js file, the "mounted" function should be adapted like this:

mounted: function() {
  this.instance = CKEDITOR.replace(
    this.id, {
      on: {
        instanceReady: function( ev ) {
          // Suppress the addition of white-space to soft breaks on each save.
          this.dataProcessor.writer.setRules( 'br', {
            indent: false,
            breakBeforeOpen: false, // instead of "true"
            breakAfterOpen: false,
            breakBeforeClose: false,
            breakAfterClose: false // instead of "true"
          });
        }
      },
      extraAllowedContent: Aimeos.editortags,
      [...]
    });
    this.instance.on('change', this.change);
  },

CKEditor 5 seems to handle this scenario differently, how I couldn't yet figure out. But I will update as soon as I know, and maybe then we can decide, if a PR makes sense?

aimeos commented 4 years ago

If you can provide a PR, we are happy to merge it

rowild commented 4 years ago

I have it running on my project now and would prefer to test it for some time. I have no idea yet, if that configuration has any side effects... I'll come back in time, when I am more sure, if that is ok.

rowild commented 4 years ago

Since this is an extremely annoying behaviour, I added a PR. Thank you!