|
1 <!DOCTYPE html> |
|
2 <!-- |
|
3 Copyright (c) 2003-2015, 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="description"> |
|
75 <p> |
|
76 This sample shows how to automatically replace <code><div></code> elements |
|
77 with a CKEditor instance on the fly, following user's doubleclick. The content |
|
78 that was previously placed inside the <code><div></code> element will now |
|
79 be moved into CKEditor editing area. |
|
80 </p> |
|
81 <p> |
|
82 For details on how to create this setup check the source code of this sample page. |
|
83 </p> |
|
84 </div> |
|
85 <p> |
|
86 Double-click any of the following <code><div></code> elements to transform them into |
|
87 editor instances. |
|
88 </p> |
|
89 <div class="editable"> |
|
90 <h3> |
|
91 Part 1 |
|
92 </h3> |
|
93 <p> |
|
94 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi |
|
95 semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna |
|
96 rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla |
|
97 nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce |
|
98 eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus. |
|
99 </p> |
|
100 </div> |
|
101 <div class="editable"> |
|
102 <h3> |
|
103 Part 2 |
|
104 </h3> |
|
105 <p> |
|
106 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi |
|
107 semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna |
|
108 rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla |
|
109 nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce |
|
110 eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus. |
|
111 </p> |
|
112 <p> |
|
113 Donec velit. Mauris massa. Vestibulum non nulla. Nam suscipit arcu nec elit. Phasellus |
|
114 sollicitudin iaculis ante. Ut non mauris et sapien tincidunt adipiscing. Vestibulum |
|
115 vitae leo. Suspendisse nec mi tristique nulla laoreet vulputate. |
|
116 </p> |
|
117 </div> |
|
118 <div class="editable"> |
|
119 <h3> |
|
120 Part 3 |
|
121 </h3> |
|
122 <p> |
|
123 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et ipsum quis mi |
|
124 semper accumsan. Integer pretium dui id massa. Suspendisse in nisl sit amet urna |
|
125 rutrum imperdiet. Nulla eu tellus. Donec ante nisi, ullamcorper quis, fringilla |
|
126 nec, sagittis eleifend, pede. Nulla commodo interdum massa. Donec id metus. Fusce |
|
127 eu ipsum. Suspendisse auctor. Phasellus fermentum porttitor risus. |
|
128 </p> |
|
129 </div> |
|
130 <div id="footer"> |
|
131 <hr> |
|
132 <p> |
|
133 CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> |
|
134 </p> |
|
135 <p id="copy"> |
|
136 Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico |
|
137 Knabben. All rights reserved. |
|
138 </p> |
|
139 </div> |
|
140 </body> |
|
141 </html> |