Edit text -> save -> images doublicated

[creimers]

django===1.8.7
djangocms==3.3.3
djangocms-text-ckeditor==3.1.0
django-filer==1.2.6
cmsplugin-filer==1.0.0

After updating the cms (3.2.X --> 3.3.3) and the ckeditor (2.8.1 --> 3.1.0), I'm observing a very strange behavior.

1. The embedded image is no longer recognized as a cmsplugin.

2. When I edit text that has one or more embedded cmsplugin-filer-image plugins, the images are doublicated after saving.
   Here's a visual example.

Before editing:

After editing:

In structure mode, however, it says that there is only on image instance:

3. When editing the plugin again, only one of the two images behaves like a child image plugin is supposed to.

Here's the one that does:

And here's the one that doesn't:

When I add a fresh instance of a text plugin to the placeholder (on the same page), the described behavior can not be observed. I applies only to text with nested images that existed prior to the updates.

Likewise, when I delete all images from an existing plugin instance, save, then go and add them again, the plugin and images behave as expected again.

Have you come across this yet? Do you have any suggestions on how to tackle this?

[vxsx]

Could you check the source before saving? (preferably click source, go back, click source again)
The reason why this might happen is the <cms-plugin> tag that wraps the image is incorrectly unwrapped by ckeditor resulting in:

<cms-plugin ...>
</cms-plugin> 
<img ...> <!-- or whatever plugin markup actually is -->

instead of

<cms-plugin ...>
    <img ...> <!-- or whatever plugin markup actually is -->
</cms-plugin> 

What happens on save is you have one image that is a cms plugin, and another is just an image in the markup (because whatever is in between cms-plugin tags gets always replaced by the contents of that plugin).

I would recommend upgrading to a more recent version of djangocms-text-ckeditor, as I remember fixing those bugs

[creimers]

I'm not entirely sure what you mean by

click source, go back, click source again.

But here is what I've done:

1. Edit mode, but not edited yet

2. Edit mode, after saving

We're using a custom template here for the cmsplugin-filer-image plugin.

But it doesn't look like the <img > is outside of the <cms-pugin >, does it?

I have indeed updated djangocms-ckeditor to 3.4.0 in the meantime.

[vxsx]

Oh, I meant "Source" button in ckeditor, "Quellcode" on your screenshots

Is the problem still there after updating? Custom templates are fine.

[creimers]

Hi.
Yes, the problem is still there after updating.

Here are some more screenshots:

1. Source code before saving:

2. Source code after saving:

Hope that's what you meant!

[vxsx]

That's exactly what I meant, thanks.
So based on screenshots it looks like the problem I was describing.

Could you please show your ckeditor settings from settings.py (and if they reference any external js configuration files i'd like to check them out too) and also check if /templates/cms/plugins/widgets/ckeditor.html is overridden in your project? (e.g. which js file does it reference and does it match this one https://github.com/divio/djangocms-text-ckeditor/blob/3.4.0/djangocms_text_ckeditor/templates/cms/plugins/widgets/ckeditor.html#L10

[creimers]

settings

CKEDITOR_SETTINGS = {
    'language': '{{ de }}',
    'toolbar_CMS': [
        ['Source'],
        ['Undo', 'Redo'],
        ['cmsplugins', '-', 'ShowBlocks'],
        ['Format', 'Styles'],
        '/',
        [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',],
        [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', ],
        [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'  ],
        [ 'TextColor', 'BGColor'  ],
    ],
    'toolbar_HTML': [
        ['Undo', 'Redo'],
        [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'  ],
        [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',],
    ],
    'skin': 'moono',
    }
TEXT_ADDITIONAL_TAGS = ('iframe',)
TEXT_ADDITIONAL_ATTRIBUTES = ('scrolling', 'allowfullscreen', 'frameborder')

template

/templates/cms/plugins/widgets/ckeditor.html is NOT overridden.

[creimers]

If you're saying 'it looks like the problem I was describing', do you mean that you've come across this before?

My client is getting a little impatient on this problem, as they can't really edit any text content with images in it...

Do you think this is solvable without too much manual work?

[vxsx]

Yes, it's something that I think should've been fixed in #353

As to how solvable it is - don't know for sure.
Could you try loading your site styles inside ckeditor? Like shown here: https://github.com/divio/djangocms-text-ckeditor/blob/master/README.rst#inline-preview

I'm going to try to reproduce on a clean project, but can't promise it'll be fast

[creimers]

You mean adding these two lines to CKEDITOR_SETTINGS?

'stylesSet': 'default:/static/js/addons/ckeditor.wysiwyg.js',
'contentsCss': ['/static/css/base.css'],

[vxsx]

Yes. The css one is more important (and it has to match your project's css path).

[creimers]

For the default:/static/js/addons/ckeditor.wysiwyg.js I'm getting a 404.

The styles seem to have an effect, but the image is still not recognized as a cmsplugin-filer-image instance.

[vxsx]

Could you try putting this file under that path https://github.com/divio/django-cms-explorer/blob/master/static/js/addons/ckeditor.wysiwyg.js ?

[creimers]

I did that. I doesn't change anything...

But in another Text with images this is showing up in my console:

[vxsx]

Sadly i can't reproduce an issue on a blank project with

<div class="filer_image">
    <div class="x">
        <img alt="Screen Shot 2017-04-04 at 17.52.19.png" class="filer_image " src="/media/filer_public_thumbnails/filer_public/3f/a8/3fa8188a-2705-4859-9982-1e80afde2add/screen_shot_2017-04-04_at_175219.png__508x259_q85_crop_subsampling-2_upscale.png" title="xx" />
    </div>
    <div class="filer_image_info"><span class="title">xx</span></div>
</div>

as plugin markup. I'll investigate more

[creimers]

Is there anything else I can assist with? Would it be helpful to see another set of screenshots of cms==3.2.1 + djangocms-text-ckeditor==2.8.1?

[vxsx]

i don't think cms 3.2.1/ckeditor 2.8.1 would be helpful, too much changed since then. it would be helpful if you could try reproducing that on a reduced environment we can debug afterwards, e.g. sample project on github, but otherwise i don't know

@czpython maybe you could think of something?

[creimers]

Kind sir. I have set up an example project: https://github.com/creimers/ckeditor_bug

Unfortunately, I haven't been able to reproduce the faulty behavior so far. Leaves me a bit puzzled.

I will try to reproduce this with the original project and a clean database.

For a better understanding: Where do you think this bug most likely resides? Is it a django thing or a javascript thing?

[creimers]

I have another interesting detail to share (I hope).

I rolled back to the cms==3.2.1 and ckeditor==2.8.1 version.

When editing that image embedded in text, all I get to see is a placeholder:

Source:

Upon right clicking that placeholder, I get the CMSPlugin menu, however.

This is also strange, isn't it?

[vxsx]

The bug most likely resides in JavaScript and in the way the markup is handled by browsers. I.e. the browser encounters some markup that isn't valid - and tries to unwrap it to the best of it's ability, e.g <p><div></div></p> becomes <p></p><div></div><p></p>. So somehow the browser unwraps the <cms-plugin> tag to be separate, and it's contents are put next to it. Which would explain why it would appear twice after save - one would be real plugin, the other - hardcoded source of it.

The 2.8.1 behaviour is correct, we didn't have "inline preview" before 3.x and plugins were rendered as images. (which was a problem in itself because plugins can have arbitrary markup inside that is not compatible with how image is viewed by browsers - and so real output of text plugin would be different from what is inside it's "Source" view)

[creimers]

I'm considering to downgrade the whole system again to cms==3.2.1 and ckeditor==2.8.1, as the client really needs to work with the system. Should that be painless, or would you advise against it?

[creimers]

I did indeed downgrade the system to cms==3.2.1 and ckeditor==2.8.1. It 'solves' the problem for now.

What it also does: it gives me these empty tags in the text where there used to be the duplicated image... can that be a trace?

While downgrading works for now, it can't be a solution. I really want to keep my project dependencies up to date, as you will understand.

I was thinking: would it be helpful if I were to provide to you a stripped down dump of my database in the original cms==2.8.1 state together with a reduced project replicate? So you could experience the phenomenon on your own machine?

[vxsx]

Well 2.8.1 doesn't have any special handling for <cms-plugin> tags - so it seems like a leftover from downgrading. I thought this migration was supposed to handle that https://github.com/divio/djangocms-text-ckeditor/blob/master/djangocms_text_ckeditor/migrations/0004_auto_20160706_1339.py#L52-L58 /cc @czpython

Anything that would help us reproduce the issue would be good, since so far we couldn't

[creimers]

@vxsx Can your provide me with your bitbucket username? I prepared a repo in which this behaviour is reproducible.

[vxsx]

@creimers same as on github, vxsx

[petrklus]

Experiencing the same problem, clean install, no overrides of the text editor JS/CSS

Is there any mitigation that could be used for this?

[petrklus]

I am running on Divio, so if you guys are using the platform as well, I should be able to give you access to the stage server. Also, our editor has reported that this is happening only when more than one image is present on a page.

[vxsx]

@petrklus it might also be invalid markup of the plugin that's inlined (unclosed tag etc)
but otherwise - send me the project id via intercom, i'll take a look

[petrklus]

@vxsx Thank you very much! Just sent you a message via Intercom with staging URL where the problem can be reproduced

[vxsx]

@petrklus I answered on intercom, i believe it's fixed by the #415 in 3.5 release of djangocms-text-ckeditor

[petrklus]

@vxsx Just updated to 3.5 and still seeing the same issue (re-build the test page to be on a safe side).

On every save, each image gets duplicated

[petrklus]

@creimers does 3.5 solve your issue? It does not seem to help me

[petrklus]

Correction - 3.5 does seem to be fixing it (Just make sure you delete all old templates/static files Divio project init brings in to make sure it's really running all 3.5 html/css).

Thanks to @vxsx for assistance today.

[creimers]

@petrklus Yes, upgrading to 3.5 solved the issue for me. Also, I had invalid markup in my image plugin template.

[flaviocampiteli]

Hi peoples,

i'm upgraded to 3.5 version, but dosen't resolved this problem.
Continue to duplicate the images.

[petrklus]

@flaviocampiteli did you purge the static folder contents that had the old scripts in?

[mogoh]

This is still a problem for me.
Here are my exact steps to reproduce.

# Clone the example repository.
git clone [email protected]:django-cms/django-cms-quickstart.git

Now open django-cms-quickstart/backend/settings.py and uncomment out comment or remove the djangocms_bootstrap4 apps (line 66 to 80).

    # 'djangocms_bootstrap4',
    # 'djangocms_bootstrap4.contrib.bootstrap4_alerts',
    # 'djangocms_bootstrap4.contrib.bootstrap4_badge',
    # 'djangocms_bootstrap4.contrib.bootstrap4_card',
    # 'djangocms_bootstrap4.contrib.bootstrap4_carousel',
    # 'djangocms_bootstrap4.contrib.bootstrap4_collapse',
    # 'djangocms_bootstrap4.contrib.bootstrap4_content',
    # 'djangocms_bootstrap4.contrib.bootstrap4_grid',
    # 'djangocms_bootstrap4.contrib.bootstrap4_jumbotron',
    # 'djangocms_bootstrap4.contrib.bootstrap4_link',
    # 'djangocms_bootstrap4.contrib.bootstrap4_listgroup',
    # 'djangocms_bootstrap4.contrib.bootstrap4_media',
    # 'djangocms_bootstrap4.contrib.bootstrap4_picture',
    # 'djangocms_bootstrap4.contrib.bootstrap4_tabs',
    # 'djangocms_bootstrap4.contrib.bootstrap4_utilities',

Now we build the docker container and start everything.

docker-compose build web
docker-compose up -d database_default
docker-compose run web python manage.py migrate
docker-compose run web python manage.py createsuperuser
# of course just pick a user name and password
docker-compose up -d

• Go to http://127.0.0.1:8000/
• Log in with the just created account
• Create a new page ((any Title and Slug)
• Add Content "Text"
• Add CMS Plugin Image
• Upload any image file and select it.
• Under Advanced settings add an arbitrary caption text.
• Under Link settings add an arbitrary external URL
• Press OK
• Press Save
• Publish changes
• Edit the page again
• Edit the text again
• Press save again
• The image is now duplicated

Please confirm the reproduction and reopen the issue.

[mogoh]

@creimers could you please reopen this issue?

[creimers]

@mogoh With great joy.

[crydotsnake]

Hello @mogoh

In case you have the same issue, you can also create a new one ;)

[mogoh]

@creimers Thank you.

@crydotsnake I did not want to “clutter” the tracker with to many issues. If it is the same problem, then, I thought it would be best to not create a new issue. But different projects have different policies.

Anyway if would be great, if someone can confirm my reproduction steps.

[fsbraun]

Sorry, I can only guess: Have you tried to set TEXT_SAVE_IMAGE_FUNCTION = None in settings.py as proposed in the djangocms-bootstrap4 readme?

AFAIK djangocms-text-ckeditor has a different by-default-setting and djangocms-bootstrap4 only works with drag and drop disabled.

[mogoh]

@fsbraun sorry, I used the wrong phrase. I meant “out comment”, not “uncomment” the djangocms bootstrap4. Djangocms bootstrap4 is in the part of the django-cms-quickstart repository, but for reproduction of this issue, I needed to remove it.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This will now be closed due to inactivity, but feel free to reopen it.