1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/ckeditor/samples/old/divreplace.html Thu Dec 15 18:10:20 2016 +0300
1.3 @@ -0,0 +1,144 @@
1.4 +<!DOCTYPE html>
1.5 +<!--
1.6 +Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
1.7 +For licensing, see LICENSE.md or http://ckeditor.com/license
1.8 +-->
1.9 +<html>
1.10 +<head>
1.11 + <meta charset="utf-8">
1.12 + <title>Replace DIV — CKEditor Sample</title>
1.13 + <script src="../../ckeditor.js"></script>
1.14 + <link href="sample.css" rel="stylesheet">
1.15 + <style>
1.16 +
1.17 + div.editable
1.18 + {
1.19 + border: solid 2px transparent;
1.20 + padding-left: 15px;
1.21 + padding-right: 15px;
1.22 + }
1.23 +
1.24 + div.editable:hover
1.25 + {
1.26 + border-color: black;
1.27 + }
1.28 +
1.29 + </style>
1.30 + <script>
1.31 +
1.32 + // Uncomment the following code to test the "Timeout Loading Method".
1.33 + // CKEDITOR.loadFullCoreTimeout = 5;
1.34 +
1.35 + window.onload = function() {
1.36 + // Listen to the double click event.
1.37 + if ( window.addEventListener )
1.38 + document.body.addEventListener( 'dblclick', onDoubleClick, false );
1.39 + else if ( window.attachEvent )
1.40 + document.body.attachEvent( 'ondblclick', onDoubleClick );
1.41 +
1.42 + };
1.43 +
1.44 + function onDoubleClick( ev ) {
1.45 + // Get the element which fired the event. This is not necessarily the
1.46 + // element to which the event has been attached.
1.47 + var element = ev.target || ev.srcElement;
1.48 +
1.49 + // Find out the div that holds this element.
1.50 + var name;
1.51 +
1.52 + do {
1.53 + element = element.parentNode;
1.54 + }
1.55 + while ( element && ( name = element.nodeName.toLowerCase() ) &&
1.56 + ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' );
1.57 +
1.58 + if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
1.59 + replaceDiv( element );
1.60 + }
1.61 +
1.62 + var editor;
1.63 +
1.64 + function replaceDiv( div ) {
1.65 + if ( editor )
1.66 + editor.destroy();
1.67 +
1.68 + editor = CKEDITOR.replace( div );
1.69 + }
1.70 +
1.71 + </script>
1.72 +</head>
1.73 +<body>
1.74 + <h1 class="samples">
1.75 + <a href="index.html">CKEditor Samples</a> » Replace DIV with CKEditor on the Fly
1.76 + </h1>
1.77 + <div class="warning deprecated">
1.78 + This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.
1.79 + </div>
1.80 + <div class="description">
1.81 + <p>
1.82 + This sample shows how to automatically replace <code><div></code> elements
1.83 + with a CKEditor instance on the fly, following user's doubleclick. The content
1.84 + that was previously placed inside the <code><div></code> element will now
1.85 + be moved into CKEditor editing area.
1.86 + </p>
1.87 + <p>
1.88 + For details on how to create this setup check the source code of this sample page.
1.89 + </p>
1.90 + </div>
1.91 + <p>
1.92 + Double-click any of the following <code><div></code> elements to transform them into
1.93 + editor instances.
1.94 + </p>
1.95 + <div class="editable">
1.96 + <h3>
1.97 + Part 1
1.98 + </h3>
1.99 + <p>
1.100 + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
1.101 + semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
1.102 + rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
1.103 + nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
1.104 + eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
1.105 + </p>
1.106 + </div>
1.107 + <div class="editable">
1.108 + <h3>
1.109 + Part 2
1.110 + </h3>
1.111 + <p>
1.112 + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
1.113 + semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
1.114 + rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
1.115 + nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
1.116 + eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
1.117 + </p>
1.118 + <p>
1.119 + Donec velit. Mauris massa. Vestibulum non nulla. Nam suscipit arcu nec elit. Phasellus
1.120 + sollicitudin iaculis ante. Ut non mauris et sapien tincidunt adipiscing. Vestibulum
1.121 + vitae leo. Suspendisse nec mi tristique nulla laoreet vulputate.
1.122 + </p>
1.123 + </div>
1.124 + <div class="editable">
1.125 + <h3>
1.126 + Part 3
1.127 + </h3>
1.128 + <p>
1.129 + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi
1.130 + semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna
1.131 + rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla
1.132 + nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce
1.133 + eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus.
1.134 + </p>
1.135 + </div>
1.136 + <div id="footer">
1.137 + <hr>
1.138 + <p>
1.139 + CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
1.140 + </p>
1.141 + <p id="copy">
1.142 + Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
1.143 + Knabben. All rights reserved.
1.144 + </p>
1.145 + </div>
1.146 +</body>
1.147 +</html>