3

我想做一些像 Wordpress 编辑器这样的东西。
我使用了 jQuery UI 选项卡（我不想使用另一个选项卡插件，因为我已经将 jUI 用于站点上的选项卡）并创建了两个名为“WYSIWYG”和“HTML”的选项卡。选项卡标题下有一个 TEXTAREA。
然后我想使用NicEdit - 正如您在演示中看到的那样，它可以使用 HTML 编辑器“包装”和“解包”文本区域。一切似乎都很好，但问题是：

  • 当我在选项卡的 HREF 中使用“”或“#”时，第一个选项卡处于活动状态，第二个选项卡不是 - 所以不可点击，所以我无法将 SELECT 事件附加到它
  • 当我使用不存在的 id ( <a href="#notexist">...) 时，它当然会抛出异常
  • 当我使用不存在的“虚拟”选择器（真的 - <a href="dummy">...）时，在选项卡标题下（在选项卡和文本区域之间）出现了很大的空间，就像选项卡创建了新的 div 并“关闭”了它作为它们的内容。

我想要的只是使用 jQuery UI 选项卡来创建两个没有内容的选项卡，可以（取消）选择并在选择时触发事件，所以我可以使用 NicEdit。我错过了什么？

4

2 回答 2

5

我一直在寻找实现相同目标的自然方法（这就是我在本主题中的方式）。

由于这里没有答案，我将发布我结束的简单解决方案：

<div id="tabs" class="ui-tabs">
   <ul>
      <li><a id="firstTab" href="#listContent" onclick="yourOwnHandler();">Text</a></li>
      <li><a href="#listContent" onclick="yourOwnHandler();">Text</a></li>
      <!-- Etc, etc... -->
   </ul>
   <div id="listContent"></div> 
</div>

所有的想法都在空的 div 中，无论 jQuery 应用于它的类如何，它都不会显示 - 仅仅是因为没有什么可显示的。

这接近您的 3d 方法，但问题在于不正确的 href（没有 #），除非这是您想要的。

如您所见，您甚至不需要多个 div - 每个选项卡 href 可以相同。我选择“listContect”作为 div ID，因为 URL“yourSite/Page#listContent”看起来比带有“#dummy”或“#tabs”的 URL 更好。

当然，如果使用 jQuery 附加 onclick 事件会更漂亮，但有一些原因（特定于我的页面）为什么我在这里使用内联方法。

于 2012-06-01T14:46:21.060 回答
2

我不确定我是否完全理解你的问题。我猜你正在尝试只使用一个文本区域。如我错了请纠正我。

无论如何，我认为你最好使用两个文本区域并在切换选项卡时同步它们。

NicEdit 提供了一个基本的javascript API来获取/设置编辑器实例的内容。

我制作了jsfiddle给你看。

于 2011-12-13T11:10:29.223 回答