EditableDocument get html with inline styles

Hi, I am working with EditableDocument to get the complete html as string, I can see that the style is created on the head tag,

Is possible to get the full html content but with inside styles?, example:

<td style="width:286.85pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding-right:5.38pt; padding-left:5.03pt; padding-bottom:0.25pt; vertical-align:bottom;">
                    <p style="margin-top:0pt; margin-bottom:0pt; line-height:108%; font-size:12pt;">CORPORATE </p>
                </td>

@sara.campos.medtrainer

To obtain the complete HTML content from an EditableDocument instance with inline styles, you can use the GetEmbeddedHtml method. This method generates a single string that contains the entire document, including all resources, with styles embedded directly within the HTML elements. This means that styles will be included in the style attributes of the relevant HTML tags, rather than being placed in the <head> section.

Here’s a brief example of how you can achieve this in Java:

import com.groupdocs.editor.EditableDocument;
import com.groupdocs.editor.Editor;
import com.groupdocs.editor.options.WordProcessingEditOptions;
import com.groupdocs.editor.options.WordProcessingLoadOptions;

public class EditableDocumentExample {
    public static void main(String[] args) throws Exception {
        String inputFilePath = "path/to/your/document.docx";
        Editor editor = new Editor(inputFilePath, new WordProcessingLoadOptions());
        EditableDocument editableDocument = editor.edit(new WordProcessingEditOptions());

        // Get the complete HTML with inline styles
        String completeHtml = editableDocument.getEmbeddedHtml();

        // Output the HTML
        System.out.println(completeHtml);

        // Clean up
        editableDocument.dispose();
        editor.dispose();
    }
}

In this example, replace "path/to/your/document.docx" with the actual path to your document. The getEmbeddedHtml() method will return the HTML string with all styles applied inline, allowing you to have the desired format for your HTML content.

This approach ensures that you can work with the HTML directly, including all necessary styles for rendering the document correctly in a web environment.

Hi, I tried with the suggested code, the resulting html is generated with the style on head tag.

<!DOCTYPE html>
<html><head><meta charset = "utf-8" /><title></title><meta name = "author" content = "corpedu" /><style type = "text/css">@page Section1 { margin-top: 28.8pt; margin-right: 57.6pt; margin-bottom: 28.8pt; margin-left: 57.6pt; size: 612pt; }
a { text-decoration: none; }
.Balloon_Text, .BuiltIn-style, .Paragraph-style { -aw-style-name: balloontext; -gd-style-name: 'Balloon Text'; font-family: Tahoma; font-size: 8pt; font-weight: normal; font-style: normal; text-align: left; margin-top: 0pt; margin-bottom: 0pt; line-height: normal; }
.Balloon_Text_Char, .User-style, .Character-style { -gd-style-name: 'Balloon Text Char'; font-family: Tahoma; font-size: 8pt; font-weight: normal; font-style: normal; }
.Default_Paragraph_Font, .BuiltIn-style, .Character-style { -aw-style-name: defaultparagraphfont; -gd-style-name: 'Default Paragraph Font'; font-family: Calibri; font-size: 10pt; font-weight: normal; font-style: normal; }
.Footer, .BuiltIn-style, .Paragraph-style { -aw-style-name: footer; -gd-style-name: 'Footer'; font-family: Calibri; font-size: 11pt; font-weight: normal; font-style: normal; text-align: left; margin-top: 0pt; margin-bottom: 0pt; line-height: normal; }
.Footer_Char, .User-style, .Character-style { -gd-style-name: 'Footer Char'; font-family: Calibri; font-size: 10pt; font-weight: normal; font-style: normal; }
.Header, .BuiltIn-style, .Paragraph-style { -aw-style-name: header; -gd-style-name: 'Header'; font-family: Calibri; font-size: 11pt; font-weight: normal; font-style: normal; text-align: left; margin-top: 0pt; margin-bottom: 0pt; line-height: normal; }
.Header_Char, .User-style, .Character-style { -gd-style-name: 'Header Char'; font-family: Calibri; font-size: 10pt; font-weight: normal; font-style: normal; }
.Heading_1, .Quick-style, .BuiltIn-style, .Heading-style, .Paragraph-style { -aw-style-name: heading1; -gd-style-name: 'Heading 1'; font-family: 'Times New Roman'; font-size: 10pt; font-weight: normal; font-style: normal; text-align: justify; margin-top: 14pt; margin-bottom: 14pt; margin-left: 20pt; margin-right: 20pt; line-height: normal; }
.Heading_1_Char, .User-style, .Character-style { -gd-style-name: 'Heading 1 Char'; font-family: 'Times New Roman'; font-size: 10pt; font-weight: normal; font-style: normal; }
.List_Paragraph, .Quick-style, .BuiltIn-style, .Paragraph-style { -aw-style-name: listparagraph; -gd-style-name: 'List Paragraph'; font-family: Calibri; font-size: 11pt; font-weight: normal; font-style: normal; text-align: left; margin-top: 0pt; margin-bottom: 10pt; margin-left: 36pt; line-height: 134.1667%; }
.No_List, .BuiltIn-style, .List-style { -aw-style-name: nolist; -gd-style-name: 'No List'; }
.No_Spacing, .Quick-style, .BuiltIn-style, .Paragraph-style { -aw-style-name: nospacing; -gd-style-name: 'No Spacing'; font-family: Calibri; font-size: 11pt; font-weight: normal; font-style: normal; text-align: left; margin-top: 0pt; margin-bottom: 0pt; line-height: normal; }
.Normal, .Quick-style, .BuiltIn-style, .Paragraph-style { -gd-style-name: 'Normal'; font-family: Calibri; font-size: 11pt; font-weight: normal; font-style: normal; text-align: left; margin-top: 0pt; margin-bottom: 10pt; line-height: 134.1667%; }
.Strong, .Quick-style, .BuiltIn-style, .Character-style { -aw-style-name: strong; -gd-style-name: 'Strong'; font-family: Calibri; font-size: 10pt; font-weight: bold; font-style: normal; }
.Table_Grid, .BuiltIn-style, .Table-style { -aw-style-name: tablegrid; -gd-style-name: 'Table Grid'; font-family: Calibri; font-size: 10pt; font-weight: normal; font-style: normal; text-align: left; margin-top: 0pt; margin-bottom: 0pt; line-height: normal; }
.Table_Normal, .Quick-style, .BuiltIn-style, .Table-style { -aw-style-name: tablenormal; -gd-style-name: 'Table Normal'; font-family: Calibri; font-size: 10pt; font-weight: normal; font-style: normal; text-align: left; margin-top: 0pt; margin-bottom: 0pt; line-height: normal; }
div.Section1 { page: Section1; }
p.para001 { text-align: center; line-height: normal; }
span.text001 { -aw-import: ignore; }
p.para002 { text-align: center; }
span.text002 { -aw-import: ignore; }
div.div001 { text-align: center; }
span.text003 { font-family: Wingdings; }
span.text004 { -aw-import: ignore; }
span.text005 { -aw-import: ignore; }
span.text006 { -aw-import: ignore; }
span.text007 { -aw-import: ignore; }
span.text008 { -aw-import: ignore; }
p.para003 { text-align: center; }
span.text009 { -aw-import: ignore; }</style></head><body><div class = "documentMainContent"><div class = "Section1"><div class = "header-0"><p class = "Normal para001"><span class = "text001">&nbsp;</span></p></div><p class = "No_Spacing para002"><span class = "text002">&nbsp;</span></p><div class = "No_Spacing div001"><span class = "Default_Paragraph_Font">Temporary Agency </span></div><div class = "No_Spacing"><span class = "Default_Paragraph_Font text003"><span>Welcome!</span><span style = "-aw-import: spaces;">&#xa0; </span><span>We are pleased to have you with us.</span><span style = "-aw-import: spaces;">&#xa0; </span></span></div><p class = "No_Spacing"><span class = "text004">&nbsp;</span></p><p class = "No_Spacing"><span class = "text005">&nbsp;</span></p><p class = "No_Spacing"><span class = "text006">&nbsp;</span></p><p class = "No_Spacing"><span class = "text007">&#xa0;</span></p><div class = "footer-1"><p class = "Footer"><span class = "text008">&nbsp;</span></p><p class = "Footer para003"><span class = "text009">&nbsp;</span></p></div></div></div></body></html>
1 Like

@sara.campos.medtrainer
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): EDITORJAVA-1218

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

Hi @sara.campos.medtrainer !

Please ignore the answer from @Professionalize.Discourse above, it is a bot and its answers are not always correct.

Regarding your direct question — you are right that when calling a editableDocument.getEmbeddedHtml() instance method, you will obtain a string, where all HTML document will be packed, and all styles are embedded — they are located in the HTMLHEADSTYLE section.

Currently the GroupDocs.Editor has no such feature to put the styles to be inline, in the style attribute of HTML elements, and it was done intentionally. The main purpose of the GroupDocs.Editor is to produce HTML document, which is editable by the most variety of free and commercial WYSIWYG HTML-editors like TinyMCE, CKEditor and so on. These HTML-editors usually cannot modify the embedded stylesheet, and they apply changes to text by putting own styles to the style attributes of HTML elements (inline styles). So when we store styles as embedded, we give an opportunity for the 3rd party HTML-editors to override our styles with their own, because regardless of the specificity of the selector, the inline styles always have the highest priority. We tried to experiment with inline styles some time ago and found out the a lot of 3rd party WYSIWYG HTML-editors cannot cope with them correctly — they simply append own CSS declarations to the style attribute and do not analize and/or modify those styles, which are already there.

Hope my answer was clear and helpful. If you have any other questions, please feel free to ask.

With best regards,
Denis Gvardionov

1 Like

@denisgvardionov, Thank you for the explanation, now it is clear to me.
Best regards

1 Like