]>
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>Indent DEV sample</title>\r | |
10 | <script src="../../../ckeditor.js"></script>\r | |
11 | <style>\r | |
12 | body {\r | |
13 | padding: 20px;\r | |
14 | margin: 0;\r | |
15 | }\r | |
16 | .editors {\r | |
17 | display: block;\r | |
18 | overflow: hidden;\r | |
19 | width: 100%;\r | |
20 | margin: 0px auto;\r | |
21 | list-style-type: none;\r | |
22 | margin: 0;\r | |
23 | padding: 0;\r | |
24 | \r | |
25 | box-sizing: content-box;\r | |
26 | \r | |
27 | background: #eee;\r | |
28 | }\r | |
29 | .editors li {\r | |
30 | width: 50%;\r | |
31 | margin: 0;\r | |
32 | padding: 10px;\r | |
33 | float: left;\r | |
34 | \r | |
35 | box-sizing: border-box;\r | |
36 | }\r | |
37 | .editors li:nth-child(2n) {\r | |
38 | background: #D4E59A;\r | |
39 | }\r | |
40 | #menu {\r | |
41 | position: fixed;\r | |
42 | top: 0;\r | |
43 | right: 20px;\r | |
44 | padding: 5px;\r | |
45 | border: 1px solid #aaa;\r | |
46 | background: #eee;\r | |
47 | }\r | |
48 | \r | |
49 | </style>\r | |
50 | </head>\r | |
51 | <body>\r | |
52 | <p id="menu">\r | |
53 | <a href="#listnblock">List & Block</a>,\r | |
54 | <a href="#classes">Classes</a>,\r | |
55 | <a href="#list">List</a>,\r | |
56 | <a href="#block">Block</a>,\r | |
57 | <a href="#br">ENTER_BR</a>\r | |
58 | </p>\r | |
59 | \r | |
60 | <h1 class="samples">Indent DEV sample</h1>\r | |
61 | <h2 id="listnblock">List & Block</h2>\r | |
62 | <ul class="editors">\r | |
63 | <li>\r | |
64 | <textarea cols="80" id="editor1" rows="10">\r | |
65 | <p>xx</p>\r | |
66 | <ul>\r | |
67 | <li>x</li>\r | |
68 | <li>y</li>\r | |
69 | </ul>\r | |
70 | <p>xx</p>\r | |
71 | \r | |
72 | <br>\r | |
73 | \r | |
74 | <ul><li><ol><li>xx</li></ol></li><li>yy</li></ul>\r | |
75 | </textarea>\r | |
76 | </li>\r | |
77 | <li>\r | |
78 | <pre id="editor1_out"></pre>\r | |
79 | </li>\r | |
80 | </ul>\r | |
81 | \r | |
82 | <h2 id="classes">Indent classes</h2>\r | |
83 | <ul class="editors">\r | |
84 | <li>\r | |
85 | <textarea cols="80" id="editor2" rows="10">\r | |
86 | <ul>\r | |
87 | <li>a</li>\r | |
88 | <li>\r | |
89 | b\r | |
90 | <ol>\r | |
91 | <li>inner</li>\r | |
92 | </ol>\r | |
93 | </li>\r | |
94 | <li>c</li>\r | |
95 | </ul>\r | |
96 | <p>moo</p>\r | |
97 | </textarea>\r | |
98 | </li>\r | |
99 | <li>\r | |
100 | <pre id="editor2_out"></pre>\r | |
101 | </li>\r | |
102 | </ul>\r | |
103 | \r | |
104 | <h2 id="list">List only</h2>\r | |
105 | <ul class="editors">\r | |
106 | <li>\r | |
107 | <textarea cols="80" id="editor3" rows="10">\r | |
108 | <ul>\r | |
109 | <li>a</li>\r | |
110 | <li>\r | |
111 | b\r | |
112 | <ol>\r | |
113 | <li>inner</li>\r | |
114 | </ol>\r | |
115 | </li>\r | |
116 | <li>c</li>\r | |
117 | </ul>\r | |
118 | <p>moo</p>\r | |
119 | </textarea>\r | |
120 | </li>\r | |
121 | <li>\r | |
122 | <pre id="editor3_out"></pre>\r | |
123 | </li>\r | |
124 | </ul>\r | |
125 | \r | |
126 | <h2 id="block">Block only</h2>\r | |
127 | <ul class="editors">\r | |
128 | <li>\r | |
129 | <textarea cols="80" id="editor4" rows="10">\r | |
130 | <ul>\r | |
131 | <li>a</li>\r | |
132 | <li>\r | |
133 | b\r | |
134 | <ol>\r | |
135 | <li>inner</li>\r | |
136 | </ol>\r | |
137 | </li>\r | |
138 | <li>c</li>\r | |
139 | </ul>\r | |
140 | <p>moo</p>\r | |
141 | </textarea>\r | |
142 | </li>\r | |
143 | <li>\r | |
144 | <pre id="editor4_out"></pre>\r | |
145 | </li>\r | |
146 | </ul>\r | |
147 | \r | |
148 | <h2 id="br">CKEDITOR.ENTER_BR</h2>\r | |
149 | <ul class="editors">\r | |
150 | <li>\r | |
151 | <textarea cols="80" id="editor5" rows="10">\r | |
152 | Text\r | |
153 | <br>\r | |
154 | <ul>\r | |
155 | <li>a</li>\r | |
156 | <li>b</li>\r | |
157 | </ul>\r | |
158 | </textarea>\r | |
159 | </li>\r | |
160 | <li>\r | |
161 | <pre id="editor5_out"></pre>\r | |
162 | </li>\r | |
163 | </ul>\r | |
164 | <script>\r | |
165 | \r | |
166 | var plugins = 'enterkey,toolbar,htmlwriter,wysiwygarea,undo,sourcearea,clipboard,list,justify,indent,indentlist,indentblock';\r | |
167 | \r | |
168 | CKEDITOR.config.indentOffset = 10;\r | |
169 | CKEDITOR.addCss( '\\r | |
170 | .i1{ margin-left: 10px}\\r | |
171 | .i2{ margin-left: 20px}\\r | |
172 | .i3{ margin-left: 30px}' );\r | |
173 | \r | |
174 | function showData( event ) {\r | |
175 | CKEDITOR.document.getById( this.name + '_out' ).setText( getHtmlWithSelection( this ) );\r | |
176 | }\r | |
177 | \r | |
178 | function browserHtmlFix( html ) {\r | |
179 | if ( CKEDITOR.env.ie && ( document.documentMode || CKEDITOR.env.version ) < 9 ) {\r | |
180 | // Fix output base href on anchored link.\r | |
181 | html = html.replace( /href="(.*?)#(.*?)"/gi,\r | |
182 | function( m, base, anchor ) {\r | |
183 | if ( base == window.location.href.replace( window.location.hash, '' ) )\r | |
184 | return 'href="#' + anchor + '"';\r | |
185 | \r | |
186 | return m;\r | |
187 | } );\r | |
188 | \r | |
189 | // Fix output line break after HR.\r | |
190 | html = html.replace( /(<HR>)\r\n/gi, function( m, hr ) { return hr; } );\r | |
191 | }\r | |
192 | \r | |
193 | return html;\r | |
194 | }\r | |
195 | \r | |
196 | function getHtmlWithSelection( editorOrElement, root ) {\r | |
197 | var isEditor = editorOrElement instanceof CKEDITOR.editor,\r | |
198 | element = isEditor ? editorOrElement.editable() : editorOrElement;\r | |
199 | \r | |
200 | root = isEditor ? element :\r | |
201 | root instanceof CKEDITOR.dom.document ?\r | |
202 | root.getBody() : root || CKEDITOR.document.getBody();\r | |
203 | \r | |
204 | function replaceWithBookmark( match, startOrEnd ) {\r | |
205 | var bookmark;\r | |
206 | switch( startOrEnd ) {\r | |
207 | case 'S' :\r | |
208 | bookmark = '[';\r | |
209 | break;\r | |
210 | case 'E' :\r | |
211 | bookmark = ']';\r | |
212 | break;\r | |
213 | case 'C' :\r | |
214 | bookmark = '^';\r | |
215 | break;\r | |
216 | }\r | |
217 | return bookmark;\r | |
218 | }\r | |
219 | \r | |
220 | // Hack: force remove the filling char hack in Webkit.\r | |
221 | isEditor && CKEDITOR.env.webkit && editorOrElement.fire( 'beforeSetMode' );\r | |
222 | \r | |
223 | var sel = isEditor ? editorOrElement.getSelection()\r | |
224 | : new CKEDITOR.dom.selection( root );\r | |
225 | \r | |
226 | var doc = sel.document;\r | |
227 | var ranges = sel.getRanges(),\r | |
228 | range;\r | |
229 | \r | |
230 | var bms = [];\r | |
231 | var iter = ranges.createIterator();\r | |
232 | while( range = iter.getNextRange() )\r | |
233 | bms.push( range.createBookmark( 1 ) );\r | |
234 | \r | |
235 | var html = browserHtmlFix( isEditor ? editorOrElement.getData() : element.getHtml() );\r | |
236 | html = html.replace( /<span\b[^>]*?id="?cke_bm_\d+(\w)"?\b[^>]*?>.*?<\/span>/gi,\r | |
237 | replaceWithBookmark );\r | |
238 | \r | |
239 | for ( var i = 0, bm; i < bms.length; i++ ) {\r | |
240 | bm = bms[ i ];\r | |
241 | var start = doc.getById( bm.startNode ),\r | |
242 | end = doc.getById( bm.endNode );\r | |
243 | \r | |
244 | start && start.remove();\r | |
245 | end && end.remove();\r | |
246 | }\r | |
247 | \r | |
248 | return html;\r | |
249 | }\r | |
250 | \r | |
251 | CKEDITOR.on( 'instanceReady', function ( event ) {\r | |
252 | var editor = event.editor;\r | |
253 | \r | |
254 | showData.call( editor );\r | |
255 | \r | |
256 | editor.on( 'afterCommandExec', showData, editor );\r | |
257 | });\r | |
258 | \r | |
259 | CKEDITOR.replace( 'editor1', {\r | |
260 | plugins: plugins\r | |
261 | } );\r | |
262 | \r | |
263 | CKEDITOR.replace( 'editor2', {\r | |
264 | plugins: plugins,\r | |
265 | indentClasses: [ 'i1', 'i2', 'i3' ]\r | |
266 | } );\r | |
267 | \r | |
268 | CKEDITOR.replace( 'editor3', {\r | |
269 | plugins: plugins,\r | |
270 | removePlugins: 'indentblock'\r | |
271 | } );\r | |
272 | \r | |
273 | CKEDITOR.replace( 'editor4', {\r | |
274 | plugins: plugins,\r | |
275 | removePlugins: 'indentlist'\r | |
276 | } );\r | |
277 | \r | |
278 | CKEDITOR.replace( 'editor5', {\r | |
279 | plugins: plugins,\r | |
280 | enterMode: CKEDITOR.ENTER_BR\r | |
281 | } );\r | |
282 | </script>\r | |
283 | </body>\r | |
284 | </html>\r |