CKEditor formats HTML sources and thereby breaking styles

velialiev commented 2 years ago

Type of report

Bug

Provide detailed reproduction steps (if any)

Create MS Office Word file, add simple bulleted list
Copy it into CKE. Everything looks just fine at this step
Save HTML from CKE by using "Sources" tab or data provided by CKE lib

Expected result

At this step we expect that this Sources will look exactly the same as it looked at CKE

Actual result

Some styles turn out to be broken instead

The thing is that styles applied to the list used word-wrap: pre/prewrap and thats why we must preserve code formatting. Instead CKEditor just beautifying/formatting sources before it gives them to us. This behavior leads to the fact that sources and CKE preview can be rendered in different ways

Other details

You can use this HTML markup to make sure that code formatting can affect render result. This markup generated by CKE Try to render it in it's original format and then beautify it by any tool. You can even paste it to the CKE Source, then switch to preview mode and then go to the Source again. You will see that CKE changed code formatting while still rendering not formatted one in preview

Markup example

`

В каких форматах представлены текстовые документы : обычный текст, HTML, MD, что-то иное? (Понятия не имею, я в этом не разбираюсь.)
В каких кодировках приходят исходные документы? (В разных.)
В какую кодировку нужно преобразовать документы? (В самую удобную и универсальную.)
На каких языках написан текст в документах? (Русский и английский.)
Откуда и как поступают текстовые документы: по почте, с сайтов, по сети, как-то иначе? (Это неважно. Поступают отовсюду, но мы их складываем в одну папку на диске, нам так удобно.)
Каков максимальный объём документа? (Пара десятков страниц.)
Как часто появляются новые документы, например, сколько максимум документов может поступить за час? (200–300 в час.)
С помощью чего сотрудники просматривают документы? (Notepad++.)

`

Browser: Firefox 102.0.1
OS: macOS Monterey 12.2
CKEditor version: 4.15.1
Installed CKEditor plugins: { 'a11yhelp' : 1, 'about' : 1, 'basicstyles' : 1, 'bidi' : 1, 'blockquote' : 1, 'clipboard' : 1, 'codesnippet' : 1, 'colorbutton' : 1, 'colordialog' : 1, 'contextmenu' : 1, 'copyformatting' : 1, 'dialogadvtab' : 1, 'div' : 1, 'elementspath' : 1, 'enterkey' : 1, 'entities' : 1, 'filebrowser' : 1, 'find' : 1, 'flash' : 1, 'floatingspace' : 1, 'font' : 1, 'format' : 1, 'forms' : 1, 'horizontalrule' : 1, 'htmlwriter' : 1, 'iframe' : 1, 'image' : 1, 'indentblock' : 1, 'indentlist' : 1, 'justify' : 1, 'language' : 1, 'link' : 1, 'list' : 1, 'liststyle' : 1, 'magicline' : 1, 'maximize' : 1, 'newpage' : 1, 'pagebreak' : 1, 'pastefromword' : 1, 'pastetext' : 1, 'pastetools' : 1, 'preview' : 1, 'print' : 1, 'removeformat' : 1, 'resize' : 1, 'save' : 1, 'scayt' : 1, 'selectall' : 1, 'showblocks' : 1, 'showborders' : 1, 'smiley' : 1, 'sourcearea' : 1, 'specialchar' : 1, 'stylescombo' : 1, 'tab' : 1, 'table' : 1, 'tableselection' : 1, 'tabletools' : 1, 'templates' : 1, 'toolbar' : 1, 'undo' : 1, 'uploadimage' : 1, 'wsc' : 1, 'wysiwygarea' : 1, 'youtube' : 1 }

velialiev commented 2 years ago

Probably releated issue: https://github.com/ckeditor/ckeditor4/issues/4753 (but lists work just fine in CKE preview. They broke only when i try to render sources outside of the CKE)

sculpt0r commented 2 years ago

Hi @velialiev,

You can use this HTML markup to make sure that code formatting can affect render result. This markup generated by CKE Try to render it in it's original format and then beautify it by any tool. You can even paste it to the CKE Source, then switch to preview mode and then go to the Source again. You will see that CKE changed code formatting while still rendering not formatted one in preview

I used that advice, and FF (103) seems to display that content correctly - but with 4.19.1. Could you update CKEditor to the newest version? The 4.15.1 was released two years ago and we've made a lot of improvements in many different areas since that time. Let me know about the results.

velialiev commented 2 years ago

Hi @velialiev,

You can use this HTML markup to make sure that code formatting can affect render result. This markup generated by CKE Try to render it in it's original format and then beautify it by any tool. You can even paste it to the CKE Source, then switch to preview mode and then go to the Source again. You will see that CKE changed code formatting while still rendering not formatted one in preview

I used that advice, and FF (103) seems to display that content correctly - but with 4.19.1. Could you update CKEditor to the newest version? The 4.15.1 was released two years ago and we've made a lot of improvements in many different areas since that time. Let me know about the results.

Hi, @sculpt0r, updating ckeditor.js, pastefromword and pastefromgdocs to 4.19.1 fixed the issue. Thanks alot, you saved alot of time for us)

We still have a problem, but it hardly related to CKE. When I update CKE using this web tool - https://ckeditor.com/ckeditor-4/download/, I face the same issue described in the topic. However, if I manually update ckeditor.js and pastefromword/pastefromgdoc plugins (cause they throw an error due to incompatibility with new cke version) everything works fine. I think that some plugin brokes this behavior and when I update CKE manually it just doesn't work due to incompatibility and thats why manual update works while automatic not.

Probably this issue even doesn't related to CKE version and caused by some plugin

sculpt0r commented 2 years ago

Probably this issue even doesn't related to CKE version and caused by some plugin

Do you mean third-party plugins? If so - then we can't help 🤔 Anyway, I'm happy that the original issue is solved. I'm closing this issue due to maintenance reasons.

If you find that any plugin (maintained by CKSource) causes a bug - feel free to open another issue.

ckeditor / ckeditor4