diff --git a/HISTORY.md b/HISTORY.md index d651dbd..c0fd251 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -3,6 +3,13 @@ https://github.com/josdejong/jsoneditor +## (not yet released), version 5.5.11 + +- Fixed embedded version of jsoneditor ace theme not being loaded in + minimalist version (see #55). +- Added docs and example on how to use a custom version of Ace editor. + + ## 2016-11-02, version 5.5.10 - Fixed #85: pressing enter in an input in a form containing a JSONEditor too diff --git a/docs/api.md b/docs/api.md index 588678d..6f3ca20 100644 --- a/docs/api.md +++ b/docs/api.md @@ -35,6 +35,8 @@ Constructs a new JSONEditor. 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`. + Note that when using the minimalist version of JSONEditor (which has Ace excluded), JSONEditor will try to load the Ace plugins `ace/mode/json` and `ace/ext/searchbox`. These plugins must be loaded beforehand or be available in the folder of the Ace editor. + - `{Object} ajv` Provide a custom instance of [ajv](https://github.com/epoberezkin/ajv), the diff --git a/examples/08_custom_ace.html b/examples/08_custom_ace.html new file mode 100644 index 0000000..fe0b4fd --- /dev/null +++ b/examples/08_custom_ace.html @@ -0,0 +1,72 @@ + + + + JSONEditor | Custom Ace + + + + + + + + + + + + +

Custom Ace editor

+

+ This example demonstrates how to load a custom version of Ace editor into JSONEditor. +

+

+ By default, JSONEditor code mode loads the following Ace plugins: +

+ +

+ The jsoneditor theme comes embedded with JSONEditor. The other two plugins (json and searchbox) must be available in the folder of the custom Ace editor, or already be loaded via a script tag. +

+ +
+ + + + diff --git a/gulpfile.js b/gulpfile.js index e78d4e2..cfc4260 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -84,7 +84,7 @@ function minify(name) { gutil.log('Mapped ' + fileMap); } -// make dist and dist/img folders +// make dist folder structure gulp.task('mkdir', function () { mkdirp.sync(DIST); mkdirp.sync(DIST + '/img'); @@ -144,7 +144,7 @@ gulp.task('bundle-css', ['mkdir'], function () { // create a folder img and copy the icons gulp.task('copy-img', ['mkdir'], function () { gulp.src(IMAGE) - .pipe(gulp.dest(DIST +'/img')); + .pipe(gulp.dest(DIST + '/img')); gutil.log('Copied images'); }); diff --git a/src/js/ace/index.js b/src/js/ace/index.js index 846ae0a..cc41440 100644 --- a/src/js/ace/index.js +++ b/src/js/ace/index.js @@ -4,6 +4,5 @@ var ace = require('brace'); // load required ace modules require('brace/mode/json'); require('brace/ext/searchbox'); -require('./theme-jsoneditor'); module.exports = ace; diff --git a/src/js/textmode.js b/src/js/textmode.js index eba801f..40feef4 100644 --- a/src/js/textmode.js +++ b/src/js/textmode.js @@ -16,6 +16,8 @@ var textmode = {}; var MAX_ERRORS = 3; // maximum number of displayed errors at the bottom +var DEFAULT_THEME = 'ace/theme/jsoneditor'; + /** * Create a text editor * @param {Element} container @@ -63,7 +65,10 @@ textmode.create = function (container, options) { } // determine theme - this.theme = options.theme || 'ace/theme/jsoneditor'; + this.theme = options.theme || DEFAULT_THEME; + if (this.theme === DEFAULT_THEME) { + require('./ace/theme-jsoneditor'); + } var me = this; this.container = container;