Richeditor - quote marks in alt tags wipes the content

[rejuvenatedigital]

Hi,

I've just spotted an issue where I have a repeater group that contains a richeditor field, when a user adds in an image with an alt tag that contains a quote mark for example

Picture of a "example"

The Froala editor then converts the quote marks to a html entity. This then causes a problem when the reapeater group is saved in json and therefore causes the content to fail to load.

This only appears to be happening on a locale that isn't the default one.

Hope this helps.

Many thanks, Danny

[LukeTowers]

Why would an HTML entity inside of a string cause problems in JSON? Could you post an example of your field configuration, the content you put into the Froala editor, and the generated JSON?

[rejuvenatedigital]

Hi Luke please see attached my field config, froala content and generated JSON. generated_json.txt content_fields.txt froala-markup.txt

[LukeTowers]

@rejuvenatedigital do it inline with the code syntax of three backticks surrounding each block of code please. I don't want to have to download and look through separate files.

[rejuvenatedigital]

@LukeTowers sorry Luke, thought it would be easier to view as files.

blocks:
    name: Content Blocks
    icon: icon-align-left
    fields:
        content_blocks_section:
            label: Content Block
            type: section

        content:
            label: Content
            type: richeditor

cards:
    name: Cards
    icon: icon-th-large
    fields:

        content:
            label: Content
            type: richeditor

<p>Rejuvenate Test</p>

<p><img src="/storage/app/media/1_3_320x300.jpg" style="width: 300px;" class="fr-fic fr-dib" alt="Image &quot;example&quot;"></p>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

{"name":"","slug":"bug-test","tag_line":"","description":"\r\n","hero_content":"\r\n","hero_image_alt":"","content":[{"content":"<p>Rejuvenate Test<\/p>\r\n\r\n<p><img src=\"\/storage\/app\/media\/1_3_320x300.jpg\" style=\"width: 300px;\" class=\"fr-fic fr-dib\" alt=\"Image &quot;example&quot;\"><\/p>\r\n\r\n<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<\/p>\r\n","_group":"blocks"}]}

[LukeTowers]

@rejuvenatedigital I don't see the problem, pasting the JSON into https://jsonlint.com/ says that it's valid JSON.

[mjauvin]

@rejuvenatedigital can you create a github with your plugin code for this so we can test easily?

[mjauvin]

I tried to reproduce and it's working fine for me.

Can we see the definition for the Model using this repeater field?

[rejuvenatedigital]

@LukeTowers I'm aware that the json is valid, the problem is when the JSON is used to generate the fields for the repeater group.

@mjauvin please find the plugin code here https://github.com/rejuvenatedigital/Property-Plugin-Example

[mjauvin]

Try renaming the "content" field in models. property/fields.yaml to something else, I think it interferes with the field group named content for the translatable array

-- Marc

On Tue, Feb 26, 2019, 04:55 rejuvenatedigital notifications@github.com wrote:

@LukeTowers https://github.com/LukeTowers I'm aware that the json is valid, the problem is when the JSON is used to generate the fields for the repeater group.

@mjauvin https://github.com/mjauvin please find the plugin code here https://github.com/rejuvenatedigital/Property-Plugin-Example

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rainlab/translate-plugin/issues/448#issuecomment-467373535, or mute the thread https://github.com/notifications/unsubscribe-auth/AB65vjv1ROLOTsJjTwLkFhXXDlJZiAaJks5vRQSLgaJpZM4bHy5Y .

[rejuvenatedigital]

@mjauvin just given this a try by renaming the field to information but the problem still occurs

[andy-laravel]

Just to clarify, this issue is still unfixed. Here's some screenshots of the issue:

Adding a new image in a locale that is not default with alt tag text with quotes: Save entry.

Select that non-default locale that you saved above: repeater block disappears and will not show in the admin area. It does exist in the DB and it does show front end, but not in Admin area

[LukeTowers]

@mjauvin could you try to reproduce it?

[mjauvin]

I was able to reproduce this.

When doing the same for the DEFAULT locale, the quoted part gets removed when saving and reopening... so someone at some point added code to remove characters that were creating problems somehow... and this has not been done for the translated fields.

[mjauvin]

Note: the issue is present with a RichEditor widget outside of a repeater as well.

[mjauvin]

This is a bug in Froala's image plugin, most likely.

@daftspunk can you take a look in Froala's image plugin code for this?

[daftspunk]

This has been fixed in v3.1 since value juggling is no longer used.

• Link to the upgrade guide
• Link to multisite documentation

If you still need help, feel free to get in touch with the support desk for assistance: https://octobercms.com/contact