jslint
[ckeditor.git] / skins / ckeditor / plugins / codemirror / plugin.js
1 /*
2 * The "codemirror" plugin. It's indented to enhance the
3 * "sourcearea" editing mode, which displays the xhtml source code with
4 * syntax highlight and line numbers.
5 * Licensed under the MIT license
6 * CodeMirror Plugin: http://codemirror.net/ (MIT License)
7 */
8
9 (function() {
10 CKEDITOR.plugins.add('codemirror', {
11 icons: 'SearchCode,AutoFormat,CommentSelectedRange,UncommentSelectedRange,AutoComplete',
12 lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,el,en-au,en-ca,en-gb,en,eo,es,et,eu,fa,fi,fo,fr-ca,fr,gl,gu,he,hi,hr,hu,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt-br,pt,ro,ru,sk,sl,sr-latn,sr,sv,th,tr,ug,uk,vi,zh-cn,zh',
13 version: 1.10,
14 init: function (editor) {
15 var rootPath = this.path,
16 defaultConfig = {
17 autoCloseBrackets: true,
18 autoCloseTags: true,
19 autoFormatOnStart: false,
20 autoFormatOnUncomment: true,
21 continueComments: true,
22 enableCodeFolding: true,
23 enableCodeFormatting: true,
24 enableSearchTools: true,
25 highlightActiveLine: true,
26 highlightMatches: true,
27 indentWithTabs: false,
28 lineNumbers: true,
29 lineWrapping: true,
30 mode: 'htmlmixed',
31 matchBrackets: true,
32 matchTags: true,
33 showAutoCompleteButton: true,
34 showCommentButton: true,
35 showFormatButton: true,
36 showSearchButton: true,
37 showTrailingSpace: true,
38 showUncommentButton: true,
39 theme: 'default',
40 useBeautify: false
41 };
42
43 // Get Config & Lang
44 var config = CKEDITOR.tools.extend(defaultConfig, editor.config.codemirror || {}, true),
45 lang = editor.lang.codemirror;
46
47 // check for old config settings for legacy support
48 if (editor.config.codemirror_theme) {
49 config.theme = editor.config.codemirror_theme;
50 }
51 if (editor.config.codemirror_autoFormatOnStart) {
52 config.autoFormatOnStart = editor.config.codemirror_autoFormatOnStart;
53 }
54
55 // Source mode isn't available in inline mode yet.
56 if (editor.elementMode === CKEDITOR.ELEMENT_MODE_INLINE) {
57
58 // Override Source Dialog
59 CKEDITOR.dialog.add('sourcedialog', function (editor) {
60 var size = CKEDITOR.document.getWindow().getViewPaneSize(),
61 width = Math.min(size.width - 70, 800),
62 height = size.height / 1.5,
63 oldData;
64
65 function loadCodeMirrorInline(editor, textarea) {
66 var delay;
67
68 window["codemirror_" + editor.id] = CodeMirror.fromTextArea(textarea, {
69 mode: config.mode,
70 matchBrackets: config.matchBrackets,
71 matchTags: config.matchTags,
72 workDelay: 300,
73 workTime: 35,
74 readOnly: editor.config.readOnly,
75 lineNumbers: config.lineNumbers,
76 lineWrapping: config.lineWrapping,
77 autoCloseTags: config.autoCloseTags,
78 autoCloseBrackets: config.autoCloseBrackets,
79 highligctionMatches: config.highlightMatches,
80 continueComments: config.continueComments,
81 indentWithTabs: config.indentWithTabs,
82 theme: config.theme,
83 showTrailingSpace: config.showTrailingSpace,
84 showCursorWhenSelecting: true,
85 viewportMargin: Infinity,
86 //extraKeys: {"Ctrl-Space": "autocomplete"},
87 extraKeys: { "Ctrl-Q": function (codeMirror_Editor) { window["foldFunc_" + editor.id](codeMirror_Editor, codeMirror_Editor.getCursor().line); } },
88 onKeyEvent: function (codeMirror_Editor, evt) {
89 if (config.enableCodeFormatting) {
90 var range = getSelectedRange();
91 if (evt.type === "keydown" && evt.ctrlKey && evt.keyCode === 75 && !evt.shiftKey && !evt.altKey) {
92 window["codemirror_" + editor.id].commentRange(true, range.from, range.to);
93 } else if (evt.type === "keydown" && evt.ctrlKey && evt.keyCode === 75 && evt.shiftKey && !evt.altKey) {
94 window["codemirror_" + editor.id].commentRange(false, range.from, range.to);
95 if (config.autoFormatOnUncomment) {
96 window["codemirror_" + editor.id].autoFormatRange(range.from, range.to);
97 }
98 } else if (evt.type === "keydown" && evt.ctrlKey && evt.keyCode === 75 && !evt.shiftKey && evt.altKey) {
99 window["codemirror_" + editor.id].autoFormatRange(range.from, range.to);
100 }
101 /*else if (evt.type === "keydown") {
102 CodeMirror.commands.newlineAndIndentContinueMarkdownList(window["codemirror_" + editor.id]);
103 }*/
104 }
105 }
106 });
107
108 var holderHeight = height + 'px';
109 var holderWidth = width + 'px';
110
111 // Store config so we can access it within commands etc.
112 window["codemirror_" + editor.id].config = config;
113
114 if (config.autoFormatOnStart) {
115 if (config.useBeautify) {
116 var indent_size = 4,
117 indent_char = ' ',
118 brace_style = 'collapse'; //collapse, expand, end-expand
119
120 var source = window["codemirror_" + editor.id].getValue();
121
122 window["codemirror_" + editor.id].setValue(html_beautify(source, indent_size, indent_char, 120, brace_style));
123 } else {
124 window["codemirror_" + editor.id].autoFormatAll({
125 line: 0,
126 ch: 0
127 }, {
128 line: window["codemirror_" + editor.id].lineCount(),
129 ch: 0
130 });
131 }
132 }
133
134 function getSelectedRange() {
135 return {
136 from: window["codemirror_" + editor.id].getCursor(true),
137 to: window["codemirror_" + editor.id].getCursor(false)
138 };
139 }
140
141 window["codemirror_" + editor.id].on("change", function () {
142 clearTimeout(delay);
143 delay = setTimeout(function () {
144 var cm = window["codemirror_" + editor.id];
145
146 if (cm) {
147 cm.save();
148 }
149 }, 300);
150 });
151
152 window["codemirror_" + editor.id].setSize(holderWidth, holderHeight);
153
154 // Enable Code Folding (Requires 'lineNumbers' to be set to 'true')
155 if (config.lineNumbers && config.enableCodeFolding) {
156 window["codemirror_" + editor.id].on("gutterClick", window["foldFunc_" + editor.id]);
157 }
158 // Highlight Active Line
159 if (config.highlightActiveLine) {
160 window["codemirror_" + editor.id].hlLine = window["codemirror_" + editor.id].addLineClass(0, "background", "activeline");
161 window["codemirror_" + editor.id].on("cursorActivity", function () {
162 var cur = window["codemirror_" + editor.id].getLineHandle(window["codemirror_" + editor.id].getCursor().line);
163 if (cur != window["codemirror_" + editor.id].hlLine) {
164 window["codemirror_" + editor.id].removeLineClass(window["codemirror_" + editor.id].hlLine, "background", "activeline");
165 window["codemirror_" + editor.id].hlLine = window["codemirror_" + editor.id].addLineClass(cur, "background", "activeline");
166 }
167 });
168 }
169
170 // Run config.onLoad callback, if present.
171 if (typeof config.onLoad === 'function') {
172 config.onLoad(window["codemirror_" + editor.id], editor);
173 }
174 }
175
176 return {
177 title: editor.lang.sourcedialog.title,
178 minWidth: width,
179 minHeight: height,
180 resizable : CKEDITOR.DIALOG_RESIZE_NONE,
181 onShow: function () {
182 // Set Elements
183 this.getContentElement('main', 'data').focus();
184 this.getContentElement('main', 'AutoComplete').setValue(config.autoCloseTags, true);
185
186 var textArea = this.getContentElement('main', 'data').getInputElement().$;
187
188 // Load the content
189 this.setValueOf('main', 'data', oldData = editor.getData());
190
191 if (typeof (CodeMirror) == 'undefined') {
192
193 CKEDITOR.document.appendStyleSheet(rootPath + 'css/codemirror.min.css');
194
195 if (config.theme.length && config.theme != 'default') {
196 CKEDITOR.document.appendStyleSheet(rootPath + 'theme/' + config.theme + '.css');
197 }
198
199 CKEDITOR.scriptLoader.load(rootPath + 'js/codemirror.min.js', function () {
200
201 CKEDITOR.scriptLoader.load(getCodeMirrorScripts(), function () {
202 loadCodeMirrorInline(editor, textArea);
203 });
204 });
205
206
207 } else {
208 loadCodeMirrorInline(editor, textArea);
209 }
210
211
212 },
213 onCancel: function (event) {
214 if (event.data.hide) {
215 window["codemirror_" + editor.id].toTextArea();
216
217 // Free Memory
218 window["codemirror_" + editor.id] = null;
219 }
220 },
221 onOk: (function () {
222
223 function setData(newData) {
224 var that = this;
225
226 editor.setData(newData, function () {
227 that.hide();
228
229 // Ensure correct selection.
230 var range = editor.createRange();
231 range.moveToElementEditStart(editor.editable());
232 range.select();
233 });
234 }
235
236 return function () {
237 window["codemirror_" + editor.id].toTextArea();
238
239 // Free Memory
240 window["codemirror_" + editor.id] = null;
241
242 // Remove CR from input data for reliable comparison with editor data.
243 var newData = this.getValueOf('main', 'data').replace(/\r/g, '');
244
245 // Avoid unnecessary setData. Also preserve selection
246 // when user changed his mind and goes back to wysiwyg editing.
247 if (newData === oldData)
248 return true;
249
250 // Set data asynchronously to avoid errors in IE.
251 CKEDITOR.env.ie ? CKEDITOR.tools.setTimeout(setData, 0, this, newData) : setData.call(this, newData);
252
253 // Don't let the dialog close before setData is over.
254 return false;
255 };
256 })(),
257
258 contents: [{
259 id: 'main',
260 label: editor.lang.sourcedialog.title,
261 elements: [
262 {
263 type: 'hbox',
264 style: 'width: 80px;margin:0;',
265 widths: ['20px', '20px', '20px', '20px'],
266 children: [
267 {
268 type: 'button',
269 id: 'searchCode',
270 label: '',
271 title: lang.searchCode,
272 'class': 'searchCodeButton',
273 onClick: function() {
274 CodeMirror.commands.find(window["codemirror_" + editor.id]);
275 }
276 }, {
277 type: 'button',
278 id: 'autoFormat',
279 label: '',
280 title: lang.autoFormat,
281 'class': 'autoFormat',
282 onClick: function() {
283 var range = {
284 from: window["codemirror_" + editor.id].getCursor(true),
285 to: window["codemirror_" + editor.id].getCursor(false)
286 };
287 window["codemirror_" + editor.id].autoFormatRange(range.from, range.to);
288 }
289 }, {
290 type: 'button',
291 id: 'CommentSelectedRange',
292 label: '',
293 title: lang.commentSelectedRange,
294 'class': 'CommentSelectedRange',
295 onClick: function () {
296 var range = {
297 from: window["codemirror_" + editor.id].getCursor(true),
298 to: window["codemirror_" + editor.id].getCursor(false)
299 };
300 window["codemirror_" + editor.id].commentRange(true, range.from, range.to);
301 }
302 }, {
303 type: 'button',
304 id: 'UncommentSelectedRange',
305 label: '',
306 title: lang.uncommentSelectedRange,
307 'class': 'UncommentSelectedRange',
308 onClick: function () {
309 var range = {
310 from: window["codemirror_" + editor.id].getCursor(true),
311 to: window["codemirror_" + editor.id].getCursor(false)
312 };
313 window["codemirror_" + editor.id].commentRange(false, range.from, range.to);
314 if (window["codemirror_" + editor.id].config.autoFormatOnUncomment) {
315 window["codemirror_" + editor.id].autoFormatRange(range.from, range.to);
316 }
317 }
318 }]
319 }, {
320 type: 'checkbox',
321 id: 'AutoComplete',
322 label: lang.autoCompleteToggle,
323 title: lang.autoCompleteToggle,
324 onChange: function () {
325 window["codemirror_" + editor.id].setOption("autoCloseTags", this.getValue());
326 }
327 }, {
328 type: 'textarea',
329 id: 'data',
330 dir: 'ltr',
331 inputStyle: 'cursor:auto;' +
332 'width:' + width + 'px;' +
333 'height:' + height + 'px;' +
334 'tab-size:4;' +
335 'text-align:left;',
336 'class': 'cke_source cke_enable_context_menu'
337 }
338 ]
339 }]
340 };
341 });
342
343 return;
344 }
345
346 var sourcearea = CKEDITOR.plugins.sourcearea;
347
348 // check if sourcearea plugin is overrriden
349 if (!sourcearea.commands.searchCode) {
350
351 CKEDITOR.plugins.sourcearea.commands = {
352 source: {
353 modes: {
354 wysiwyg: 1,
355 source: 1
356 },
357 editorFocus: false,
358 readOnly: 1,
359 exec: function(editorInstance) {
360 if (editorInstance.mode === 'wysiwyg') {
361 editorInstance.fire('saveSnapshot');
362 }
363 editorInstance.getCommand('source').setState(CKEDITOR.TRISTATE_DISABLED);
364 editorInstance.setMode(editorInstance.mode === 'source' ? 'wysiwyg' : 'source');
365 },
366 canUndo: false
367 },
368 searchCode: {
369 modes: {
370 wysiwyg: 0,
371 source: 1
372 },
373 editorFocus: false,
374 readOnly: 1,
375 exec: function (editorInstance) {
376 CodeMirror.commands.find(window["codemirror_" + editorInstance.id]);
377 },
378 canUndo: true
379 },
380 autoFormat: {
381 modes: {
382 wysiwyg: 0,
383 source: 1
384 },
385 editorFocus: false,
386 readOnly: 1,
387 exec: function (editorInstance) {
388 var range = {
389 from: window["codemirror_" + editorInstance.id].getCursor(true),
390 to: window["codemirror_" + editorInstance.id].getCursor(false)
391 };
392 window["codemirror_" + editorInstance.id].autoFormatRange(range.from, range.to);
393 },
394 canUndo: true
395 },
396 commentSelectedRange: {
397 modes: {
398 wysiwyg: 0,
399 source: 1
400 },
401 editorFocus: false,
402 readOnly: 1,
403 exec: function (editorInstance) {
404 var range = {
405 from: window["codemirror_" + editorInstance.id].getCursor(true),
406 to: window["codemirror_" + editorInstance.id].getCursor(false)
407 };
408 window["codemirror_" + editorInstance.id].commentRange(true, range.from, range.to);
409 },
410 canUndo: true
411 },
412 uncommentSelectedRange: {
413 modes: {
414 wysiwyg: 0,
415 source: 1
416 },
417 editorFocus: false,
418 readOnly: 1,
419 exec: function (editorInstance) {
420 var range = {
421 from: window["codemirror_" + editorInstance.id].getCursor(true),
422 to: window["codemirror_" + editorInstance.id].getCursor(false)
423 };
424 window["codemirror_" + editorInstance.id].commentRange(false, range.from, range.to);
425 if (window["codemirror_" + editorInstance.id].config.autoFormatOnUncomment) {
426 window["codemirror_" + editorInstance.id].autoFormatRange(
427 range.from,
428 range.to);
429 }
430 },
431 canUndo: true
432 },
433 autoCompleteToggle: {
434 modes: {
435 wysiwyg: 0,
436 source: 1
437 },
438 editorFocus: false,
439 readOnly: 1,
440 exec: function (editorInstance) {
441 if (this.state == CKEDITOR.TRISTATE_ON) {
442 window["codemirror_" + editorInstance.id].setOption("autoCloseTags", false);
443 } else if (this.state == CKEDITOR.TRISTATE_OFF) {
444 window["codemirror_" + editorInstance.id].setOption("autoCloseTags", true);
445 }
446
447 this.toggleState();
448 },
449 canUndo: true
450 }
451 };
452 }
453
454
455
456
457 editor.addMode('source', function(callback) {
458 if (typeof (CodeMirror) == 'undefined') {
459
460 CKEDITOR.document.appendStyleSheet(rootPath + 'css/codemirror.min.css');
461
462 if (config.theme.length && config.theme != 'default') {
463 CKEDITOR.document.appendStyleSheet(rootPath + 'theme/' + config.theme + '.css');
464 }
465
466 CKEDITOR.scriptLoader.load(rootPath + 'js/codemirror.min.js', function() {
467
468 CKEDITOR.scriptLoader.load(getCodeMirrorScripts(), function() {
469 loadCodeMirror(editor);
470 callback();
471 });
472 });
473
474
475 } else {
476 loadCodeMirror(editor);
477 callback();
478 }
479 });
480
481 function getCodeMirrorScripts() {
482 var scriptFiles = [rootPath + 'js/codemirror.addons.min.js'];
483
484 switch (config.mode) {
485 case "htmlmixed":
486 {
487 scriptFiles.push(rootPath + 'js/codemirror.mode.htmlmixed.min.js');
488 }
489
490 break;
491 case "text/html":
492 {
493 scriptFiles.push(rootPath + 'js/codemirror.mode.htmlmixed.min.js');
494 }
495
496 break;
497 case "application/x-httpd-php":
498 {
499 scriptFiles.push(rootPath + 'js/codemirror.mode.php.min.js');
500 }
501
502 break;
503 case "text/javascript":
504 {
505 scriptFiles.push(rootPath + 'js/codemirror.mode.javascript.min.js');
506 }
507
508 break;
509 default:
510 scriptFiles.push(rootPath + 'js/codemirror.mode.htmlmixed.min.js');
511 }
512
513 if (config.useBeautify) {
514 scriptFiles.push(rootPath + 'js/beautify.min.js');
515 }
516
517 if (config.enableSearchTools) {
518 scriptFiles.push(rootPath + 'js/codemirror.addons.search.min.js');
519 }
520 return scriptFiles;
521 }
522
523 function loadCodeMirror(editor) {
524 var contentsSpace = editor.ui.space('contents'),
525 textarea = contentsSpace.getDocument().createElement('textarea');
526
527 textarea.setStyles(
528 CKEDITOR.tools.extend({
529 // IE7 has overflow the <textarea> from wrapping table cell.
530 width: CKEDITOR.env.ie7Compat ? '99%' : '100%',
531 height: '100%',
532 resize: 'none',
533 outline: 'none',
534 'text-align': 'left'
535 },
536 CKEDITOR.tools.cssVendorPrefix('tab-size', editor.config.sourceAreaTabSize || 4)));
537 var ariaLabel = [editor.lang.editor, editor.name].join(',');
538 textarea.setAttributes({
539 dir: 'ltr',
540 tabIndex: CKEDITOR.env.webkit ? -1 : editor.tabIndex,
541 'role': 'textbox',
542 'aria-label': ariaLabel
543 });
544 textarea.addClass('cke_source cke_reset cke_enable_context_menu');
545 editor.ui.space('contents').append(textarea);
546 window["editable_" + editor.id] = editor.editable(new sourceEditable(editor, textarea));
547 // Fill the textarea with the current editor data.
548 window["editable_" + editor.id].setData(editor.getData(1));
549 window["editable_" + editor.id].editorID = editor.id;
550 editor.fire('ariaWidget', this);
551 var delay;
552 var sourceAreaElement = window["editable_" + editor.id],
553 holderElement = sourceAreaElement.getParent();
554
555 //codemirror = editor.id;
556
557 /*CodeMirror.commands.autocomplete = function(cm) {
558 CodeMirror.showHint(cm, CodeMirror.htmlHint);
559 };*/
560
561 // Enable Code Folding (Requires 'lineNumbers' to be set to 'true')
562 if (config.lineNumbers && config.enableCodeFolding) {
563 window["foldFunc_" + editor.id] = CodeMirror.newFoldFunction(CodeMirror.tagRangeFinder);
564 }
565
566 window["codemirror_" + editor.id] = CodeMirror.fromTextArea(sourceAreaElement.$, {
567 mode: config.mode,
568 matchBrackets: config.matchBrackets,
569 matchTags: config.matchTags,
570 workDelay: 300,
571 workTime: 35,
572 readOnly: editor.config.readOnly,
573 lineNumbers: config.lineNumbers,
574 lineWrapping: config.lineWrapping,
575 autoCloseTags: config.autoCloseTags,
576 autoCloseBrackets: config.autoCloseBrackets,
577 highlightSelectionMatches: config.highlightMatches,
578 continueComments: config.continueComments,
579 indentWithTabs: config.indentWithTabs,
580 theme: config.theme,
581 showTrailingSpace: config.showTrailingSpace,
582 showCursorWhenSelecting: true,
583 //extraKeys: {"Ctrl-Space": "autocomplete"},
584 extraKeys: { "Ctrl-Q": function(codeMirror_Editor) { window["foldFunc_" + editor.id](codeMirror_Editor, codeMirror_Editor.getCursor().line); } },
585 onKeyEvent: function(codeMirror_Editor, evt) {
586 if (config.enableCodeFormatting) {
587 var range = getSelectedRange();
588 if (evt.type === "keydown" && evt.ctrlKey && evt.keyCode === 75 && !evt.shiftKey && !evt.altKey) {
589 window["codemirror_" + editor.id].commentRange(true, range.from, range.to);
590 } else if (evt.type === "keydown" && evt.ctrlKey && evt.keyCode === 75 && evt.shiftKey && !evt.altKey) {
591 window["codemirror_" + editor.id].commentRange(false, range.from, range.to);
592 if (config.autoFormatOnUncomment) {
593 window["codemirror_" + editor.id].autoFormatRange(range.from, range.to);
594 }
595 } else if (evt.type === "keydown" && evt.ctrlKey && evt.keyCode === 75 && !evt.shiftKey && evt.altKey) {
596 window["codemirror_" + editor.id].autoFormatRange(range.from, range.to);
597 }/* else if (evt.type === "keydown") {
598 CodeMirror.commands.newlineAndIndentContinueMarkdownList(window["codemirror_" + editor.id]);
599 }*/
600 }
601 }
602 });
603
604 var holderHeight = holderElement.$.clientHeight + 'px';
605 var holderWidth = holderElement.$.clientWidth + 'px';
606
607 // Store config so we can access it within commands etc.
608 window["codemirror_" + editor.id].config = config;
609 if (config.autoFormatOnStart) {
610 if (config.useBeautify) {
611 var indent_size = 4;
612 var indent_char = ' ';
613 var brace_style = 'collapse'; //collapse, expand, end-expand
614
615 var source = window["codemirror_" + editor.id].getValue();
616
617 window["codemirror_" + editor.id].setValue(html_beautify(source, indent_size, indent_char, 120, brace_style));
618 } else {
619 window["codemirror_" + editor.id].autoFormatAll({
620 line: 0,
621 ch: 0
622 }, {
623 line: window["codemirror_" + editor.id].lineCount(),
624 ch: 0
625 });
626 }
627 }
628
629 function getSelectedRange() {
630 return {
631 from: window["codemirror_" + editor.id].getCursor(true),
632 to: window["codemirror_" + editor.id].getCursor(false)
633 };
634 }
635
636 window["codemirror_" + editor.id].on("change", function () {
637 clearTimeout(delay);
638 delay = setTimeout(function () {
639 var cm = window["codemirror_" + editor.id];
640
641 if (cm) {
642 cm.save();
643 }
644 }, 300);
645 });
646 window["codemirror_" + editor.id].setSize(holderWidth, holderHeight);
647
648 // Enable Code Folding (Requires 'lineNumbers' to be set to 'true')
649 if (config.lineNumbers && config.enableCodeFolding) {
650 window["codemirror_" + editor.id].on("gutterClick", window["foldFunc_" + editor.id]);
651 }
652 // Highlight Active Line
653 if (config.highlightActiveLine) {
654 window["codemirror_" + editor.id].hlLine = window["codemirror_" + editor.id].addLineClass(0, "background", "activeline");
655 window["codemirror_" + editor.id].on("cursorActivity", function () {
656 try {
657 var cur = window["codemirror_" + editor.id].getLineHandle(window["codemirror_" + editor.id].getCursor().line);
658 } catch(e) {
659 cur = null;
660 } finally {
661 if (cur != null) {
662 if (cur != window["codemirror_" + editor.id].hlLine) {
663 window["codemirror_" + editor.id].removeLineClass(window["codemirror_" + editor.id].hlLine, "background", "activeline");
664 window["codemirror_" + editor.id].hlLine = window["codemirror_" + editor.id].addLineClass(cur, "background", "activeline");
665 }
666 }
667 }
668 });
669 }
670
671 // Run config.onLoad callback, if present.
672 if (typeof config.onLoad === 'function') {
673 config.onLoad(window["codemirror_" + editor.id], editor);
674 }
675 }
676
677 editor.addCommand('source', sourcearea.commands.source);
678 if (editor.ui.addButton) {
679 editor.ui.addButton('Source', {
680 label: editor.lang.codemirror.toolbar,
681 command: 'source',
682 toolbar: 'mode,10'
683 });
684 }
685 if (config.enableCodeFormatting) {
686 editor.addCommand('searchCode', sourcearea.commands.searchCode);
687 editor.addCommand('autoFormat', sourcearea.commands.autoFormat);
688 editor.addCommand('commentSelectedRange', sourcearea.commands.commentSelectedRange);
689 editor.addCommand('uncommentSelectedRange', sourcearea.commands.uncommentSelectedRange);
690 editor.addCommand('autoCompleteToggle', sourcearea.commands.autoCompleteToggle);
691
692 if (editor.ui.addButton) {
693 if (config.showFormatButton || config.showCommentButton || config.showUncommentButton || config.showSearchButton) {
694 editor.ui.add('-', CKEDITOR.UI_SEPARATOR, { toolbar: 'mode,30' });
695 }
696 if (config.showSearchButton && config.enableSearchTools) {
697 editor.ui.addButton('searchCode', {
698 label: lang.searchCode,
699 command: 'searchCode',
700 toolbar: 'mode,40'
701 });
702 }
703 if (config.showFormatButton) {
704 editor.ui.addButton('autoFormat', {
705 label: lang.autoFormat,
706 command: 'autoFormat',
707 toolbar: 'mode,50'
708 });
709 }
710 if (config.showCommentButton) {
711 editor.ui.addButton('CommentSelectedRange', {
712 label: lang.commentSelectedRange,
713 command: 'commentSelectedRange',
714 toolbar: 'mode,60'
715 });
716 }
717 if (config.showUncommentButton) {
718 editor.ui.addButton('UncommentSelectedRange', {
719 label: lang.uncommentSelectedRange,
720 command: 'uncommentSelectedRange',
721 toolbar: 'mode,70'
722 });
723 }
724 if (config.showAutoCompleteButton) {
725 editor.ui.addButton('AutoComplete', {
726 label: lang.autoCompleteToggle,
727 command: 'autoCompleteToggle',
728 toolbar: 'mode,80'
729 });
730 }
731 }
732 }
733
734 editor.on('beforeModeUnload', function (evt) {
735 if (editor.mode === 'source' && editor.plugins.textselection) {
736 var range = editor.getTextSelection();
737
738 range.startOffset = LineChanngelToOffSet(window["codemirror_" + editor.id], window["codemirror_" + editor.id].getCursor(true));
739 range.endOffset = LineChanngelToOffSet(window["codemirror_" + editor.id], window["codemirror_" + editor.id].getCursor(false));
740
741 // Fly the range when create bookmark.
742 delete range.element;
743 range.createBookmark();
744 sourceBookmark = true;
745 evt.data = range.content;
746 }
747 });
748 editor.on('mode', function () {
749 editor.getCommand('source').setState(editor.mode === 'source' ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF);
750
751 if (editor.mode === 'source') {
752 editor.getCommand('autoCompleteToggle').setState(window["codemirror_" + editor.id].config.autoCloseTags ? CKEDITOR.TRISTATE_ON : CKEDITOR.TRISTATE_OFF);
753
754
755 if (editor.plugins.textselection && textRange) {
756 textRange.element = new CKEDITOR.dom.element(editor._.editable.$);
757 textRange.select();
758
759 var start, end;
760
761 start = OffSetToLineChannel(window["codemirror_" + editor.id], textRange.startOffset);
762
763 if (typeof (textRange.endOffset) == 'undefined') {
764 window["codemirror_" + editor.id].setCursor(start);
765 } else {
766 end = OffSetToLineChannel(window["codemirror_" + editor.id], textRange.endOffset);
767 window["codemirror_" + editor.id].setSelection(start, end);
768 }
769 }
770 }
771
772 });
773 editor.on('resize', function() {
774 if (window["editable_" + editor.id] && editor.mode === 'source') {
775 var holderElement = window["editable_" + editor.id].getParent();
776 var holderHeight = holderElement.$.clientHeight + 'px';
777 var holderWidth = holderElement.$.clientWidth + 'px';
778 window["codemirror_" + editor.id].setSize(holderWidth, holderHeight);
779 }
780 });
781
782 editor.on('readOnly', function () {
783 if (window["editable_" + editor.id] && editor.mode === 'source') {
784 window["codemirror_" + editor.id].setOption("readOnly", this.readOnly);
785 }
786 });
787
788 editor.on('instanceReady', function () {
789 var selectAllCommand = editor.commands.selectAll;
790
791 // Replace Complete SelectAll command from the plugin, otherwise it will not work in IE10
792 if (selectAllCommand != null) {
793 selectAllCommand.exec = function () {
794 if (editor.mode === 'source') {
795 window["codemirror_" + editor.id].setSelection({
796 line: 0,
797 ch: 0
798 }, {
799 line: window["codemirror_" + editor.id].lineCount(),
800 ch: 0
801 });
802 } else {
803 var editable = editor.editable();
804 if (editable.is('body'))
805 editor.document.$.execCommand('SelectAll', false, null);
806 else {
807 var range = editor.createRange();
808 range.selectNodeContents(editable);
809 range.select();
810 }
811
812 // Force triggering selectionChange (#7008)
813 editor.forceNextSelectionCheck();
814 editor.selectionChange();
815 }
816 };
817 }
818 });
819
820 editor.on('setData', function (data) {
821 if (window["editable_" + editor.id] && editor.mode === 'source') {
822 window["codemirror_" + editor.id].setValue(data.data.dataValue);
823 }
824 });
825 }
826 });
827 var sourceEditable = CKEDITOR.tools.createClass({
828 base: CKEDITOR.editable,
829 proto: {
830 setData: function(data) {
831 this.setValue(data);
832
833 if (this.codeMirror != null) {
834 this.codeMirror.setValue(data);
835 }
836
837 this.editor.fire('dataReady');
838 },
839 getData: function() {
840 return this.getValue();
841 },
842 // Insertions are not supported in source editable.
843 insertHtml: function() {
844 },
845 insertElement: function() {
846 },
847 insertText: function() {
848 },
849 // Read-only support for textarea.
850 setReadOnly: function(isReadOnly) {
851 this[(isReadOnly ? 'set' : 'remove') + 'Attribute']('readOnly', 'readonly');
852 },
853 editorID: null,
854 detach: function() {
855 window["codemirror_" + this.editorID].toTextArea();
856
857 // Free Memory on destroy
858 window["editable_" + this.editorID] = null;
859 window["codemirror_" + this.editorID] = null;
860
861 sourceEditable.baseProto.detach.call(this);
862
863 this.clearCustomData();
864 this.remove();
865 }
866 }
867 });
868 })();
869 CKEDITOR.plugins.sourcearea = {
870 commands: {
871 source: {
872 modes: {
873 wysiwyg: 1,
874 source: 1
875 },
876 editorFocus: false,
877 readOnly: 1,
878 exec: function(editor) {
879 if (editor.mode === 'wysiwyg') {
880 editor.fire('saveSnapshot');
881 }
882
883 editor.getCommand('source').setState(CKEDITOR.TRISTATE_DISABLED);
884 editor.setMode(editor.mode === 'source' ? 'wysiwyg' : 'source');
885 },
886 canUndo: false
887 },
888 searchCode: {
889 modes: {
890 wysiwyg: 0,
891 source: 1
892 },
893 editorFocus: false,
894 readOnly: 1,
895 exec: function(editor) {
896 CodeMirror.commands.find(window["codemirror_" + editor.id]);
897 },
898 canUndo: true
899 },
900 autoFormat: {
901 modes: {
902 wysiwyg: 0,
903 source: 1
904 },
905 editorFocus: false,
906 readOnly: 1,
907 exec: function(editor) {
908 var range = {
909 from: window["codemirror_" + editor.id].getCursor(true),
910 to: window["codemirror_" + editor.id].getCursor(false)
911 };
912 window["codemirror_" + editor.id].autoFormatRange(range.from, range.to);
913 },
914 canUndo: true
915 },
916 commentSelectedRange: {
917 modes: {
918 wysiwyg: 0,
919 source: 1
920 },
921 editorFocus: false,
922 readOnly: 1,
923 exec: function(editor) {
924 var range = {
925 from: window["codemirror_" + editor.id].getCursor(true),
926 to: window["codemirror_" + editor.id].getCursor(false)
927 };
928 window["codemirror_" + editor.id].commentRange(true, range.from, range.to);
929 },
930 canUndo: true
931 },
932 uncommentSelectedRange: {
933 modes: {
934 wysiwyg: 0,
935 source: 1
936 },
937 editorFocus: false,
938 readOnly: 1,
939 exec: function(editor) {
940 var range = {
941 from: window["codemirror_" + editor.id].getCursor(true),
942 to: window["codemirror_" + editor.id].getCursor(false)
943 };
944 window["codemirror_" + editor.id].commentRange(false, range.from, range.to);
945 if (window["codemirror_" + editor.id].config.autoFormatOnUncomment) {
946 window["codemirror_" + editor.id].autoFormatRange(
947 range.from,
948 range.to);
949 }
950 },
951 canUndo: true
952 },
953 autoCompleteToggle: {
954 modes: {
955 wysiwyg: 0,
956 source: 1
957 },
958 editorFocus: false,
959 readOnly: 1,
960 exec: function (editor) {
961 if (this.state == CKEDITOR.TRISTATE_ON) {
962 window["codemirror_" + editor.id].setOption("autoCloseTags", false);
963 } else if (this.state == CKEDITOR.TRISTATE_OFF) {
964 window["codemirror_" + editor.id].setOption("autoCloseTags", true);
965 }
966
967 this.toggleState();
968 },
969 canUndo: true
970 }
971 }
972 };
973
974 function LineChanngelToOffSet(ed, linech) {
975 var line = linech.line;
976 var ch = linech.ch;
977 var n = line + ch; //for the \n s & chars in the line
978 for (i = 0; i < line; i++) {
979 n += (ed.getLine(i)).length;//for the chars in all preceeding lines
980 }
981 return n;
982 }
983
984 function OffSetToLineChannel(ed, n) {
985 var line = 0, ch = 0, index = 0;
986 for (i = 0; i < ed.lineCount() ; i++) {
987 len = (ed.getLine(i)).length;
988 if (n < index + len) {
989 //alert(len+","+index+","+(n-index));
990 line = i;
991 ch = n - index;
992 return { line: line, ch: ch };
993 }
994 len++;//for \n char
995 index += len;
996 }
997 return { line: line, ch: ch };
998 }