diff --git a/README.md b/README.md index 43b5c45..a0a1d33 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ with bower: #### More -There is a directive available for using JSONEditor in Angular.js: +There is a directive available for using `jsoneditor` in Angular.js: [https://github.com/angular-tools/ng-jsoneditor](https://github.com/angular-tools/ng-jsoneditor) @@ -72,8 +72,7 @@ There is a directive available for using JSONEditor in Angular.js: - - +
@@ -82,7 +81,7 @@ There is a directive available for using JSONEditor in Angular.js: // create the editor var container = document.getElementById("jsoneditor"); var options = {}; - var editor = new JSONEditor(container, options); + var editor = jsoneditor(container, options); // set json var json = { @@ -120,8 +119,8 @@ jsoneditor: npm run build ``` - This will generate the files `./jsoneditor.js`, `./jsoneditor.css`, and - minified versions in the dist of the project. + This will generate the file `./dist/jsoneditor.js` and + `./dist/jsoneditor-minimalist.js` and corresponding source maps. - To automatically build when a source file has changed: @@ -129,27 +128,5 @@ jsoneditor: npm run watch ``` - This will update `./jsoneditor.js` and `./jsoneditor.css` in the dist folder - on every change, but it will **NOT** update the minified versions as that's - an expensive operation. - - -## Custom builds - -The source code of JSONEditor consists of CommonJS modules. JSONEditor can be bundled in a customized way using a module bundler like [browserify](http://browserify.org/) or [webpack](http://webpack.github.io/). First, install all dependencies of jsoneditor: - - npm install - -To create a custom bundle of the source code using browserify: - - browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor - -The Ace editor, used in mode `code`, accounts for about 75% of the total -size of the library. To exclude the Ace editor from the bundle: - - browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor -x brace -x brace/mode/json -x brace/ext/searchbox - -To minify the generated bundle, use [uglifyjs](https://github.com/mishoo/UglifyJS2): - - uglifyjs ./jsoneditor.custom.js -o ./jsoneditor.custom.min.js -m -c - + This will update `./dist/jsoneditor.js` on every change in the source code, + but it will **NOT** update the minimalist version. diff --git a/docs/api.md b/docs/api.md index 588678d..455c73b 100644 --- a/docs/api.md +++ b/docs/api.md @@ -2,9 +2,9 @@ ## JSONEditor -### Constructor +### Construction -#### `JSONEditor(container [, options [, json]])` +#### `jsoneditor(container [, options [, json]])` Constructs a new JSONEditor. diff --git a/docs/usage.md b/docs/usage.md index 4cd9c0c..e0a374f 100644 --- a/docs/usage.md +++ b/docs/usage.md @@ -19,12 +19,11 @@ image. Both full and minified version are available. ## Load -To implement JSONEditor in a web application, load the javascript and css file +To implement JSONEditor in a web application, load the javascript file in the head of the HTML page: -```html - - +```html\ + ``` ## Use @@ -42,7 +41,7 @@ var container = document.getElementById("jsoneditor"); var options = { mode: 'tree' }; -var editor = new JSONEditor(container, options); +var editor = jsoneditor(container, options); ``` To set JSON data in the editor: @@ -88,7 +87,7 @@ var json = editor.get(); diff --git a/examples/03_switch_mode.html b/examples/03_switch_mode.html index 13676c5..e830b4d 100644 --- a/examples/03_switch_mode.html +++ b/examples/03_switch_mode.html @@ -59,7 +59,7 @@ "string": "Hello World" }; - var editor = new JSONEditor(container, options, json); + var editor = jsoneditor(container, options, json); diff --git a/examples/04_load_and_save.html b/examples/04_load_and_save.html index d1ad175..2e12fe6 100644 --- a/examples/04_load_and_save.html +++ b/examples/04_load_and_save.html @@ -37,7 +37,7 @@ diff --git a/examples/06_custom_styling.html b/examples/06_custom_styling.html index ca53f0d..8e32716 100644 --- a/examples/06_custom_styling.html +++ b/examples/06_custom_styling.html @@ -44,7 +44,7 @@ 'object': {'a': 'b', 'c': 'd'}, 'string': 'Hello World' }; - var editor = new JSONEditor(container, options, json); + var editor = jsoneditor(container, options, json); diff --git a/examples/07_json_schema_validation.html b/examples/07_json_schema_validation.html index 427bc03..cf98eb5 100644 --- a/examples/07_json_schema_validation.html +++ b/examples/07_json_schema_validation.html @@ -64,7 +64,7 @@ // create the editor var container = document.getElementById('jsoneditor'); - var editor = new JSONEditor(container, options, json); + var editor = jsoneditor(container, options, json); diff --git a/examples/requirejs_demo/scripts/main.js b/examples/requirejs_demo/scripts/main.js index 4303b1a..f66f2c6 100644 --- a/examples/requirejs_demo/scripts/main.js +++ b/examples/requirejs_demo/scripts/main.js @@ -1,8 +1,8 @@ var module = '../../../dist/jsoneditor'; -require([module], function (JSONEditor) { +require([module], function (jsoneditor) { // create the editor var container = document.getElementById('jsoneditor'); - var editor = new JSONEditor(container); + var editor = jsoneditor(container); // set json document.getElementById('setJSON').onclick = function () { diff --git a/gulpfile.js b/gulpfile.js index f2086e8..85cc649 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -115,7 +115,7 @@ gulp.task('bundle-minimalist', ['mkdir'], function (done) { // TODO: zip file using archiver var pkg = 'jsoneditor-' + require('./package.json').version + '.zip'; gulp.task('zip', shell.task([ - 'zip ' + pkg + ' ' + 'README.md NOTICE LICENSE HISTORY.md index.html src dist docs examples -r ' + 'zip ' + pkg + ' ' + 'README.md LICENSE HISTORY.md index.html src dist docs examples -r ' ])); // The watch task (to automatically rebuild when the source code changes) diff --git a/index.js b/index.js deleted file mode 100644 index 8442caf..0000000 --- a/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./src/js/JSONEditor'); diff --git a/package.json b/package.json index feac4ec..7ce4107 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "jsoneditor", "version": "6.0.0-BETA", - "main": "./index", + "main": "./src/index", "description": "A web-based tool to view, edit, format, and validate JSON", "tags": [ "json", diff --git a/test/couchdbeditor.html b/test/couchdbeditor.html index 3a91dc4..ddabae0 100644 --- a/test/couchdbeditor.html +++ b/test/couchdbeditor.html @@ -10,8 +10,7 @@ - - + - - - -

- Switch editor mode using the mode box. - Note that the mode can be changed programmatically as well using the method - editor.setMode(mode), try it in the console of your browser. -

- -
- - - - diff --git a/test/test_schema.html b/test/test_schema.html index 4b60562..f95b1ab 100644 --- a/test/test_schema.html +++ b/test/test_schema.html @@ -3,7 +3,6 @@ -