?>
<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
