Convert html to word and back again in combination with a WYSIWYG editor

GemBox.Document
1

Hi,
We are using Gembox in combination with tinyMCE on our website. We create/edit a html with tinyMCE and then Gembox converts this to a Word file. This Word file gets saved for later use and editing. Now, when I want to edit that word file again in tinyMCE I have to convert the word file back to html.

During these conversions, some weird artifacts happen. For example a simple bullet point list created in tinyMCE looks like this:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

It gets nicely converted to Word. When I convert the Word back to html it looks like this:

<div>
<p style="text-indent: -18pt; line-height: 115%; font-size: 11pt; margin: 0pt 0pt 10pt 36pt;"><span style="font-family: Symbol; font-size: 11pt;"></span><span style="mso-tab-count: 1;">      </span><span style="font-family: Arial; font-size: 11pt;">Coffee</span></p>
<p style="text-indent: -18pt; line-height: 115%; font-size: 11pt; margin: 0pt 0pt 10pt 36pt;"><span style="font-family: Symbol; font-size: 11pt;"></span><span style="mso-tab-count: 1;">      </span><span style="font-family: Arial; font-size: 11pt;">Tea</span></p>
<p style="text-indent: -18pt; line-height: 115%; font-size: 11pt; margin: 0pt 0pt 10pt 36pt;"><span style="font-family: Symbol; font-size: 11pt;"></span><span style="mso-tab-count: 1;">      </span><span style="font-family: Arial; font-size: 11pt;">Milk</span></p>
</div>

In tinyMCE, it looks nice but further editing is troublesome. E.g. continuing the bullet point list is not possible since tinyMCE doesn’t see this html as list.

Is there a good way to approach something like this?

The thing is our software needs to save this in word format. The same text should be able to be edited in tinyMCE and also in Word directly and is should look and behave the same. In our App it’s also possible to create the word file first and then edit it further in our web. Any ideas are appreciated.

2

Hi Remo,

I just wanted to let you know that we’re adding support for your requirement.

We’ll provide support for this using the HtmlSaveOptions.UseSemanticElements.
I’ll contact you again when this is done.

Regards,
Mario

3

Hi Mario,

Thanks for letting me know. That’ll be a nice addition!

Until then I guess we have to write some custom conversion code to edit e.g. lists in tinyMCE.

4

Hi Mario,

Sorry to bother again. Do you have an anticipated timeline or timeframe for this (especially ordered/unordered lists)?

Thanks!

5

Hopefully, this should be available by the end of this week or the beginning of next week.

6

Hi Remo,

We have added support for exporting <ul> and <ol> elements when using the HtmlSaveOptions.UseSemanticElements.

Please try again with this NuGet package:
Install-Package GemBox.Document -Version 35.0.1896-hotfix

Note that this is a hidden pre-released version, to install it you’ll need to run the above command on the NuGet Package Manager Console (Tools → NuGet Package Manager → Package Manager Console).

Does this solve your issue?

Regards,
Mario

7

Hi Mario,

Thanks for the quick update. A list in word does get converted to ul element, so that’s pretty neat.

But I’m experiencing and issue. The li elements get some margin-left and padding-left added when converting from word.

So e.g. a simple bullet list in word gets converted to html that looks like this:

        <ul start="1" style="list-style-type: disc;padding-left: 0pt;margin: 0;">
            <li style="margin-left:54pt;padding-left: 12pt;">
                <p style="margin-left:0pt;margin-right:0pt;margin-top:0pt;margin-bottom:0pt;line-height:115%;font-size:11pt;display:inline-block;"><span style="font-family:Arial;font-size:11pt;">1</span></p>
            </li>
            <li style="margin-left:54pt;padding-left: 12pt;">
                <p style="margin-left:0pt;margin-right:0pt;margin-top:0pt;margin-bottom:0pt;line-height:115%;font-size:11pt;display:inline-block;"><span style="font-family:Arial;font-size:11pt;">2</span></p>
            </li>
        </ul>

It adds some value to “margin-left:54pt;padding-left: 12pt;”. Maybe there is a setting in the DocumentModel class for this?

It seems the values get added additionally, since when just converting the word to html and back to word (without modifying anything); the bullet list in word moves to the right.

8

Please try again with this NuGet package:
Install-Package GemBox.Document -Version 35.0.1906-hotfix

Does this solve your issue?

Regards,
Mario

9

Hi Mario,

Thank you again for the update. Yes, this issue is solved and it works nicely.

I noticed some issues with nested list, resp. list with indent. A html nested list get’s converted to a word list with indent. But this list in word has some weird properties in the list level definition and perhaps paragraph.

A html list like this:

<ul>
    <li>1
        <ul>
            <li>2
                <ul>
                    <li>3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Get’s converted to a word list like this:

image
image945×629 32.6 KB

Due to the weird properties of list level definition (I think), this list in words get’s not converted back again to a propert html list.

Also in word, increasing or decreasing the indent of list elements does not work property.

I tried around with setting list styles in the GemBox.Document.DocumentModel, but could not bring it to work. Any help would be very appreciated.

10

Hi Mario,

Just wanted to follow up on this. Is conversion of nested list something you intent to enhance?

Thanks and best regards,
Remo

11

Hi Remo,

Please try again with this NuGet package:
Install-Package GemBox.Document -Version 35.0.1950-hotfix
Does this solve your issue?

Regards,
Mario

12

Hi Mario,

Thanks for the update. That seems to solve the issue.

TinyMCE does not properly continue the list in certain situations, but that’s due to how tinyMCE adds a new list element to the Gembox’s converted list. I guess we do a workaround for that.

E.g. Having a bullet list with 3 different indents:

    <ul>
        <li>
            <p><span>1</span></p>
            <ul>
                <li>
                    <p>2</span>
                    </p>
                    <ul>
                        <li>
                            <p><span>3</span></p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

TinyMCE does not properly add a new element below “2”.

Anyway, thanks for the response and updates!