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