]>
Commit | Line | Data |
---|---|---|
1 | <!DOCTYPE html> | |
2 | <!-- | |
3 | Copyright (c) 2003-2016, 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-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico | |
140 | Knabben. All rights reserved. | |
141 | </p> | |
142 | </div> | |
143 | </body> | |
144 | </html> |