Default styles are not working!

[alichampion]

Issue with default styles settings

Find bellow attached video you will find the steps

Expected behavior
Default styles are not added to paragraph/heading/dev tag styles attribute when we define defaultStyles in editor props, which leads to a bug where I as a user assume to have the same styles saved in db along with their respective tag.

Video

Screen.Recording.2021-10-26.at.6.23.21.PM.mov

Additional context
The screen in this video is from your website options page.

[agcyphers]

This is working as expected. Defaults are applied to the editor as a baseline, so no HTML code is generated for those in the code preview or output.

[alichampion]

This is working as expected. Defaults are applied to the editor as a baseline, so no HTML code is generated for those in the code preview or output.

Hi, @agcyphers thanks for your output.

I totally agree with you, but when we will save HTML to DB and we will show it somewhere on the HTML page the baseline styles would not be there as the HTML which is returned from editor onchange callback does not include default styles and that HTML gets saved to the DB and as mentioned it does not include default styles although they seem to be applied to the text while in the editor.

[agcyphers]

No, you would have to account for that either in the stylesheet of your page, or embed the received content in a DIV that applies these styles.
<div style="color:#f00">Your received content here</div>

[alichampion]

No, you would have to account for that either in the stylesheet of your page, or embed the received content in a DIV that applies these styles. <div style="color:#f00">Your received content here</div>

Alright, that's almost what we were doing before. As our app allows admin/staff to set default settings for the editor so next time they get back to the editor they will be shown with the styles they applied using last time/initial default settings.

But we have faced some issues with this approach like sometimes the editor does not behave as it should be.

i.e when we wrap the whole HTML to one p/div tag and apply default styles to it before saving it to DB and then when we come back to the editor it gets crahsed and after debugging it for hours I found out that the tag I use to apply dynamic default styles is causing this issue.

[agcyphers]

You should only save the content that you receive from the Editor, not the outer DIV for previews/display, so that you are getting clean data for editing.

[alichampion]

You should only save the content that you receive from the Editor, not the outer DIV for previews.

Hi, @agcyphers then, in that case, our dynamic styles feature won't work Although we have fixed it on our own quite a long time ago and it's still working fine but we recently found very serious issues like applying some styles to specific text and then applying the same style to all text it should override specific text styles to make all text consistent but it remains same as applied before.

And I checked on the sun editor site and it was working fine then I tried to upgrade sun editor by thinking it would fix my issue but it didn't help in any case. After again spending hours I found that if I would ignore my custom fixes then it works fine and at that time I made myself a promise not to modify anything on my own in the editor, unfortunately, the dynamic styles is also one of the major need of our project.

[JiHong88]

@alichampion Is the problem that "defaultStyle" cannot be applied when loading saved HTML?

[alichampion]

@alichampion Is the problem that "defaultStyle" cannot be applied when loading saved HTML?

Hi @JiHong88 yes it is.

If you can review the video again you would find the exact issue.

Thanks.

[JiHong88]

@alichampion "defaultStyle" is applied as below.

<div class="sun-editor-editable" style="defaultStyle">
  <p><br></p>
</div>

I will update the "getContents" method to get the value in the form "

".
However, due to compatibility issues in the current version, it will be applied in version 3.0.0.

Currently, it can be applied in the following ways.

`<div class="sun-editor-editable" style"${editorInstance.options.defaultStyle}">
${editorInstance.getContents()}
</div>`

[alichampion]

@alichampion "defaultStyle" is applied as below.

<div class="sun-editor-editable" style="defaultStyle">
  <p><br></p>
</div>

I will update the "getContents" method to get the value in the form "

".
However, due to compatibility issues in the current version, it will be applied in version 3.0.0.
Currently, it can be applied in the following ways.

`<div class="sun-editor-editable" style"${editorInstance.options.defaultStyle}">
${editorInstance.getContents()}
</div>`

Alright thanks, @JiHong88 but as it's an issue and breaking major functionality of our site can it be done quickly?

Or

Can you tell me the hotfix for it?

[JiHong88]

@alichampion Version 3.0.0 takes time.
You can implement it in the current version using the method I mentioned above.

[alichampion]

Alright, @JiHong88 when should I generate this string onblur/onchange event?

[JiHong88]

Just generate it after "suneditor.create()".

[alichampion]

I'm confused with this if the above mentioned script will be used to get the final HTML or it will be used to show suneditor.

[JiHong88]

Um.. This is the code to get the contents of the current editor including "defaultStyle".

[Saeeed-B]

@JiHong88
Hi how are you.
This feature must be dynamic.

It should be like this
If the user does not change the style, the default style will be applied.

`<div class="sun-editor-editable" style"${editorInstance.options.defaultStyle}">
${editorInstance.getContents()}
</div>`

This method is not correct at all.
If the user does not change the styles, the default styles must be applied.
Not to apply default styles at all

@JiHong88
If you remember, we talked about direction and came to the conclusion that it should be dynamic, not static.
Default style should not always be applied, but should be applied only when the user does not change the style

[Saeeed-B]

@JiHong88
This is a very important issue that I am dealing with.
My users log in to my site and write text in the editor.
But they see, the styles that were inside the editor are not in the output document !!!.

This is because default styles are not applied to the output document.
On the other hand, I can not statically default the output style to documents. Because users may want to apply their own styles.

[Saeeed-B]

@JiHong88
Can you make a temporary offer?

[JiHong88]

It seems similar to this issue. #921 (comment)
It will be updated in version 2.42.1.

You can use the getFullContents() method to get the entire "div" containing the "defaultStyle".
Before the update, you can use the following methods.

function save() {
 const contents = `<div class="sun-editor-editable ${editorInstance.options.rtl ? "se-rtl" : ""}" style="${editorInstance.core.context.element.wysiwygFrame.style.cssText}">${editorInstance.core.getContents()}</div>`;
 console.log(contents);
}

[Saeeed-B]

@JiHong88
I tested this editorInstance.core.context.element.wysiwygFrame.style.cssText but it does not work properly. By changing the style, its value does not change

[JiHong88]

editorInstance.core.context.element.wysiwygFrame This element is wysiwyg div element.
The "wysiwyg" div is assigned "defaultStyle".
Check in your HTML and make sure "style" is properly entered.

[JiHong88]

The 2.43.0 version has been updated.
If this issue has not been resolved, please reopen this issue.
Thank you.

[Saeeed-B]

@JiHong88 hi
@JiHong88 Exactly how should we use this feature?
I do not notice any change