How to avoid invisible characters wiki numbered and bullet lists SharePoint 16.0.0.4508

Question

Is there anyway to tell SharePoint not to add invisible whitespace characters at the end of numbered lists / bullet lists?

Environment: SharePoint Office 365 version 16.0.0.4508.

For some reason, I'm frequently encountering mysterious whitespace at the end of numbered lists in wiki pages. I'm trying to write technical instruction manuals but when users copy-and-paste strings from the numbered lists, the clipboard contains "extra" invisible characters. If I cursor through the page in edit mode, I see that the cursor is moving through the "extra" invisible characters but I can't seem to delete them.

With Chrome 46.0.2490.86m, if I select some text from a wiki bullet list, then copy the text, and then paste it into UltraEdit with an 1252 ANSI-Latin I encoded text file; 1 extraneous 0x3F character is added before and after my the pasted text, same result with Internet Explorer 11.0.9600.17959 (update 11.0.22 KB3078071).

I did some more testing with a Unicode encoding. The character added is U+200B; which is decimal 8023 and shows up in HTML source code as ὗ. Which according to 2 is "Unicode Character 'ZERO WIDTH SPACE' this character is intended for invisible word separation and for line break control; it has no width, but its presence between two characters does not prevent increased letter spacing in justification."

I used Chrome Developer Tools to inspect the actual HTML around the bullet list when editing. Look for "some text" in this chunk of HTML and you'll see it's preceded by mystery ? characters; in UltraEdit with 1252 encoding these ? have code values of hexadecimal 0x3F. It looks like

<div id="DeltaPlaceHolderMain">

        <a id="mainContent" name="mainContent" tabindex="-1"></a>

    <span id="ctl00_PlaceHolderMain_wikiPageNameDisplay" style="display: none;">
        TestSharePoint
    </span>
    <span id="ctl00_PlaceHolderMain_wikiPageNameEdit" style="display:none;">
        <input name="ctl00$PlaceHolderMain$wikiPageNameEditTextBox" type="text" value="TestSharePoint" maxlength="255" id="ctl00_PlaceHolderMain_wikiPageNameEditTextBox" />
    </span>
    <div style='display:none'><input type="submit" name="ctl00$PlaceHolderMain$btnWikiSave" value="Apply" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$PlaceHolderMain$btnWikiSave&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_PlaceHolderMain_btnWikiSave" /></div><div style='display:none'><input type="submit" name="ctl00$PlaceHolderMain$btnWikiRevert" value="Revert" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$PlaceHolderMain$btnWikiRevert&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_PlaceHolderMain_btnWikiRevert" /></div>
    <div id="ctl00_PlaceHolderMain_WikiField">
        <span dir="none"><div class='ms-rtestate-field ms-rtefield' style='border: none; '><div id='ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_inplacerte_label' style='display:none'>Rich text editor Wiki Content</div><div class=' ms-rteflags-2' id='ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_inplacerte' style='min-height:420px' aria-labelledby='ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_inplacerte_label' ><div class="ExternalClass74D556E76BE44061B81428308A1DBF14"><table id="ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_inplacerte_layoutsTable" style="width&#58;100%;"><tbody><tr style="vertical-align&#58;top;"><td style="width&#58;100%;"><div class="ms-rte-layoutszone-outer" style="width&#58;100%;"><div class="ms-rte-layoutszone-inner-editable ms-rtestate-write" role="textbox" aria-autocomplete="both" aria-haspopup="true" aria-multiline="true"><ul><li><span style="line-height&#58;1.6;">?some text</span><span style="line-height&#58;1.6;">?</span><br></li><li><span style="line-height&#58;1.6;">more text</span><br></li><li><span style="line-height&#58;1.6;">even more text</span><br></li></ul></div></div></td></tr></tbody></table><span id="ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_inplacerte_layoutsData" style="display&#58;none;">false,false,1</span></div></div><div style="clear:both;"></div></div>
        <span dir="ltr">

            <input name="ctl00$PlaceHolderMain$WikiField$ctl00$ctl00$TextField_spSave" type="HIDDEN" id="ctl00_PlaceHolderMain_WikiField_ctl00_ctl00_TextField_spSave" />
        </span>
    </span>
    </div>

<div style='display:none' id='hidZone'></div>

</div>
</div>
<div id="DeltaFormDigest">

I can reproduced this problem with a brand new wiki page...

Googling about U+200B, I've found similar complaints about SharePoint but no answer https://stackoverflow.com/questions/24205193/javascript-remove-zero-width-space-unicode-8203-from-string.

Answer 1

The problem seems to be caused by using Chrome 46 to edit the SharePoint lists. If the page is created and maintained with IE 11, I'm not seeing the problem.

Once I found out the problem involves the &#8023 / U+200B Unicode character 'Zero Width Space'. Googling turned up some useful search results... https://stackoverflow.com/questions/24205193/javascript-remove-zero-width-space-unicode-8203-from-string.

This appears to be some kind of defect in Microsoft SharePoint's RichText field.

The only workaround I've found so far is to manually remove the character using this process:

1. Use Chrome.
2. Access the wiki page with 8203 / U+200B.
3. Edit the wiki page.
4. CTRL+F to search for the text afflicted with 8203 / U+200B.
5. Press F2 to edit the text.
6. While carefully preserving the "" (quotation marks) surrounding the 8203 and the text, delete only the ​ unicode character 'Zero Width Space'.
7. Save the page.

Answer 2

I found that removing the 8203 code from webpage has sometimes the side effect of breaking the edit mode so I check if the page is in edit mode first. I don't understand exaclty the reason why this caracter is inserted all over the place in rich text fields. It breaks the HTML formating but here is my solution (without jquery) :

(function(){
 var wik, s4;
    wik = 
        document.forms[MSOWebPartPageFormName]
        ._wikiPageMode.value !== "Edit";  

    s4 = document.getElementById('s4-bodyContainer');

    if(wik){
        s4.innerHTML = s4.innerHTML.replace(/\u200B/g,'');
    }   // if
})();

Update... here is a better updated code but it depends on jQuery :

fixCode8203 = function () {
        var t, n, r;

        t = String.fromCharCode(8203);

        $("body")
            .find(":not(iframe)")
            .contents()
            .filter(function () {
                return (this.nodeType === 3 &&
                        this.nodeValue.indexOf(t) !== -1);
            }).each(function () {
                n = $(this)[0].nodeValue;
                r = new RegExp(t, "g");
                $(this)[0].nodeValue = n.replace(r, "")
            });
    }; // fixCode8203

Answer 3

I've seen this when drag selecting text. But when I triple click to select the information, no white space is copied.

Answer 4

On one page where I was having a problem with those, I added a little script to remove them automagically:

$(document).ready(function () {
    // remove those pesky zero width space unicode characters inserted by sharepoint
    $('.ms-rte-layoutszone-inner:contains("\u200B")').each(function () {
        $(this).html($(this).html().split("\u200B").join(""));
    });
    $('.ms-rte-layoutszone-inner-editable:contains("\u200B")').each(function () {
        $(this).html($(this).html().split("\u200B").join(""));
    });
});

---

Ok, so how to add this to a Wiki Page:

First, you need to link to jQuery. If you want you can link to jQuery from a CDN (like the one on the jQuery site itself), or you can upload the jQuery library to somewhere on your site (which is what I usually do).

(If you are already loading jQuery on a custom master page or something, obviously you don't have to do this as it's being loaded already.)

To upload jQuery to somewhere on your site: I usually make a "Scripts" folder inside the "Site Assets" library and put it there. Other people like using the "Style Library". It just needs to be somewhere you (and your users) have read access to so it will load for them on the Wiki Page.

Then, on the Wiki Page, put the page in edit mode and add a Script Editor Web Part at the top of the page. Select "Edit Web Part" from the web part menu and then click on "EDIT SNIPPET". In the editor window that opens, put the following code:

// if you are loading jQuery from a CDN then your src URL will be the URL to the CDN
// the URL I am using here is server relative, which I prefer, or you can use one
// that is relative to the "Site Pages" library where the wiki pages are, like
// "../SiteAssets/Scripts/jquery-1.11.3.min.js"
<script type="text/javascript" src="/sites/MySite/SiteAssets/Scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    // remove those pesky zero width space unicode characters inserted by sharepoint
    $('.ms-rte-layoutszone-inner:contains("\u200B")').each(function () {
        $(this).html($(this).html().split("\u200B").join(""));
    });
    $('.ms-rte-layoutszone-inner-editable:contains("\u200B")').each(function () {
        $(this).html($(this).html().split("\u200B").join(""));
    });
});
</script>

Click the "Insert" button to close the script editor, "OK" to close the web part editor, and save the page. That should do it.