Question

我在一个页面上有太多的ckeditors，我被告知这是错误的方法。所以，我找到了Bootstrap Tab Panels的这个stackflow示例，它允许我减少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中的Tab窗格中的名称值是我在单击Submit按钮时需要捕获并发送到mySQL数据库的名称值。我可以从输入类型文本字段中获取Nab选项卡命名值，但名为variables的选项卡窗格需要一个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);
});

Demo in Fiddle

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

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

1 个答案:

Demo in Fiddle