CKEditor is lost after rerendering the table

Question

<apex:sectionHeader title="Create / Edit Credentials" subtitle="Professional Experience"/>
<apex:form id="emp_form">
<apex:pageMessages />
<apex:outputPanel >
    <apex:outputText value="White Label: Subtle Information of the Company Name" styleClass="textinfo"/><br/>
    <apex:outputText value="End Date: Please enter a blank value if you are currently working" styleClass="textinfo"/><br/>
</apex:outputPanel>
<br/>
<apex:pageBlock mode="edit">
    <apex:pageBlockSection title="Please Provide the necessary Information" ></apex:pageBlockSection>
    <div>
        <div style="float:right;">
            <apex:commandButton value="Save" action="{!save}"/>
            <apex:commandButton value="Cancel" action="{!Cancel}"/>
        </div>
        <div style="clear:both"></div>
    </div>
    <apex:pageBlockTable value="{!prWrapper}" var="pw" id="wtable">

        <apex:column headerValue="Action">
            <apex:commandLink value="Delete" style="Button" action="{!delWrapper}" reRender="wtable">
               <apex:actionSupport event="onchange" rerender="theBlock" oncomplete="ReloadCkEditor();"/>
               <apex:param name="toDelIdent" value="{!pw.ident}" assignTo="{!toDelIdent}"/> 
            </apex:commandLink>
        </apex:column>
        <apex:column headerValue="Company Name">
            <apex:outputPanel styleClass="requiredInput" layout="block">
               <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                   <apex:inputField value="{!pw.peforWrapper.Name}"/>
            </apex:outputPanel>
        </apex:column>
        <apex:column headerValue="White Label">
                   <apex:inputField value="{!pw.peforWrapper.White_Label__c}" styleClass="textbox"/>
        </apex:column>
        <apex:column headerValue="Job Title">
            <apex:outputPanel styleClass="requiredInput" layout="block">
               <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                   <apex:inputField value="{!pw.peforWrapper.Job_Title__c}" />
            </apex:outputPanel>
        </apex:column>

        <apex:column headerValue="Start Date">
            <apex:outputPanel styleClass="requiredInput" layout="block">
               <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                   <apex:inputField value="{!pw.peforWrapper.Start_Date__c}"/> 
            </apex:outputPanel>
        </apex:column>
        <apex:column headerValue="End Date">
            <apex:inputField value="{!pw.peforWrapper.End_Date__c}"/>
        </apex:column>


        <apex:column headerValue="Job Description" >
            <apex:outputPanel styleClass="requiredInput" layout="block">
               <apex:outputPanel styleClass="requiredBlock" layout="block"/>
                   <apex:inputTextarea richText="false" id="oNextSteps" cols="80" rows="3" styleClass="ckeditor" required="true" value="{!pw.peforWrapper.Job_Description__c}"/>

            </apex:outputPanel>
        </apex:column>

    </apex:pageBlockTable>
    <br />
    <div>
        <div style="float:left;">
            <apex:commandButton value="Add Row" style="Button" action="{!addRows}" reRender="wtable">
                    <apex:param name="addCount" value="1" assignTo="{!addCount}"/>
            </apex:commandButton>
        </div>
        <div style="float:right;">
            <apex:commandButton value="Save" action="{!save}"/>
            <apex:commandButton value="Cancel" action="{!Cancel}"/>
        </div>
    </div>
    <br/>

--Comment

So I have a wrapper that adds to a list if we want another record for the professional experience object. We're using CKEditor to convert the textarea into rich text editor for later use. Probem is, whenever I want to add another record, the textarea which takes the style of ckeditor is returning back to the old textarea input but in this case, it still has the html tags but the textarea's not in rich text editor anymore. (ul,li etc.)

Answer 1

From the code you posted, I don't see how the CKEDITOR gets bound on the first load... Is there more to the page, and you haven't posted it? Maybe a script running after the page has loaded?

On possible solution is to put a script inside the outputPanel that you reload, which binds CKEDITOR again each time that outputPanel is reRendered i.e.

<apex:outputPanel styleClass="requiredBlock" layout="block"/>
  <apex:inputTextarea richText="false" id="oNextSteps" cols="80" rows="3" styleClass="ckeditor" required="true" value="{!pw.peforWrapper.Job_Description__c}"/>
  <script>
    CKEDITOR.replace('{!$Component. oNextSteps}');
  </script>
</apex:outputPanel>