extract ckeditor text to a new div

Question

i have a tab one tab has the ck editor and the other tab has the preview so i would like to extract text from ck editor to the preview part(preview part is nothing but a div)

    <div class="create-tab">
      <button class="tablinks" type="button" onclick="openCity(event, 'editor')">Editor</button>
      <button class="tablinks" type="button" id="preview" onclick="openCity(event, 'preview')">Preview</button>    
   </div>


     <div id="editor" class="tabcontent">
         <textarea name="eml_html" id="textbox"></textarea>
     </div>

     <div id="preview" class="tabcontent">
          <div id="preview-area"> </div>                      
     </div>

i have tried doing this but with no luck

Script

       var editor = CKEDITOR.replace('textbox', { allowedContent:true, removePlugins:"about" }); 
        $('#preview').click(function(){
//            alert("test");
            var test = CKEDITOR.instances.yourEditorInstance.editable().getText();
            alert(test);
     });

so when i click on the preview tab i get nothing.

Answer 1

i was able to fix this so this is what i did in the script part

     var editor = CKEDITOR.replace('textbox', { allowedContent:true, removePlugins:"about" }); 
            $('#preview').click(function(){
    //            alert("test");
     var test = CKEDITOR.instances.textbox.editable().getText(); //if you only want text 
//var test= KEDITOR.instances.textbox.getData(); //if you want everything
                alert(test);
         });

so what i did was replaced the yourEditorInstance with the id of my textarea which was textbox