Implemented option `ace` to provide a custom version of the Ace editor. (see #173, #176)

HISTORY.md

@@ -7,6 +7,8 @@ https://github.com/josdejong/jsoneditor
 
 - Implemented option `theme`, allowing to set a custom theme for the Ace 
   editor. Thanks @nfvs.
+- Implemented option `ace`, which allows to pass a custom instance of the Ace
+  instead of the embedded version.
 - Fixed #186: binding issue to `jsonlint.parse`.
 
 

docs/api.md

@@ -15,6 +15,8 @@ Constructs a new JSONEditor.
 - `{Object} options`  
   Optional object with options. Available options:
 
+  - `{Object} ace`  
+    Provide a custom version of the [Ace editor](http://ace.c9.io/) and use this instead of the version that comes embedded with JSONEditor. Only applicable when `mode` is `code`.
   - `{function} change`  
     Set a callback method triggered when the contents of the JSONEditor change. Called without parameters. Will only be triggered on changes made by the user, not in case of programmatic changes via the functions `set` or `setText`.
   - `{function} editable`  

src/js/textmode.js

@@ -23,22 +23,31 @@ var textmode = {};
  *                                                         spaces. 2 by default.
  *                                   {function} change     Callback method
  *                                                         triggered on change
+ *                                   {Object} ace          A custom instance of
+ *                                                         Ace editor.
  * @private
  */
 textmode.create = function (container, options) {
   // read options
   options = options || {};
   this.options = options;
+
+  // indentation
   if (options.indentation) {
     this.indentation = Number(options.indentation);
   }
   else {
-    this.indentation = 2;       // number of spaces
+    this.indentation = 2; // number of spaces
   }
+
+  // grab ace from options if provided
+  var _ace = options.ace ? options.ace : ace;
+
+  // determine mode
   this.mode = (options.mode == 'code') ? 'code' : 'text';
   if (this.mode == 'code') {
     // verify whether Ace editor is available and supported
-    if (typeof ace === 'undefined') {
+    if (typeof _ace === 'undefined') {
       this.mode = 'text';
       util.log('WARNING: Cannot load code editor, Ace library not loaded. ' +
           'Falling back to plain text editor');
@@ -117,7 +126,7 @@ textmode.create = function (container, options) {
     this.editorDom.style.width = '100%'; // TODO: move to css
     this.content.appendChild(this.editorDom);
 
-    var editor = ace.edit(this.editorDom);
+    var editor = _ace.edit(this.editorDom);
     editor.setTheme(this.theme);
     editor.setShowPrintMargin(false);
     editor.setFontSize(13);