getContents not returning css style inline

[approv]

First of all, this is an awesome editor and thank you for the great work.

Version

I use the latest min.css and min.js

Use Chrome Version 112.0.5615.49 (Official Build) (x86_64)

Additional context

editor.getContents only return the html code: <p style="margin-right:-0.75pt;margin-left:4.5pt;"><strong><a href="https://lendapi.com">lendapi</a></strong></p><p style="margin-right:-0.75pt;margin-left:4.5pt;"><span style="font-size:36px;"><span style="color:#ff0000;"><strong>Hi there</strong></span></span></p><p style="margin-right:-0.75pt;margin-left:4.5pt;">this iis a test.</p><p style="margin-right:-0.75pt;margin-left:4.5pt;">Great@@</p><ol><li>line1</li><li>line2</li><li>line3</li></ol><table><thead><tr><th><div>header1</div></th><th><div>header2</div></th><th><div>header3</div></th><th><div>header4</div></th><th><div>header5</div></th></tr></thead><tbody><tr><td><div>1</div></td><td><div><br /></div></td><td><div><br /></div></td><td><div><br /></div></td><td><div><br /></div></td></tr><tr><td><div><br /></div></td><td><div>2</div></td><td><div><br /></div></td><td><div><br /></div></td><td><div><br /></div></td></tr><tr><td><div><br /></div></td><td><div><br /></div></td><td><div>3</div></td><td><div><br /></div></td><td><div><br /></div></td></tr><tr><td><div><br /></div></td><td><div><br /></div></td><td><div><br /></div></td><td><div>4</div></td><td><div>greeat</div></td></tr></tbody></table>

The table border style and header style are not in the html code. This is not good I want to convert the html to pdf file. Without the table style, the PDF file looks different than the one in the editor.

Is it possible to add the style when I call getContents?

<table style="-webkit-user-drag:none;overflow:visible;font-family:'Helvetica Neue';font-size:13px;color:#333333;border:1px solid rgb(204, 204, 204);width:1516px;max-width:100%;margin:0px 0px 10px;border-spacing:0px;border-collapse:collapse;table-layout:auto !important;"><thead style="box-sizing:border-box;-webkit-user-drag:none;overflow:visible;font-family:inherit;font-size:inherit;color:inherit;border-bottom:2px solid rgb(51, 51, 51);"

The table inline style is just one example, ideally I want to have all element style returned inline.

Maybe you can add a new function named getHtml() if this new change affects others.

Thanks again

[JiHong88]

You can use this option.

attributesWhitelist: {
    "all": "style"
}

[AbdiasMichael]

@JiHong88 Great work on the editor. I'm also facing this issue. Even after adding

attributesWhitelist: {
    "all": "style"
}

the getContents() function does not return the underlying css. For example, on adding a horizontal dashed line, the html tag that is generated is <hr class="__se__dashed">. On using getContents() and using the html elsewhere, it is displayed as a solid line because the css class '__se__dashed' is not part of the html.

[aParr0t]

Hi, I had the same issue. In the editor the images would be centered, but when I got the html using getContents() and rendered that html, the images would lose all their styling regarding alignment.

What worked for me was copying this css and using it in my app. I had to copy over this css, and give the div, in which I render the copied html, the classname "sun-editor-editable".

Maybe this isn't the cleanest solution, but it works for now.

[Orgoth]

@JiHong88 @AbdiasMichael I could trace this issue back to the function cleanHTML -> _consistencyCheckOfHTML. This removes any attributes and converts classes to p even if they are whitelisted.

Tested with: v2.45.1

pasteTagsWhitelist:'address|fieldset|message-separator',
addTagsWhitelist:'address|fieldset|message-separator',
attributesWhitelist:{'all': '*',},

input

<p class="placeholderSalute"><br></p><p><br></p><p><br></p><address data-signatur="69" data-type="long" id="ext-element-21" class="">signature</address>

output

<p><br></p><p><br></p><p><br></p><p>signature</p>

As workaround, I have added a getHtml function to the core.

						getHtml        : function (e) {
							return d.getHtml(e)
						},

						getHtml                            : function (t) {
							return e.element.wysiwyg.innerHTML;
						},

This also affects the insertion of HTML via the code view. Because here the same function is triggered and the whitelist tags and attributes are also removed and converted.

You can reproduce this behavior with the following code. paste this code to a fiddle "html-box" and run.

<link href="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/suneditor@latest/dist/suneditor.min.js"></script>

<textarea id="sample" style="width:100%;">Hi <span>Alex</span></textarea>

<script>const editor = SUNEDITOR.create((document.getElementById('sample') || 'sample'),{
			pasteTagsWhitelist:'address|fieldset|message-separator|span',
			addTagsWhitelist:'address|fieldset|message-separator|span',
			attributesWhitelist:{'all': '*',}});</script>

You will see, the "Hi <span>Alex</span>" will be converted to <p>Hi Alex</p>. If you open the code view and paste my html, and switch back, the same happens.

[JiHong88]

To properly display the editor's contents, the parent element must have the "sun-editor-editable" class. And the CSS related to the editor's content is in suneditor-content.css. You must have both of these. I thought this was the most reasonable way. Are there any other alternatives?

[JiHong88]

@AbdiasMichael Settings related to style will be added in 3.0.0. It will take several months.

[Orgoth]

I have switched to https://github.com/xdan/jodit/ it works much better than the suneditor. It also looks like, you are missunderstanding the hole issue within this ticket. Nevertheless, I wish everyone every success and that the problems are solved as quickly as possible.