Wiki Page Content Editor adding break (br) to elements before closing tag in SharePoint 2013

Question

Whenever I add any content in wiki page, one br tag gets appends to the end of the content before closing tag,

For e.g.

If I had header text and click on edit HTML source, it looks like

<h1>Hello World<br/></h1>

Is it a bug in SharePoint?

Answer 1

No, it's not a SharePoint bug. I faced the same behavior when I enabled a google extension like Grammarly, it considers the cursor place as a line break <br> tag.

For Example,

When you add <h1>Hello World</h1> in Source HTML

• If you leave the cursor at the end of the word world then clicked OK, in the next Edit HTML source, you will note that a line break <br> tag has been added inside the <H1> tag. as <h1>Hello World</br></h1>

• Now try to add the cursor outside <h1> tag, then click OK, and go back to edit the source again, you will note that a line break <br> tag has been added after the <h1>Hello World</h1></br>

So try to disable any add-ons/extension during editing the HTML Source and you will not face this issue!

Answer 2

Add your code as a single line or remove any indentation. The content editor will format these elements after saving them and will not create additional tags or characters.

Answer 3

I'm having the same issue here for my pages on my publishing site. I've come up with a clumsy solution that seems to work. This solution assumes your site is using jQuery and that you have the ability to edit Master Pages and/or Page Layouts. I have added the following javascript to my Master Page after loading jQuery:

<script>
// Only run if page is in Design Mode
var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
if (inDesignMode == "1") {
    // Only run if you are using Chrome
    if(navigator.userAgent.search("Chrome") >= 0) {
        // Find any <br> tags that are the last-child of ANY element in a rich text field
        $('.ms-rtestate-field * > br:last-child').remove();
    }       
}
<script>

Once this code is in your master page, you can edit a rich text field in chrome. When you first save your work, the <br> tags will still be there. Reopen the page and save immediately without editing anything. The script will then strip out the extra <br> tags. You have to do this double save every time you edit the rich text field in Chrome, but for me this is a adequate workaround.

NOTE: You may want to edit the jQuery selector to only target specific elements to prevent unwanted <br> removals.

For example:

$('.ms-rtestate-field p > br:last-child, .ms-rtestate-field h2 > br:last-child').remove();

You might also want to wrap this code in jQuery's $(document).ready() function to make sure the DOM is loaded before firing the script.