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

Question

我在一页上有太多的ckeditors，有人告诉我这是错误的方法。 因此，我找到了这个Bootstrap选项卡面板的堆栈流示例，它使我减少了ckeditor的数量，因为我想可以将每个命名选项卡下的空间变成一个可编辑的空间。

演示： 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>

div内“选项卡”窗格中的名称值是我单击“提交”按钮时需要捕获并发送到mySQL数据库的名称值。 我可以从输入类型文本字段中获取名为值的Nab选项卡，但是名为变量的“选项卡”窗格需要一个ckeditor。

凯尔（Kyle）已在http://jsfiddle.net/KyleMit/E6Tm4/5/上为此创建了一个演示，它可以正常工作，但这不是我所需要的，因为当我单击提交时，我需要捕获所有命名的值数据网页底部的按钮，然后将所有数据发送到mySQL数据库，并随后加载包含来自编辑配置文件网页的已提交数据的配置文件网页。 任何帮助将不胜感激如何做到这一点。

Answer 1

您可以像这样提取所有标签的标签信息：

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

小提琴演示

在这里，我只是在记录它们，但是此时您正在处理每一个，您可以进行任何必要的修改以将其提交到服务器。 最好通过ajax请求。