Use CK editor in SharePoint default forms

The SharePoint multi column field has some issues as it does not render properly except in internet explorer.

Here i am going to explain you today how you can use third party text editor to use in SharePoint default forms (newform.aspx/editform.aspx). I used ck editor here.

This editor supports multiple editing options and moreover it renders properly in all the browsers.

First i created a columns named "FullHTMLColumn" multiple line of text and choose plain text from
Specify the type of text to allow option 

This columns will store the html content in multiple line of text form

Now you have to place the ck editor files in document library or you can give live links, here i have placed all the editor files in style library and given the reference.
Don't forget to give the jQuery reference, in my case i have given the reference in master page.

Then open the list's newform.aspx and find the PlaceHolderMain and placed the below script in that

<script src="../../Style Library/ckeditor/ckeditor.js"></script>
<script>
var FullHTMLColumn="";


$(document).ready(function(){
FullHTMLColumn=$("[title='FullHTMLColumn']").attr('id');



CKEDITOR.replace(FullHTMLColumn);

});
 function PreSaveAction() { 

$("[title='FullHTMLColumn']").val("<DIV>"+CKEDITOR.instances[FullHTMLColumn].getData()+"</DIV>");


  return true;
  }

</script>

Now open the newform.aspx from browser you will see all the editor options are present on the above column as shown below.

Now you can perform all the text editing option here and save the data in to list.
Use the same script on editform.aspx to show same editor options on that form also

Now on allitems.aspx and viewform.aspx place the below script under placeholdermain content placeholder.

This script will render the html content inside the multi line of text column, if you will not place this script html will be rendered as plain text

<script type="text/javascript">

$(document).ready(function(){

function render_html()

{

var theTDs = document.getElementsByTagName("TD");

var i=0;

var TDContent = " ";

while (i < theTDs.length) {

try {

TDContent = theTDs[i].innerText || theTDs[i].textContent;

if ((TDContent.indexOf("<DIV") == 0) && (TDContent.indexOf("</DIV>") >= 0)) {

theTDs[i].innerHTML = TDContent;

}

}

catch(err){}

i=i+1;

}

}

render_html();

});

 </script>

Happy Coding !!!