595 lines
183 KiB
HTML
595 lines
183 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<!--
|
|||
|
|
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
|
|||
|
|
For licensing, see LICENSE.md or http://ckeditor.com/license
|
|||
|
|
-->
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>Magicline muddy trenches – CKEditor Sample</title>
|
|||
|
|
<script src="../../../ckeditor.js"></script>
|
|||
|
|
<link href="../../../samples/sample.css" rel="stylesheet">
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
margin: 0 0 130px;
|
|||
|
|
}
|
|||
|
|
#dev {
|
|||
|
|
border-top: 1px solid #555;
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0px;
|
|||
|
|
left: 0px;
|
|||
|
|
right: 0px;
|
|||
|
|
height: 110px;
|
|||
|
|
background: #B5E5EE;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
#dev .hl {
|
|||
|
|
color: red;
|
|||
|
|
}
|
|||
|
|
#tr_upper, #tr_lower {
|
|||
|
|
padding: 3px 6px;
|
|||
|
|
}
|
|||
|
|
#tr_upper {
|
|||
|
|
background: rgba(255,0,0,.3);
|
|||
|
|
}
|
|||
|
|
#tr_lower {
|
|||
|
|
background: rgba(0,255,0,.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#dev p {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#timeData,
|
|||
|
|
#triggerData,
|
|||
|
|
#mouseData,
|
|||
|
|
#hiddenData {
|
|||
|
|
position: absolute;
|
|||
|
|
}
|
|||
|
|
#timeData {
|
|||
|
|
right: 10px;
|
|||
|
|
top: 10px;
|
|||
|
|
}
|
|||
|
|
#hiddenData {
|
|||
|
|
right: 10px;
|
|||
|
|
top: 40px;
|
|||
|
|
}
|
|||
|
|
#mouseData {
|
|||
|
|
left: 10px;
|
|||
|
|
top: 10px;
|
|||
|
|
}
|
|||
|
|
#dev h2 {
|
|||
|
|
top: 10px;
|
|||
|
|
left: 10px;
|
|||
|
|
}
|
|||
|
|
#triggerData {
|
|||
|
|
bottom: 10px;
|
|||
|
|
left: 10px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1 class="samples">
|
|||
|
|
CKEditor Sample — magicline muddy trenches
|
|||
|
|
</h1>
|
|||
|
|
|
|||
|
|
<h2>Various cases</h2>
|
|||
|
|
<textarea cols="80" id="editor1" name="editor1" rows="10">
|
|||
|
|
<div style="padding: 20px; background: gray; width: 300px" class="1">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim.</div>
|
|||
|
|
<div style="background: violet; padding: 30px" class="static">Position static</div>
|
|||
|
|
<dl class="2">
|
|||
|
|
<dt>Key</dt><dd>Value</dd>
|
|||
|
|
</dl>
|
|||
|
|
<div>Whatever</div>
|
|||
|
|
<hr id="hr">
|
|||
|
|
<div style="
|
|||
|
|
display: block;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: green;
|
|||
|
|
height: 50px; width: 50px;" >aasd
|
|||
|
|
</div>
|
|||
|
|
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies</p>
|
|||
|
|
<hr>
|
|||
|
|
<hr>
|
|||
|
|
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies</p>
|
|||
|
|
<table border="1" class="first">
|
|||
|
|
<tbody><tr>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 1
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 2<br>
|
|||
|
|
Table Cell 2<br>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<div style="border: 1px solid red; padding: 50px">
|
|||
|
|
Parent
|
|||
|
|
<div style="border: 10px solid green; padding: 10px">Child</div>
|
|||
|
|
</div>
|
|||
|
|
I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body.
|
|||
|
|
I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body. I'm in a body.
|
|||
|
|
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies</p>
|
|||
|
|
<table border="1" style="margin: 15px 0 100px" class="outer">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 1</td>
|
|||
|
|
<td>Table Cell 1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
<table border="10" class="inner">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 2<br> Table Cell 2<br></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<table border="1" style="margin: 15px" class="third">
|
|||
|
|
<tbody><tr>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 1
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 1
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 1
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 1
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 2
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<table border="1" style="margin: 15px" class="fourth">
|
|||
|
|
<tbody><tr>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 1
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 1
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 1
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 1
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
Table Cell 2
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<ul style="" class="fifth">
|
|||
|
|
<li name="ul_first">List item</li>
|
|||
|
|
<li name="ul_second">
|
|||
|
|
<ol style="">
|
|||
|
|
<li name="ol_first">Nested item</li>
|
|||
|
|
<li>Nested item</li>
|
|||
|
|
<li>Nested item</li>
|
|||
|
|
</ol>
|
|||
|
|
</li>
|
|||
|
|
<li>List item</li>
|
|||
|
|
</ul>
|
|||
|
|
<table border="1" class="table#123">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 2<br> Table Cell 2<br></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<table border="1" align="right" class="aligned">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 2<br> Table Cell 2<br></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<table border="1" style="float: right" class="floated">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 2<br> Table Cell 2<br></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<table border="1" align=""class="table#124">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 2<br> Table Cell 2<br></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<table border="1"class="table#125">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 2<br> Table Cell 2<br></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<p> enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas male</p>
|
|||
|
|
<table border="1"class="table#126">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 1</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>Table Cell 2<br> Table Cell 2<br></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<div style="background: orange; margin: 20px">Upper div</div>
|
|||
|
|
<table style="background: blue; margin: 20px"><tr><td>Lower table</td></tr></table>
|
|||
|
|
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies</p>
|
|||
|
|
<div><strong>I'm a div. Let me stay here.</strong></div><dl>
|
|||
|
|
<dt>Key</dt>
|
|||
|
|
<dd>pendisse a pellentesque dui, non felis</dd>
|
|||
|
|
<dt>Key</dt>
|
|||
|
|
<dd>pendisse a pellentesque dui, non felis</dd>
|
|||
|
|
</dl>
|
|||
|
|
<div class="11" style="padding: 20px; background: pink; width: 400px">
|
|||
|
|
Parent
|
|||
|
|
<div class="12" style="padding: 20px; background: orange">
|
|||
|
|
<!-- comment -->
|
|||
|
|
<!-- another comment -->
|
|||
|
|
<div class="13" style="padding: 20px; background: green">
|
|||
|
|
Child#2
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</textarea>
|
|||
|
|
|
|||
|
|
<h2>Odd case: first (last) element at the very beginning, short editable</h2>
|
|||
|
|
<textarea cols="80" id="editor2" name="editor1a" rows="10">
|
|||
|
|
<table border="1" style="width: 300px">
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
Test</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</textarea>
|
|||
|
|
|
|||
|
|
<h2>Large document, put everywhere</h2>
|
|||
|
|
<textarea id="editor3">
|
|||
|
|
<p><div class="navbar" align="center" style="color: rgb(0, 0, 0);font-family: sans-serif;font-size: medium;"><a accesskey="p" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html" style="color: rgb(102, 0, 153);background-image: initial;background-attachment: initial;background-origin: initial;background-clip: initial;background-color: transparent;background-position: initial initial;background-repeat: initial initial;">previous</a> <a accesskey="n" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/idl-definitions.html" style="color: rgb(102, 0, 153);background-image: initial;background-attachment: initial;background-origin: initial;background-clip: initial;background-color: transparent;background-position: initial initial;background-repeat: initial initial;">next</a> <a accesskey="c" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/Overview.html#contents" style="color: rgb(102, 0, 153);background-image: initial;background-attachment: initial;background-origin: initial;background-clip: initial;background-color: transparent;background-position: initial initial;background-repeat: initial initial;">contents</a> <a accesskey="i" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/def-index.html" style="color: rgb(102, 0, 153);background-image: initial;background-attachment: initial;background-origin: initial;background-clip: initial;background-color: transparent;background-position: initial initial;background-repeat: initial initial;">index</a><hr title="Navigation area separator"></div><div class="noprint" style="color: rgb(0, 0, 0);font-family: sans-serif;font-size: medium;text-align: right;"><p style="font-family: monospace;font-size: small;">13 November, 2000</p></div><div class="div1" style="color: rgb(0, 0, 0);font-family: sans-serif;font-size: medium;"><a id="Range" name="Range"></a><h1 id="Range-h1" class="div1" style="text-align: left;color: rgb(0, 90, 156);background-image: initial;background-attachment: initial;background-origin: initial;background-clip: initial;background-color: white;font-size: 27px;font-weight: normal; background-color: violet">2. Document Object Model Range</h1><dl style="background: green"><dt style="margin-top: 0px;margin-bottom: 0px;font-weight: bold;"><i>Editors</i></dt><dd style="margin-top: 0px;margin-bottom: 0px;">Peter Sharpe, SoftQuad Software Inc.</dd><dd style="margin-top: 0px;margin-bottom: 0px;">Vidur Apparao, Netscape Communications Corp.</dd><dd style="margin-top: 0px;margin-bottom: 0px;">Lauren Wood, SoftQuad Software Inc.</dd></dl><div class="noprint"><h2 id="table-of-contents" style="text-align: left;color: rgb(0, 90, 156);background-image: initial;background-attachment: initial;background-origin: initial;background-clip: initial;background-color: white;font-size: 22px;font-weight: normal;">Table of contents</h2><ul class="toc" style="list-style-type: none;list-style-position: initial;list-style-image: initial;"><li class="tocline3"><a class="tocxref" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-introduction" style="color: rgb(102, 0, 153);background-image: initial;background-attachment: initial;background-origin: initial;background-clip: initial;background-color: transparent;background-position: initial initial;background-repeat: initial initial;">2.1. Introduction</a></li><li class="tocline3"><a class="tocxref" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Definitions" style="color: rgb(102, 0, 153);background-image: initial;background-attachment: initial;background-origin: initial;background-clip: initial;background-color: transparent;background-position: initial initial;background-repeat: initial initial; background: red">2.2. Definitions and Notation</a><ul class="toc" style="list-style-type: none;list-style-position: initial;list-style-image: initial;"><li class="tocline4" style="font-style: italic;"><a class="tocxref" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Position" style="color: rgb(102, 0, 153);background-im
|
|||
|
|
</textarea>
|
|||
|
|
|
|||
|
|
<h2>Deeply nested divs</h2>
|
|||
|
|
<textarea name="editor4">
|
|||
|
|
<p> </p><h1 id="mainHeader" style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; line-height: 1.5em; font-weight: normal; font-size: 26px; color: rgb(7, 130, 193); font-family: Arial, Helvetica, sans-serif; background-color: rgb(226, 226, 226); ">Jobs</h1><div id="node-438" class="node node-type-page" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; line-height: 18px; color: rgb(85, 85, 85); font-family: Arial, Helvetica, sans-serif; background-color: rgb(226, 226, 226); "><div class="node-inner" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; line-height: 1.5em; "><div class="meta" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; line-height: 1.5em; "> </div><div class="content" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; line-height: 1.5em; "><div class="contentBox" style="margin-top: 0px; margin-right: 0px; margin-bottom: 20px; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 1px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-style: initial; border-color: initial; border-image: initial; line-height: 1.5em; background-color: rgb(239, 239, 239); border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(226, 226, 226); border-right-color: rgb(226, 226, 226); border-bottom-color: rgb(226, 226, 226); border-left-color: rgb(226, 226, 226); position: relative; "><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; line-height: 1.5em; ">CKSource is a successful company with thousands of customers all around the world, including top names like IBM and Oracle. Our company is growing fast, with impressive sales results. This strong growth expands our range of opportunities, followed by the growth of our team. Take this chance and <strong style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; line-height: 1.5em; ">join us!</strong></p><p style="margin-top: 0px; margin-right: 0px; margin-bottom: 15px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bo
|
|||
|
|
</textarea>
|
|||
|
|
|
|||
|
|
<h2>Line custom look</h2>
|
|||
|
|
<div id="hood">
|
|||
|
|
<h1>
|
|||
|
|
<img alt="" src="http://a.cksource.com/c/1/inc/img/demo-little-red.jpg" style="margin-left: 10px; margin-right: 10px; float: left; width: 120px; height: 168px;" />Little Red Riding Hood</h1>
|
|||
|
|
<p>
|
|||
|
|
"<b>Little Red Riding Hood</b>" is a famous <a href="http://en.wikipedia.org/wiki/Fairy_tale" title="Fairy tale">fairy tale</a> about a young girl's encounter with a wolf. The story has been changed considerably in its history and subject to numerous modern adaptations and readings.</p>
|
|||
|
|
<table align="right" border="1" cellpadding="1" cellspacing="1" style="width: 200px;">
|
|||
|
|
<caption>
|
|||
|
|
<strong>International Names</strong></caption>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
Chinese</td>
|
|||
|
|
<td>
|
|||
|
|
<i>小紅帽</i></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
Italian</td>
|
|||
|
|
<td>
|
|||
|
|
<i>Cappuccetto Rosso</i></td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
Spanish</td>
|
|||
|
|
<td>
|
|||
|
|
<i>Caperucita Roja</i></td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<hr>
|
|||
|
|
<hr>
|
|||
|
|
<p>
|
|||
|
|
The version most widely known today is based on the <a href="http://en.wikipedia.org/wiki/Brothers_Grimm" title="Brothers Grimm">Brothers Grimm</a> variant. It is about a girl called Little Red Riding Hood, after the red <a href="http://en.wikipedia.org/wiki/Hood_%28headgear%29" title="Hood (headgear)">hooded</a> <a href="http://en.wikipedia.org/wiki/Cape" title="Cape">cape</a> or <a href="http://en.wikipedia.org/wiki/Cloak" title="Cloak">cloak</a> she wears. The girl walks through the woods to deliver food to her sick grandmother.</p>
|
|||
|
|
<p>
|
|||
|
|
A wolf wants to eat the girl but is afraid to do so in public. He approaches the girl, and she naïvely tells him where she is going. He suggests the girl pick some flowers, which she does. In the meantime, he goes to the grandmother's house and gains entry by pretending to be the girl. He swallows the grandmother whole, and waits for the girl, disguised as the grandmother.</p>
|
|||
|
|
<p>
|
|||
|
|
When the girl arrives, she notices he looks very strange to be her grandma. In most retellings, this eventually culminates with Little Red Riding Hood saying, "My, what big teeth you have!"<br />
|
|||
|
|
To which the wolf replies, "The better to eat you with," and swallows her whole, too.</p>
|
|||
|
|
<p>
|
|||
|
|
A <a href="http://en.wikipedia.org/wiki/Hunter" title="Hunter">hunter</a>, however, comes to the rescue and cuts the wolf open. Little Red Riding Hood and her grandmother emerge unharmed. They fill the wolf's body with heavy stones, which drown him when he falls into a well. Other versions of the story have had the grandmother shut in the closet instead of eaten, and some have Little Red Riding Hood saved by the hunter as the wolf advances on her rather than after she is eaten.</p>
|
|||
|
|
<p>
|
|||
|
|
The tale makes the clearest contrast between the safe world of the village and the dangers of the <a href="http://en.wikipedia.org/wiki/Enchanted_forest" title="Enchanted forest">forest</a>, conventional antitheses that are essentially medieval, though no written versions are as old as that.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>Extreme inline editing</h2>
|
|||
|
|
<div id="interpret" contenteditable="true" style="left: 123px; outline: 1px solid red; border: 15px solid green; position: relative; top: 30; left: 30px;">
|
|||
|
|
<div style="padding: 20px; background: gray; width: 300px" class="1">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim.</div>
|
|||
|
|
<div style="background: violet; padding: 30px;" class="static">
|
|||
|
|
Position static
|
|||
|
|
<div style="background: green; padding: 30px; border: 14px solid orange">foo</div>
|
|||
|
|
</div>
|
|||
|
|
<dl class="2">
|
|||
|
|
<dt>Key</dt><dd>Value</dd>
|
|||
|
|
</dl>
|
|||
|
|
<div>Whatever</div>
|
|||
|
|
<hr id="hr">
|
|||
|
|
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies</p>
|
|||
|
|
<hr>
|
|||
|
|
<hr>
|
|||
|
|
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies</p>
|
|||
|
|
<div style="background: green; padding: 30px; width: 200px">foo</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2>Enter mode: BR</h2>
|
|||
|
|
<textarea cols="80" id="editor5" name="editor5" rows="10">
|
|||
|
|
Foo<br />
|
|||
|
|
<hr style="margin: 50px" />
|
|||
|
|
<hr style="margin: 50px" />
|
|||
|
|
Foo
|
|||
|
|
</textarea>
|
|||
|
|
|
|||
|
|
<div id="dev">
|
|||
|
|
<p id="mouseData">
|
|||
|
|
<span>Mouse over: <strong id="over"></strong></span>
|
|||
|
|
<span style="display: block">Mouse Y-pos.: <span id="my"></span></span>
|
|||
|
|
</p>
|
|||
|
|
<p id="triggerData">
|
|||
|
|
<span id="tr_type"></span>
|
|||
|
|
<span id="tr_upper"></span>
|
|||
|
|
<span id="tr_lower"></span>
|
|||
|
|
<span id="tr_edge"></span>
|
|||
|
|
</dl>
|
|||
|
|
<p id="timeData">Time: <span id="time"></span></p>
|
|||
|
|
<p id="hiddenData">Hidden state: <span id="hid"></span></p>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
function fixedWidthNumber( text, chars ) {
|
|||
|
|
return ( Array( chars ).join( 0 ) + text ).slice( -chars );
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var DEBUG = {
|
|||
|
|
startTimer: function() {
|
|||
|
|
DEBUG.timer = new Date().getTime();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
stopTimer: (function() {
|
|||
|
|
var label = CKEDITOR.document.getById( 'time' ),
|
|||
|
|
max = 0,
|
|||
|
|
count = 0,
|
|||
|
|
values = [],
|
|||
|
|
mean = 0,
|
|||
|
|
time = 0;
|
|||
|
|
|
|||
|
|
return function() {
|
|||
|
|
time = new Date().getTime() - DEBUG.timer;
|
|||
|
|
max = Math.max( time, max );
|
|||
|
|
|
|||
|
|
values.unshift( time );
|
|||
|
|
( 20 in values ) && values.pop();
|
|||
|
|
mean = 0;
|
|||
|
|
|
|||
|
|
for( var i = 0 ; i < values.length ; i++ )
|
|||
|
|
mean += values[ i ];
|
|||
|
|
|
|||
|
|
mean = mean / i;
|
|||
|
|
|
|||
|
|
label.setText( fixedWidthNumber( time, 3 ) +
|
|||
|
|
' ms, mean: ' + fixedWidthNumber( 0 | mean, 3 ) +
|
|||
|
|
' ms, max: ' + fixedWidthNumber( max, 3 ) +
|
|||
|
|
' ms' )
|
|||
|
|
count++;
|
|||
|
|
}
|
|||
|
|
})(),
|
|||
|
|
|
|||
|
|
mousePos: (function( y, element )
|
|||
|
|
{
|
|||
|
|
var my = CKEDITOR.document.getById( 'my' ),
|
|||
|
|
over = CKEDITOR.document.getById( 'over' ),
|
|||
|
|
name;
|
|||
|
|
|
|||
|
|
return function( y, element ) {
|
|||
|
|
my.setText( y );
|
|||
|
|
|
|||
|
|
if( element && element.$ && element.type == CKEDITOR.NODE_ELEMENT ) {
|
|||
|
|
try {
|
|||
|
|
name = element.getName();
|
|||
|
|
over.setText( name + '.' + element.getAttribute( 'class' ) );
|
|||
|
|
} catch( e ) {}
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
over.setText( '-' );
|
|||
|
|
}
|
|||
|
|
})(),
|
|||
|
|
|
|||
|
|
showTrigger: (function( trigger )
|
|||
|
|
{
|
|||
|
|
var tr_type = CKEDITOR.document.getById( 'tr_type' ),
|
|||
|
|
tr_upper = CKEDITOR.document.getById( 'tr_upper' ),
|
|||
|
|
tr_lower = CKEDITOR.document.getById( 'tr_lower' ),
|
|||
|
|
tr_edge = CKEDITOR.document.getById( 'tr_edge' ),
|
|||
|
|
tup, tbo, upper, lower;
|
|||
|
|
|
|||
|
|
return function( trigger ) {
|
|||
|
|
tup && tup.removeAttribute('id') && ( tup = null );
|
|||
|
|
tbo && tbo.removeAttribute('id') && ( tbo = null );
|
|||
|
|
|
|||
|
|
if ( !trigger )
|
|||
|
|
return tr_type.setText( '-' ) &&
|
|||
|
|
tr_upper.setText( '-' ) &&
|
|||
|
|
tr_lower.setText( '-' ) &&
|
|||
|
|
tr_edge.setText( '-' );
|
|||
|
|
|
|||
|
|
upper = trigger.upper,
|
|||
|
|
lower = trigger.lower;
|
|||
|
|
|
|||
|
|
tr_type.setText( trigger.type == 2 ? 'EXPAND': 'EDGE' );
|
|||
|
|
tr_upper.setText( upper ? upper.getName() + '.' + upper.getAttribute( 'class' ): 'NULL' );
|
|||
|
|
tr_lower.setText( lower ? lower.getName() + '.' + lower.getAttribute( 'class' ): 'NULL' );
|
|||
|
|
tr_edge.setText( trigger.edge ? [ 'EDGE_TOP', 'EDGE_BOTTOM', 'EDGE_MIDDLE' ][ trigger.edge - 1 ]: 'NULL' );
|
|||
|
|
|
|||
|
|
upper && ( tup = upper ) && tup.setAttribute( 'id', 'tup' );
|
|||
|
|
lower && ( tbo = lower ) && tbo.setAttribute( 'id', 'tbo' );
|
|||
|
|
}
|
|||
|
|
})(),
|
|||
|
|
|
|||
|
|
showHidden: (function( state )
|
|||
|
|
{
|
|||
|
|
var cnt = CKEDITOR.document.getById( 'hid' );
|
|||
|
|
|
|||
|
|
return function( state ) {
|
|||
|
|
cnt[ state ? 'addClass': 'removeClass' ]( 'hl' );
|
|||
|
|
cnt.setText( state ? 'enabled': 'disabled' );
|
|||
|
|
}
|
|||
|
|
})(),
|
|||
|
|
|
|||
|
|
markElement: function( element ) {
|
|||
|
|
if( !isHtml( element ))
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
DEBUG.marked && DEBUG.marked.setStyles( {
|
|||
|
|
'outline': 'none'
|
|||
|
|
} );
|
|||
|
|
|
|||
|
|
DEBUG.marked = element;
|
|||
|
|
|
|||
|
|
element.setStyles( {
|
|||
|
|
'outline': 'red solid 2px'
|
|||
|
|
} );
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// Log functions.
|
|||
|
|
log: function() {},
|
|||
|
|
logElements: function() {},
|
|||
|
|
groupStart: function() {},
|
|||
|
|
groupEnd: function() {},
|
|||
|
|
logEnd: function() {},
|
|||
|
|
logElementsEnd: function() {}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var logEnable = {
|
|||
|
|
log: function() {
|
|||
|
|
var args = [];
|
|||
|
|
for( var i = 0; i < arguments.length ; i++ )
|
|||
|
|
args.push( arguments[ i ] );
|
|||
|
|
|
|||
|
|
console.log.apply( console, args );
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
logElements: function( elements, labels, info ) {
|
|||
|
|
var log = {},
|
|||
|
|
label;
|
|||
|
|
|
|||
|
|
for ( var i = 0 ; i < elements.length; i++ ) {
|
|||
|
|
label = labels ? labels [ i ] : i;
|
|||
|
|
|
|||
|
|
if( !elements[ i ] ) {
|
|||
|
|
log[ label ] = {
|
|||
|
|
'name': 'null',
|
|||
|
|
'class': 'null'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
log[ labels ? labels [ i ]: i ] = {
|
|||
|
|
'name': elements[ i ].is ? elements[ i ].getName(): 'null',
|
|||
|
|
'class': elements[ i ].is ? elements[ i ].getAttribute( 'class' ): 'null'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
typeof JSON != 'undefined' && DEBUG.log( ( info ? info.toUpperCase() + ' ': '' ) + JSON.stringify( log ) );
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
groupStart: function( label ) {
|
|||
|
|
console.group( label );
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
groupEnd: function() {
|
|||
|
|
console.groupEnd();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
logEnd: function() {
|
|||
|
|
DEBUG.log.apply( null, arguments );
|
|||
|
|
DEBUG.groupEnd();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
logElementsEnd: function() {
|
|||
|
|
DEBUG.logElements.apply( null, arguments );
|
|||
|
|
DEBUG.groupEnd();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Enable console.log debugging with ?debug address parameter.
|
|||
|
|
window.location.href.match( /debug$/g ) ? CKEDITOR.tools.extend( DEBUG, logEnable, true ): null;
|
|||
|
|
|
|||
|
|
// CKEDITOR.addCss('\
|
|||
|
|
// #tup { outline: #FEB2B2 solid 2px; box-shadow: 3px 3px 0 #FEB2B2; } \
|
|||
|
|
// #tbo { outline: #B2FEB2 solid 2px; box-shadow: 3px 3px 0 #B2FEB2; } \
|
|||
|
|
// p { background: pink }\
|
|||
|
|
// ');
|
|||
|
|
|
|||
|
|
CKEDITOR.replace( 'editor1' );
|
|||
|
|
|
|||
|
|
CKEDITOR.replace( 'editor2', { height: 150 } );
|
|||
|
|
|
|||
|
|
CKEDITOR.replace( 'editor3', {
|
|||
|
|
magicline_everywhere: 1,
|
|||
|
|
magicline_holdDistance: .2,
|
|||
|
|
language: 'pl'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
CKEDITOR.replace( 'editor4' );
|
|||
|
|
|
|||
|
|
CKEDITOR.replace( 'hood', {
|
|||
|
|
magicline_color: 'green'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
CKEDITOR.replace( 'editor5', {
|
|||
|
|
enterMode : CKEDITOR.ENTER_BR
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|