?> <script type="text/javascript"> init(function($) { $('.editable').raptor(extendDefaults({ autoEnable: true })); }); </script> </head> <body> <?php echo $example->renderNavigation(); ?> <div class="source-watch" data-output="#source" data-target=".editable"> <div class="editable center half" data-id="body-1"> <?php ob_start(); ?> <h4><strong class="cms-bold" style="color: rgb(234, 89, 10); font-family: proxima-nova, Helvetica, Arial, sans-serif; font-size: 1.3125em; line-height: 1.71429em;">Welcome to Some Random Website</strong><span style="color: rgb(234, 89, 10); font-family: proxima-nova, Helvetica, Arial, sans-serif; line-height: 1.71429em; font-size: 12px;"> </span><br></h4> <p>This is not real content that I took from a website as an example context of dirty content. </p> <ul><li>Raptor </li><li>Rocks</li><li>Many peoples</li><li>Socks </li><li>Lets clean this mess up <span style="font-size: 12px; text-indent: -1.25em;"> </span></li></ul><h4><span style="font-family: proxima-nova, Helvetica, Arial, sans-serif; font-size: 1.125em; line-height: 1.33333em;"><span class="cms-color cms-red"><strong class="cms-bold"><span class="cms-color cms-green">The end, thanks for watching.</span></strong></span></span></h4><h4><font size="4"><span class="cms-color cms-red"></span></font><small class="cms-small"><font size="4"><span class="cms-color cms-red"></span></font></small></h4> <?php echo $example->renderContent('body-1', ob_get_clean()); ?> </div> </div> <div id="source" class="center half"></div> </body> </html>
$('.enable').button().click(function() { $('.editable').data('uiRaptor').enableEditing(); }); $('.disable').button().click(function() { $('.editable').data('uiRaptor').disableEditing(); }); $('.editable').raptor(extendDefaults({ layouts: { hoverPanel: false } })); }); </script> </head> <body> <?php echo $example->renderNavigation(); ?> <div class="source-watch center half" data-output="#source" data-target=".editable"> <button class="enable">Enable Editing</button> <button class="disable">Disable Editing</button> <div class="editable" data-id="body-1"> <?php echo $example->renderContent('body-1', $example->getDefaultContent()); ?> </div> </div> <div id="source"></div> </body> </html>
}); </script> </head> <body> <?php echo $example->renderNavigation(); ?> <div id="header-container"> <header class="wrapper clearfix"> <h1 id="title" class="editable" data-id="site-title"> <?php ob_start(); ?> Site Title <?php echo $example->renderContent('site-title', ob_get_clean()); ?> </h1> <nav class="site-nav"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Other Link</a></li> <li><a href="#">Last Link</a></li> </ul> </nav> </header> </div> <div id="main-container"> <div id="main" class="wrapper clearfix"> <article class="editable" data-id="article"> <?php
<td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </table> <p>Paragraph</p> <?php $content = ob_get_clean(); ?> <div class="source-watch" data-output="#source"> <table class="center half"> <tr> <td class="test-cell"> <div class="editable" data-id="body-1"> <?php echo $example->renderContent('body-1', $content); ?> </div> </td> <td class="test-cell"> <div class="editable" data-id="body-2"> <?php echo $example->renderContent('body-2', $content); ?> </div> </td> </tr> <tr> <td class="test-cell"> <div class="editable" data-id="body-3"> <?php
<?php echo $example->renderHead(); ?> <script type="text/javascript"> init(function($) { $('.editable').raptor(defaultOptions); }); </script> <style type="text/css"> .editable { margin-top: 10px; min-height: 10px; border: 1px dotted black; } </style> </head> <body> <?php echo $example->renderNavigation(); ?> <div class="source-watch" data-output="#source" data-target=".editable"> <div class="editable center half" data-id="body-1"> <?php echo $example->renderContent('body-1', ''); ?> </div> </div> <div id="source" class="center half"></div> </body> </html>
} .box, .box .editable { width: 100px; height: 100px; } </style> </head> <body> <?php echo $example->renderNavigation(); ?> <div class="box" style="z-index: 5000;"> <div class="editable" data-id="body-3'"> <?php echo $example->renderContent('body-3', 5000); ?> </div> </div> <div class="box" style="z-index: 1000;"> <div class="editable" data-id="body-2"> <?php echo $example->renderContent('body-2', 1000); ?> </div> </div> <div class="box" style="z-index: 1;"> <div class="editable" data-id="body-1"> <?php echo $example->renderContent('body-1', 1); ?>
} } })); }); </script> </head> <body> <?php echo $example->renderNavigation(); ?> <div class="source-watch center half" data-output="#source" data-target=".editable"> <h1>Dock To Example</h1> <div id="top"></div> <div class="editable content" data-id="body-1"> <?php echo $example->renderContent('body-1', $example->getDefaultContent()); ?> </div> <div class="editable sidebar" data-id="sidebar-1"> <?php ob_start(); ?> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> <li>List item 5</li> <li>List item 6</li> </ul> <?php