I'm embarrassed to say that I failed to notice a problem that still exists with this solution. 
Bad tester! Bad!
Here's the thing. When there are multiple editors within a hidden section, only the last of them works properly in webkit browsers. So if you have a heading, a sub-heading, and a body within a hidden section, only the editor for the body works. The heading and sub-heading will have the -webkit-user-modify:read-only style.
Here's a demo.
Bad tester! Bad!Here's the thing. When there are multiple editors within a hidden section, only the last of them works properly in webkit browsers. So if you have a heading, a sub-heading, and a body within a hidden section, only the editor for the body works. The heading and sub-heading will have the -webkit-user-modify:read-only style.
Here's a demo.
- Code: Select all
<?php require_once( 'couch/cms.php' ); ?>
<cms:template title='full-test'>
<!-- Page 1 -->
<cms:editable name='home' type='text' >
Home Page.</cms:editable>
<cms:editable name='homepage' type='richtext' >
This is the Home Page.</cms:editable>
<!-- Page 2 -->
<cms:editable name='second' type='text' >
Second pane.</cms:editable>
<cms:editable name='secondpage' type='richtext' >
This is the second pane.</cms:editable>
<!-- Page 3 -->
<cms:editable name='third' type='text' >
Third pane.</cms:editable>
<cms:editable name='thirdpage' type='richtext' >
This is the third pane.</cms:editable>
<!-- Page 4 -->
<cms:editable name='fourth' type='text' >
Fourth pane.</cms:editable>
<cms:editable name='fourthpage' type='richtext' >
This is the fourth pane.</cms:editable>
</cms:template>
<!DOCTYPE html>
<html><head></head>
<body>
<nav>
<ul class="tabs">
<li><a href="#">Home</a></li>
<li><a href="#Page 2">Page 2</a></li>
<li><a href="#Page 3">Page 3</a></li>
<li><a href="#Page 4">Page 4</a></li>
</ul>
</nav>
<div class="panes">
<!--HOME-->
<article>
<h1 <cms:inline_edit 'home' />><cms:show home /></h1>
<div <cms:inline_edit 'homepage'/>><cms:show homepage /></div>
</article>
<!--PAGE 2-->
<article>
<h1 <cms:inline_edit 'second' />><cms:show second /></h1>
<div <cms:inline_edit 'homepage'/>><cms:show secondpage /></div>
</article>
<!--PAGE 3-->
<article>
<h1 <cms:inline_edit 'third' />><cms:show third /></h1>
<div <cms:inline_edit 'homepage'/>><cms:show thirdpage /></div>
</article>
<!--PAGE 4-->
<article>
<h1 <cms:inline_edit 'fourth' />><cms:show fourth /></h1>
<div <cms:inline_edit 'homepage'/>><cms:show fourthpage /></div>
</article>
</div>
<!-- jQuery Tools by Tero Piirainen http://jquerytools.org -->
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul.tabs").tabs("div.panes > article", {history:true});
});
</script>
<cms:load_edit />
</body></html>
<?php COUCH::invoke(); ?>
