-
-
Notifications
You must be signed in to change notification settings - Fork 308
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Default styles are not working! #888
Comments
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. |
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. |
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. |
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. |
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. |
@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. |
@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? |
@alichampion Version 3.0.0 takes time. |
Alright, @JiHong88 when should I generate this string onblur/onchange event? |
Just generate it after "suneditor.create()". |
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. |
Um.. This is the code to get the contents of the current editor including "defaultStyle". |
@JiHong88 It should be like this
This method is not correct at all. @JiHong88 |
@JiHong88 This is because default styles are not applied to the output document. |
@JiHong88 |
It seems similar to this issue. #921 (comment) You can use the 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);
} |
@JiHong88 |
|
The 2.43.0 version has been updated. |
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.
The text was updated successfully, but these errors were encountered: