Adding PeoplePicker field using HTML, JavasScript in Content Editor WebPart

HTML Tag:

<tr id="mgr">
<td class="lbl">Manager:</td>
<td class="val">
<!--People Picker//-->
<div id="ppApp" style="width:350px">
<span id="ctl00_PlaceHolderMain_pe" editorOldValue="" RemoveText="Remove" value="" NoMatchesText="&lt;No Matching Names>" allowEmpty="1" MoreItemsText="More Names..." preferContentEditableDiv="true" showDataValidationErrorBorder="false" EEAfterCallbackClientScript="" inValidate="false" allowTypeIn="true" ShowEntityDisplayTextInTextBox="0"><input name="ctl00$PlaceHolderMain$pe$hiddenSpanData" type="hidden" id="ctl00_PlaceHolderMain_pe_hiddenSpanData" /><input name="ctl00$PlaceHolderMain$pe$OriginalEntities" type="hidden" id="ctl00_PlaceHolderMain_pe_OriginalEntities" value="&lt;Entities />" /><input name="ctl00$PlaceHolderMain$pe$HiddenEntityKey" type="hidden" id="ctl00_PlaceHolderMain_pe_HiddenEntityKey" /><input name="ctl00$PlaceHolderMain$pe$HiddenEntityDisplayText" type="hidden" id="ctl00_PlaceHolderMain_pe_HiddenEntityDisplayText" />
<table id="ctl00_PlaceHolderMain_pe_OuterTable" class="ms-usereditor" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
<tr valign="bottom">
<td valign="top" style="width:88%;">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;table-layout:fixed;">
<tr>
<td id="ctl00_PlaceHolderMain_pe_containerCell"><div id="ctl00_PlaceHolderMain_pe_upLevelDiv" tabindex="0" onfocusin="StoreOldValue('ctl00_PlaceHolderMain_pe');saveOldEntities('ctl00_PlaceHolderMain_pe');" onclick="onClickRw(true, true,event,'ctl00_PlaceHolderMain_pe');" onchange="updateControlValue('ctl00_PlaceHolderMain_pe');" onfocusout="if(typeof(ExternalCustomControlCallback)=='function'){ if(ShouldCallCustomCallBack('ctl00_PlaceHolderMain_pe',event)){if(!ValidatePickerControl('ctl00_PlaceHolderMain_pe')){ShowValidationError();return false;}else {ExternalCustomControlCallback('ctl00_PlaceHolderMain_pe');}}}" onPaste="dopaste('ctl00_PlaceHolderMain_pe',event);" AutoPostBack="0" rows="1" onDragStart="canEvt(event);" onkeyup="return onKeyUpRw('ctl00_PlaceHolderMain_pe');" onCopy="docopy('ctl00_PlaceHolderMain_pe',event);" title="People Picker" onkeydown="return onKeyDownRw('ctl00_PlaceHolderMain_pe', 3, true, event);" aria-multiline="true" contentEditable="false" aria-haspopup="true" class="ms-inputuserfield" style="word-wrap: break-word;overflow-x: hidden; background-color: window; color: windowtext;border:1px solid #999" preferContentEditableDiv="true" name="upLevelDiv" role="textbox"></div><textarea name="ctl00$PlaceHolderMain$pe$downlevelTextBox" rows="1" cols="20" id="ctl00_PlaceHolderMain_pe_downlevelTextBox" class="ms-inputuserfield" AutoPostBack="0" onkeyup="return onKeyUpRw('ctl00_PlaceHolderMain_pe');" title="People Picker" onfocus="StoreOldValue('ctl00_PlaceHolderMain_pe');saveOldEntities('ctl00_PlaceHolderMain_pe');" onblur="if(typeof(ExternalCustomControlCallback)=='function'){ if(ShouldCallCustomCallBack('ctl00_PlaceHolderMain_pe',event)){if(!ValidatePickerControl('ctl00_PlaceHolderMain_pe')){ShowValidationError();return false;}else {ExternalCustomControlCallback('ctl00_PlaceHolderMain_pe');}}}" onkeydown="return onKeyDownRw('ctl00_PlaceHolderMain_pe', 3, true, event);" renderAsContentEditableDiv="true" onchange="updateControlValue('ctl00_PlaceHolderMain_pe');" style="width:100%;display: none;position: absolute; "></textarea></td>
</tr>
</table>
</td>
<td align="center" valign="top" nowrap="true" style="padding-left:5px;padding-right:5px;"><!--<a id="ctl00_PlaceHolderMain_pe_checkNames" title="Check Names" onclick=" if(!ValidatePickerControl('ctl00_PlaceHolderMain_pe')){ ShowValidationError(); return false;} var arg=getUplevel('ctl00_PlaceHolderMain_pe'); var ctx='ctl00_PlaceHolderMain_pe';EntityEditorSetWaitCursor(ctx);WebForm_DoCallback('ctl00$PlaceHolderMain$pe',arg,EntityEditorHandleCheckNameResult,ctx,EntityEditorHandleCheckNameError,true);return false;" href="javascript:"><img title="Check Names" src="/_layouts/images/checknames.png" alt="Check Names" style="border-width:0px;" /></a>//-->&#160;<a id="ctl00_PlaceHolderMain_pe_browse" title="Browse" onclick="__Dialog__ctl00_PlaceHolderMain_pe(); return false;" href="javascript:"><img title="Browse" src="/_layouts/images/addressbook.gif" alt="Browse" style="border-width:0px;" /></a> (click icon to browse for user)</td>
</tr>
<tr>
<td colspan="3"><span id="ctl00_PlaceHolderMain_pe_errorLabel" class="ms-error"></span></td>
</tr>
</table>
</span>
</div>

JavaScript code:
//PEOPLE PICKER CODE
    document.write('<script type="text/javascript" src="/_layouts/entityeditor.js?rev=1%2Fj%2Ba5PO0xZXnRjXxVHOkg%3D%3D"></' + 'script>');
    function CallbackWrapperctl00_PlaceHolderMain_pe(xml) {
        if (xml == null)
            return;

        var ctx = 'ctl00_PlaceHolderMain_pe';
        EntityEditorCallback(xml, ctx);
        // run the custom script
        RunCustomScriptSetForPickerControl(ctx);
    }

    function __Dialog__ctl00_PlaceHolderMain_pe(defaultSearch) {
        if (defaultSearch == undefined)
            defaultSearch = '';
        var sDialogUrl = '\u002fProcesses\u002fGPP\u002f_layouts\u002fPicker.aspx?MultiSelect=False\u0026CustomProperty=User\u00253B\u00253B15\u00253B\u00253B\u00253BFalse\u0026DialogTitle=Select\u002520People\u0026DialogImage=\u00252F\u00255Flayouts\u00252Fimages\u00252Fppeople\u00252Egif\u0026PickerDialogType=Microsoft\u00252ESharePoint\u00252EWebControls\u00252EPeoplePickerDialog\u00252C\u002520Microsoft\u00252ESharePoint\u00252C\u002520Version\u00253D14\u00252E0\u00252E0\u00252E0\u00252C\u002520Culture\u00253Dneutral\u00252C\u002520PublicKeyToken\u00253D71e9bce111e9429c\u0026ForceClaims=False\u0026DisableClaims=False\u0026EnabledClaimProviders=\u0026EntitySeparator=\u00253B\u0025EF\u0025BC\u00259B\u0025EF\u0025B9\u002594\u0025EF\u0025B8\u002594\u0025E2\u00258D\u0025AE\u0025E2\u002581\u00258F\u0025E1\u00258D\u0025A4\u0025D8\u00259B';
        sDialogUrl = sDialogUrl + '&DefaultSearch=' + escapeProperly(defaultSearch);
        var sFeatures = 'resizable: yes; status: no; scroll: no; help: no; center: yes; dialogWidth : 575px; dialogHeight : 500px; zoominherit : 1';

        var rv = commonShowModalDialog(sDialogUrl, sFeatures, CallbackWrapperctl00_PlaceHolderMain_pe);
    }

    var currentEntityEditorXml = '\u003cEntities Append=\u0022False\u0022 Error=\u0022\u0022 DoEncodeErrorMessage=\u0022True\u0022 Separator=\u0022;\u0022 MaxHeight=\u00223\u0022 \u002f\u003e';
    var currentEntityEditorContextId = 'ctl00_PlaceHolderMain_pe';
    EntityEditorCallback(currentEntityEditorXml, currentEntityEditorContextId, true); PickerAdjustHeight('ctl00_PlaceHolderMain_pe', 3);

    var EntityEditor_ItemTooLong = 'Item cannot be more than 256 characters.'; var L_PleaseWait_TEXT = 'Searching...';
    var EntityEditor_UseContentEditableControl = true;


    //END: PEOPLE PICKER CODE