Multi line column data Format issue in Document Library SharePoint

Recently, we need to show data from Document library to a classic view page. We get rest call. Get data. Display on page. Task done. Easy right? No. There was a multi line column which was showing data as row text. Also that column has 255 character limit. How can this be?

Analysis:
We got a tech net page which says multi line is not same in list and library. So we won't get rich text or enhance rich text option in that. Only plain text available.

Reference - https://social.msdn.microsoft.com/Forums/office/en-US/67a70245-cd03-48e1-b0fa-71bbb6a7744d/is-enhanced-rich-text-column-supported-by-document-library?forum=sharepointcustomizationlegacy

Solution:

So there were two issue. And below are solution for same:

• Getting 255 character limit.

So open column and set settings to allow unlimited text. It will fix this issue.

• Show multi line data as formatted.

For this you need to use "<Pre>"tag. It will show data in same way the text is entered in column.

Code sample:

$(document).ready(function(){

$.ajax({     

url:_spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getByTitle('Newsletter')/items?$select=DocIcon,EncodedAbsUrl,FileLeafRef,Editor/Title,Highlighted_x0020_Content&$expand=Editor&$orderby=FileLeafRef desc",

    type: "GET",  

    headers: {  

        "accept": "application/json;odata=verbose",  

        "content-Type": "application/json;odata=verbose"  

    },  

    success: function(data) {  

var html="";

for(i=0;i<data.d.results.length;i++){

var currentData = data.d.results[i];

var previewPath = _spPageContextInfo.webAbsoluteUrl +"/_layouts/15/getpreview.ashx?path="+ currentData.EncodedAbsUrl;

var highlightedContent = currentData.Highlighted_x0020_Content!= null ? currentData.Highlighted_x0020_Content:"";

var docType = currentData.DocIcon;

var imgdoc;

        html+="<div class='parentDiv'><div class='titleDiv'>"+currentData.FileLeafRef+"</div><div class='editDiv'></div><div class='contentDiv'><pre>"+highlightedContent +  "</pre></div></div>";

}

$("#NewsLetter").html(html);

    },  

    error: function(error) {  

        console.log(JSON.stringify(error));  

    }  

}); 

})