diff options
Diffstat (limited to 'release/samples/old/divreplace.html')
-rw-r--r-- | release/samples/old/divreplace.html | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/release/samples/old/divreplace.html b/release/samples/old/divreplace.html new file mode 100644 index 0000000..c6724f0 --- /dev/null +++ b/release/samples/old/divreplace.html | |||
@@ -0,0 +1,144 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- | ||
3 | Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. | ||
4 | For licensing, see LICENSE.md or http://ckeditor.com/license | ||
5 | --> | ||
6 | <html> | ||
7 | <head> | ||
8 | <meta charset="utf-8"> | ||
9 | <title>Replace DIV — CKEditor Sample</title> | ||
10 | <script src="../../ckeditor.js"></script> | ||
11 | <link href="sample.css" rel="stylesheet"> | ||
12 | <style> | ||
13 | |||
14 | div.editable | ||
15 | { | ||
16 | border: solid 2px transparent; | ||
17 | padding-left: 15px; | ||
18 | padding-right: 15px; | ||
19 | } | ||
20 | |||
21 | div.editable:hover | ||
22 | { | ||
23 | border-color: black; | ||
24 | } | ||
25 | |||
26 | </style> | ||
27 | <script> | ||
28 | |||
29 | // Uncomment the following code to test the "Timeout Loading Method". | ||
30 | // CKEDITOR.loadFullCoreTimeout = 5; | ||
31 | |||
32 | window.onload = function() { | ||
33 | // Listen to the double click event. | ||
34 | if ( window.addEventListener ) | ||
35 | document.body.addEventListener( 'dblclick', onDoubleClick, false ); | ||
36 | else if ( window.attachEvent ) | ||
37 | document.body.attachEvent( 'ondblclick', onDoubleClick ); | ||
38 | |||
39 | }; | ||
40 | |||
41 | function onDoubleClick( ev ) { | ||
42 | // Get the element which fired the event. This is not necessarily the | ||
43 | // element to which the event has been attached. | ||
44 | var element = ev.target || ev.srcElement; | ||
45 | |||
46 | // Find out the div that holds this element. | ||
47 | var name; | ||
48 | |||
49 | do { | ||
50 | element = element.parentNode; | ||
51 | } | ||
52 | while ( element && ( name = element.nodeName.toLowerCase() ) && | ||
53 | ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' ); | ||
54 | |||
55 | if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 ) | ||
56 | replaceDiv( element ); | ||
57 | } | ||
58 | |||
59 | var editor; | ||
60 | |||
61 | function replaceDiv( div ) { | ||
62 | if ( editor ) | ||
63 | editor.destroy(); | ||
64 | |||
65 | editor = CKEDITOR.replace( div ); | ||
66 | } | ||
67 | |||
68 | </script> | ||
69 | </head> | ||
70 | <body> | ||
71 | <h1 class="samples"> | ||
72 | <a href="index.html">CKEditor Samples</a> » Replace DIV with CKEditor on the Fly | ||
73 | </h1> | ||
74 | <div class="warning deprecated"> | ||
75 | This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>. | ||
76 | </div> | ||
77 | <div class="description"> | ||
78 | <p> | ||
79 | This sample shows how to automatically replace <code><div></code> elements | ||
80 | with a CKEditor instance on the fly, following user's doubleclick. The content | ||
81 | that was previously placed inside the <code><div></code> element will now | ||
82 | be moved into CKEditor editing area. | ||
83 | </p> | ||
84 | <p> | ||
85 | For details on how to create this setup check the source code of this sample page. | ||
86 | </p> | ||
87 | </div> | ||
88 | <p> | ||
89 | Double-click any of the following <code><div></code> elements to transform them into | ||
90 | editor instances. | ||
91 | </p> | ||
92 | <div class="editable"> | ||
93 | <h3> | ||
94 | Part 1 | ||
95 | </h3> | ||
96 | <p> | ||
97 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi | ||
98 | semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna | ||
99 | rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla | ||
100 | nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce | ||
101 | eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus. | ||
102 | </p> | ||
103 | </div> | ||
104 | <div class="editable"> | ||
105 | <h3> | ||
106 | Part 2 | ||
107 | </h3> | ||
108 | <p> | ||
109 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi | ||
110 | semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna | ||
111 | rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla | ||
112 | nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce | ||
113 | eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus. | ||
114 | </p> | ||
115 | <p> | ||
116 | Donec velit. Mauris massa. Vestibulum non nulla. Nam suscipit arcu nec elit. Phasellus | ||
117 | sollicitudin iaculis ante. Ut non mauris et sapien tincidunt adipiscing. Vestibulum | ||
118 | vitae leo. Suspendisse nec mi tristique nulla laoreet vulputate. | ||
119 | </p> | ||
120 | </div> | ||
121 | <div class="editable"> | ||
122 | <h3> | ||
123 | Part 3 | ||
124 | </h3> | ||
125 | <p> | ||
126 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi | ||
127 | semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna | ||
128 | rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla | ||
129 | nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce | ||
130 | eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus. | ||
131 | </p> | ||
132 | </div> | ||
133 | <div id="footer"> | ||
134 | <hr> | ||
135 | <p> | ||
136 | CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> | ||
137 | </p> | ||
138 | <p id="copy"> | ||
139 | Copyright © 2003-2017, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico | ||
140 | Knabben. All rights reserved. | ||
141 | </p> | ||
142 | </div> | ||
143 | </body> | ||
144 | </html> | ||