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 }