Tabs inserted as four whitespaces

[Geir Morten]

Hi,

I have an issue with tabs in the Rad Editor and/or the Telerik.Windows.Documents libraries. In my scenario I use the saved HTML content from the editor and convert it to DOCX using HtmlFormatProvider and DocxFormatProvider in the Telerik.Windows.Document libraries.The reason why I convert it to DOCX is because I need to inject it into other Word documents using the MS JavaScript API for Office.

 

This soultion is working (more or less), however the issue is that the editor inserts four whitespaces to the editor HTML content when I click the tab button.After I convert the HTML to DOCX, this is the resulting OOXML fragment:

  <w:r>
    <w:t>    Hallo</w:t>
  </w:r>

If I do the same tab-operation in Word the result is this:

      <w:r>
        <w:tab />
        <w:t>Hallo</w:t>
      </w:r>

 

I've played around with inserting &#09; and &emsp; in the editor using the InsertTab function in JavaScript, but to no avail. There is still no consistency in the converted ooxml versus  the ooxml produced by Word. I've also tried to set DefaultTabStopWidth on the RadFlowDocument and adding a tabstop to the TabStops collection on the paragraph properties for the relevant style, but I cannot find any working solution.

As our users are allowed to work on the same content in both Word and in the editor in the web application, this causes some issues regarding consistency in text layout/placement.

 

I am using:

Telerik.Web.UI 2018.3.910.45

Telerik.Windows.Documents.* 2018.3.904.40

Internet Explorer 11.0.9600.19155

 

I'm not quite sure where to go from here. I guess it boils down to that the converted DOCX needs to have a <w:tab /> at the position I added a tab in the editor. Is there any possible solution out of the box?

 

Thanks

 

Best regards,

Geir Morten Hagen

 

[Rumen]

Hi,

You can either override the InsertTab command as shown below:

       <script>
            var $T = Telerik.Web.UI;
            var $Editor = $T.Editor;
            var utils = $Editor.Utils;
            Telerik.Web.UI.Editor.CommandList.InsertTab = function (commandName, editor, oTool) {
                var blockElement = getSelectedBlockElement(editor);
                
                if (utils.isTag(blockElement, "LI") || utils.isList(blockElement)) {
                    editor.fire("Indent");
                }
                else if (!insertTabInTable(blockElement, false, editor)) {
                    var selectedNode = $Editor.RangeEdges.commonNode(editor.getDomRange());
                    if (utils.isZwspTextNode(selectedNode)) {
                        selectedNode.parentNode.insertBefore(editor.get_document().createTextNode(" \u00A0\u00A0\u00A0\u00A0"), selectedNode);
                    }
                    else {
                        //Change here the pasted content
                        editor.pasteHtml(' &nbsp;&nbsp;&nbsp;&nbsp;');
                    }
                }
                return false;
            };

            function getSelectedBlockElement(editor) {
                var element = editor.getSelectedElement();
                var blockElement = utils.isBlockElement(element) ? element : utils.getBlockParent(element);
                return utils.isBlockElement(blockElement) ? blockElement : null;
            }

            function insertTabInTable(element, shiftKey, editor) {
                var tableElement = (utils.isTag(element, "TD") || utils.isTag(element, "TH")) ? element :
                    utils.getElementParentByTag(element, "TD") || utils.getElementParentByTag(element, "TH");
                if (tableElement) {
                    utils[shiftKey ? "MoveToPreviousCell" : "MoveToNextCell"](tableElement, editor);
                    return true;
                }
                return false;
            }
        </script>
<telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>

or implement a custom content filter which will replace the 4 empty spaces (&nbsp;) symbols with  <w:tab />

Regards,
Rumen
Progress Telerik

[Geir Morten]

Thanks for quick reply, Rumen.

I tried the first solution, however the issue is the same with \u00A0 and &nbsp; it causes whitespaces in the text node in the ooxml after exporting from html to docx using HtmlFormatProvider and DocxFormatProvider.

Regarding the second solution to implement a custom content filter, I am not sure how this would work. My understanding of content filters is that a content filter processes the editor html content to do some adjustments, for instance converting the html to xhtml. However, <w:tab /> is an ooxml tag and is not recognized by the HtmlFormatProvider. I manually inserted <w:tab /> in the HTML before exporting it to DOCX, but it is not present in the corresponding paragraph in the exported docx-document.

 

Best regards,

Geir Morten Hagen

[Geir Morten]

I got it solved, however not an ideal solution. When the user saves from Word I iterate over all paragraphs in the ooxml using documentformat.openxml library and replace all <w:tab /> with a <w:t /> (text node) with the same value (four &nbsp;'s) as the editor uses for tabs.

[Tanya]

Hi Geir,

I am glad to hear that you managed to find a solution to the requirement.

I tested converting an HTML content to a tab element in the DOCX but a similar conversion is not possible using the library as the HTML doesn't clearly define a tab character which can be mapped with the Open XML element.

Regards,
Tanya
Progress Telerik