在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条评论
登录后参与评论

相关文章

来自分类常见问题

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

来自分类Dev

Eclipse-如何固定编辑器选项卡?

来自分类Dev

如何在Eclipse中制作方形编辑器选项卡(无swt-border-radius)?

来自分类Dev

如何隐藏Eclipse编辑器文件选项卡中列出的文件图标?

来自分类Dev

将ACE编辑器嵌入选项卡

来自分类Dev

Matlab编辑器-显示选项卡和空格字符

来自分类Dev

带有多个选项卡的多个编辑器窗口

来自分类Dev

如何在tinymce编辑器中禁用标准选项卡事件?

来自分类Dev

Eclipse 4.4 Luna固定编辑器选项卡

来自分类Dev

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

来自分类Dev

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

来自分类Dev

以编程方式在Sitecore的富文本编辑器的HTML选项卡中插入数据

来自分类Dev

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

来自分类Dev

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

来自分类Dev

VSCode 1.3.1:编辑器无法在新选项卡中打开

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

Related 相关文章

  1. 1

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

  2. 2

    Eclipse-如何固定编辑器选项卡?

  3. 3

    如何在Eclipse中制作方形编辑器选项卡(无swt-border-radius)?

  4. 4

    如何隐藏Eclipse编辑器文件选项卡中列出的文件图标?

  5. 5

    将ACE编辑器嵌入选项卡

  6. 6

    Matlab编辑器-显示选项卡和空格字符

  7. 7

    带有多个选项卡的多个编辑器窗口

  8. 8

    如何在tinymce编辑器中禁用标准选项卡事件?

  9. 9

    Eclipse 4.4 Luna固定编辑器选项卡

  10. 10

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

  11. 11

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

  12. 12

    以编程方式在Sitecore的富文本编辑器的HTML选项卡中插入数据

  13. 13

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

  14. 14

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

  15. 15

    VSCode 1.3.1:编辑器无法在新选项卡中打开

  16. 16

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

  17. 17

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

  18. 18

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

  19. 19

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

  20. 20

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

  21. 21

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

  22. 22

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

  23. 23

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

  24. 24

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

  25. 25

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

  26. 26

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

  27. 27

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

  28. 28

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

  29. 29

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

热门标签

归档