javascript - 在 CK Editor 中访问选项卡数据

Question

我在一个页面上有太多的 ckeditors，有人告诉我这是错误的做法。所以，我找到了 Bootstrap Tab Panels 的 stackflow 示例它可以让我减少 ckeditors 的数量，因为我想我可以将每个命名选项卡下的空间变成可编辑空间。

演示: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 内的选项卡 Pane 中的名称值是我需要捕获并发送到 mySQL 数据库的值。我可以从输入类型文本字段获取 Nab 选项卡命名值，但选项卡 Pane 命名变量需要 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 请求。