HTML structure is changed when pasting HTML table

[JakobMm]

Expected behavior.

When pasting a html table I would like to retain the order of the rows

Actual behavior.

When I paste a html table, rows are displayed in reverse order and HTML structure is changed. Some tags are removed, some are added, and they are not in correct sequence

Steps to reproduce the problem.

Paste included html example into froala editor and observe html is wrong https://drive.google.com/file/d/10GveIetq-YULUt5jXdHWwN3q5kTVnDMq/view?usp=sharing

Editor version.

3.1.1

OS.

MacOS Catalina 10.15.4

Browser.

Electron 8.0.1 (Chromium 80)

Recording.

[iKuzmich]

The same issue. I am using Froala editor for Mustache templates management. Angular UI uses Froala editor for template modification and sends it to back-end which in turn should process these templates. The Mustache templates have some html combined with custom placehollders processed by Mustache engine at back-end. To keep some table structure I am trying go through some collection using the template syntax:

{{#Product.Details}}
                <tr>
                    <td colspan="1" rowspan="1">
                        <p>{{Name}}</p>
                    </td>
                    <td colspan="1" rowspan="1">
                        <p>{{Cost}}</p>
                    </td>
                    ...
                </tr>
{{/Product.Details}}

When I am pasting this piece of code into Froala in codeView mode all right until I switched to view mode or touch other controls. Looks like afer some change detection Froala formats raw structure from codeView and retrieves Mustache tags from the table and pastes it before table:

{{#Product.Details}} {{/Product.Details}}
...
                <tr>
                    <td colspan="1" rowspan="1">
                        <p>{{Name}}</p>
                    </td>
                    <td colspan="1" rowspan="1">
                        <p>{{Cost}}</p>
                    </td>
                    ...
                </tr>

I've played with htmlEditor.html.set() and some editor options:

{  htmlUntouched: true,
    mode: 'text/html',
    fullPage: true,
    htmlAllowedTags: ['.*'],
    htmlRemoveTags: ['']
}

However I didn't get success. Pleace suggest.

[ffjanhoeck]

I have the same issue as @iKuzmich. Did you find a solution ?

[iKuzmich]

I've got some workaround but not sure how it sutable for your solution. I've done it a while ago and AFAIR it was because editor doesn't produce the 'contentChanged' internally from the code view. Bellow the part of submit handler is given which allows to retrieve actual content state when editor is in code view.

if (this.editor && this.editor.codeView.isActive()) { const html = this.editor.codeView.get(); this.editor.html.set(html); this.editor.undo.saveStep(); this.form.controls['editorText'].setValue(html); }

This won't be working if you'll switch out of code view. So, that's basically it what I have for now