Issues with Code View in rich text editor (Froala) in Kentico 13

Tameside MBC Development asked on January 2, 2024 13:20

We're upgrading our site from Kentico 10 to Kentico 13, and in the page builder we've noticed an issue with the rich text editor widget's Code View. We're not sure if this is Froala or Kentico itself, but I think for at least one issue it's Kentico.

The first issue is the URLs changing in Code View. Whenever Code View is switched to all of the URLs in page change to a strange syntax with a GUID in it beginning with '/cmsctx/pm'. For anyone working with the HTML they're distracting, and don't give much indication of where they're supposed to go. If we go into edit a link in Froala and then save, it goes back to the expected link in Code View until the page is saved. Is there any way to stop the links changing in Code View?

The second issue is the saving of the code. When switched to Code View, if we click 'Save' once changes are made then the code doesn't save, and the page reverts to the previously saved version. We have to switch from Code View back to the WYSIWIG editor and then save. But it's easy to forget and lose any HTML edits we were making. Is this a known bug, and is there a way to fix it?

Correct Answer

Tameside MBC Development answered on February 14, 2024 15:29

I've had some time to look into this, and I think I've found what's happening if anyone has this same behaviour.

It's the default settings for Froala when the toolbar is permanently shown, so you have to click the code view button to apply the changes. I don't think it's a very intuitive way of doing things, I've already lost changes a few times during testing. I might see if I can put a bit of custom JavaScript in there to save any changes, but until then it's the way Froala works.

0 votesVote for this answer Unmark Correct answer

Recent Answers

Juraj Ondrus answered on January 3, 2024 06:01

What version and hotfix are you using exactly?
The first issue is by design - if you are using Preview mode, the links are converted into the preview mode links. However, on the live site, the correct link is used.
The second issue - what are the exact steps to reproduce? What is the HTML code? If the HTML code is invalid, there is some HTML-fixing going on plus in hotfix no.92 HTMLSanitizer was introduced so maybe you are using some forbidden HTML tags.

0 votesVote for this answer Mark as a Correct answer

Tameside MBC Development answered on January 9, 2024 10:18

Sorry for the late reply.

We're using v13.0.115.

For the second issue, to reproduce:

In a rich text widget click the 'Code View' button
Make a change in the code
Click 'Save'.
The page reloads and the changes made in the code are not applied (or saved).

If you make the change and switch back to the WYSIWIG mode, the changes will be saved. It appears to be any change, even a character changing in a paragraph, so appears to be a bug rather than a HTML sanitization feature.

For the changing of links in the code view, is there a way to turn off this off? I'm guessing not, but thought I'd ask.

0 votesVote for this answer Mark as a Correct answer

Juraj Ondrus answered on January 9, 2024 13:41

I think I got it now. When editing in the code view, you need to click the "Apply" button in the upper right hand side corner. Sample screenshot link. I hope it helps!

0 votesVote for this answer Mark as a Correct answer

Tameside MBC Development answered on January 10, 2024 18:14

Thanks for getting back to me. I've had a look at the code view and I don't seem to have the apply button where you do, screenshot here: Is this applied in a later hotfix than the one we currently have? Or am I missing something?

0 votesVote for this answer Mark as a Correct answer

Juraj Ondrus answered on January 11, 2024 05:58

I am using hotfix 132 and the Froala editor was updated in the latest one, no.133. Also your screen shot looks different - you have there some toolbar. IS there any custom Froala configuration in place? Or, have you customized the default rich text widget? What are the steps to reproduce this using the sample Dancing Goat project, please?

0 votesVote for this answer Mark as a Correct answer