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

用户3731042

我在一页上有太多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数据库,并随后加载包含来自编辑配置文件网页的已提交数据的配置文件网页。任何帮助将不胜感激如何做到这一点。

凯尔·米特

您可以像这样提取所有选项卡的选项卡信息:

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

小提琴中的演示

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

IntelliJ编辑器选项卡:最近使用过

编辑器选项卡的日食设置

如何删除PrimeNG编辑器的选项卡功能

在vscode中,如何将编辑器区域放在选项卡中,而不是相反?

属性文件编辑器中没有更多选项卡

Visual Studio中的编辑器选项卡窗口的顺序是什么

在 Eclipse IDE 中如何通过简单的右键单击禁用编辑器选项卡的关闭

Visual Studio XAML编辑器忽略属性选项卡中的按键

在Visual Studio编辑器中显示空间,选项卡,CRLF字符

在Eclipse WindowBuilder编辑器中,“设计”选项卡未显示任何内容

在文本编辑器中按文件名切换到选项卡

XCode中按数字选择编辑器选项卡的键盘快捷键

在Spyder中的主编辑器上方还原文件选项卡

如何在编辑器的文本选项卡中添加简码?

如何在 Intellij 中隐藏编辑器选项卡?

如何在Qt Designer中访问QTabWidget选项卡编辑器-当我双击对象名称对话框时弹出

如何像其他编辑器选项卡一样在VSCode中打开浏览器

可以拆分IntelliJ IDEA编辑器选项卡而不在原始选项卡中保留副本吗?

Rails中的RTF编辑器:在链接对话框窗口中显示链接的目标选项卡

如何更改Eclipse编辑器选项卡标题的字体大小(在Eclipse v4.4(Luna)中)?

如何在Atom编辑器中的其他选项卡而不是新窗口中打开新文件?

如何在自定义 UI 编辑器自定义选项卡中添加 Powerpoint 的内置工具

在Intellij IDEA中,是否可以将当前编辑器选项卡的路径复制到剪贴板?

Visual Studio代码-多个屏幕中同一项目的选项卡(编辑器)

用于将代码编辑器选项卡移动到 Visual Studio 中的新窗口的键盘快捷键

如何将编辑器添加到特定选项卡的整个工作表保护中?

如何将 PyQt4 中的选项卡添加到我的文本编辑器?

Zerobrane热键可在IDE中的编辑器选项卡和其他窗格之间跳转

Android Studio 3.6.1 的布局编辑器中缺少标记为“设计”和“文本”的选项卡