在CK编辑器中访问选项卡数据

Question

I have too many ckeditors on one page, which I've been told is the wrong way to go. So, I found this stackflow example of Bootstrap Tab Panels and it would allow me to reduce the number of ckeditors because I'm thinking I could turn the space under each named tab into an editable space.

Demo: http://jsfiddle.net/KyleMit/E6Tm4/

<div id="editor1">

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#community_kgevents" data-toggle="tab">Events</a></li>
  <li><a href="#community_kgservicelearning" data-toggle="tab">Learning</a></li>
  <li><a href="#community_kgserviceprojects" data-toggle="tab">Projects</a></li>
  <li><a href="#community_kgvolunteering" data-toggle="tab">Volunteer</a></li>
  <li><a href="#community_kgcontent1" data-toggle="tab"><?php echo $community_kgsubtab1; ?></a></li>
  <li><a href="#community_kgcontent2" data-toggle="tab"><?php echo $community_kgsubtab2; ?></a></li>
  <li><a href="#community_kgcontent3" data-toggle="tab"><?php echo $community_kgsubtab3; ?></a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="community_kgevents"><?php echo $community_kgevents; ?></div>
  <div class="tab-pane" id="community_kgservicelearning"><?php echo $community_kgservicelearning; ?></div>
  <div class="tab-pane" id="community_kgserviceprojects"><?php echo $community_kgserviceprojects; ?></div>
  <div class="tab-pane" id="community_kgvolunteering"><?php echo $community_kgvolunteering; ?></div>
  <div class="tab-pane" id="community_kgcontent1"><?php echo $community_kgcontent1; ?></div>
  <div class="tab-pane" id="community_kgcontent2"><?php echo $community_kgcontent2; ?></div>
  <div class="tab-pane" id="community_kgcontent3"><?php echo $community_kgcontent3; ?></div>
</div>

The name values in the Tab panes inside the div are the ones I need to capture and send to the mySQL database when I click the Submit button. I can get the Nab tabs named values from input type text fields, but the Tab pane named variables need a ckeditor.

Kyle has created a demo for this at http://jsfiddle.net/KyleMit/E6Tm4/5/ which works fine, but it isn't what I need because I need to capture all of the named value data when I click the Submit button at the bottom of the web page, which then sends all the data to the mySQL database and subsequently loads the profile web page containing the submitted data from the edit profile web page. Any help would be greatly appreciate on how this can be done.

Answer 1

You can extract tab information for all the tabs like this:

var editorContent = CKEDITOR.instances['editor1'].getData();
$(editorContent).find(".tab-pane").each(function() {
    var tabContent = this.innerHTML;
    console.log(tabContent);
});

Demo in Fiddle

Here I'm just logging them, but at the point you're handling each one you can do whatever modifications you need to do to submit it to the server. Preferably over an ajax request.