StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some early refactoring of docs and examples

This commit is contained in:
jos 2016-08-13 21:38:32 +02:00
parent a12505b017
commit 24ab2899dc
22 changed files with 34 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
README.md
View File

@ -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:
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
<script src="jsoneditor/dist/jsoneditor.js"></script>
</head>
<body>
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
@ -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.

4
docs/api.md
View File

@ -2,9 +2,9 @@
## JSONEditor
### Constructor
### Construction
#### `JSONEditor(container [, options [, json]])`
#### `jsoneditor(container [, options [, json]])`
Constructs a new JSONEditor.

11
docs/usage.md
View File

@ -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
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
```html\
<script src="jsoneditor/dist/jsoneditor.js"></script>
```
## 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();
<script>
// create the editor
var container = document.getElementById("jsoneditor");
var editor = new JSONEditor(container);
var editor = jsoneditor(container);
// set json
function setJSON () {

2
examples/01_basic_usage.html
View File

@ -23,7 +23,7 @@
// create the editor
var container = document.getElementById('jsoneditor');
var options = {};
var editor = new JSONEditor(container, options);
var editor = jsoneditor(container, options);
// set json
document.getElementById('setJSON').onclick = function () {

2
examples/02_viewer.html
View File

@ -37,7 +37,7 @@
'string': 'Hello World'
};
var editor = new JSONEditor(container, options, json);
var editor = jsoneditor(container, options, json);
</script>
</body>
</html>

2
examples/03_switch_mode.html
View File

@ -59,7 +59,7 @@
"string": "Hello World"
};
var editor = new JSONEditor(container, options, json);
var editor = jsoneditor(container, options, json);
</script>
</body>
</html>

2
examples/04_load_and_save.html
View File

@ -37,7 +37,7 @@
<script>
// create the editor
var editor = new JSONEditor(document.getElementById('jsoneditor'));
var editor = jsoneditor(document.getElementById('jsoneditor'));
// Load a JSON document
FileReaderJS.setupInput(document.getElementById('loadDocument'), {

2
examples/05_custom_fields_editable.html
View File

@ -56,7 +56,7 @@
age: 32
};
var editor = new JSONEditor(container, options, json);
var editor = jsoneditor(container, options, json);
</script>
</body>
</html>

2
examples/06_custom_styling.html
View File

@ -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);
</script>
</body>
</html>

2
examples/07_json_schema_validation.html
View File

@ -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);
</script>
</body>
</html>

4
examples/requirejs_demo/scripts/main.js
View File

@ -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 () {

2
gulpfile.js
View File

@ -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)

1
index.js
View File

@ -1 +0,0 @@
module.exports = require('./src/js/JSONEditor');

2
package.json
View File

@ -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",

5
test/couchdbeditor.html
View File

@ -10,8 +10,7 @@
<link rel="shortcut icon" href="../app/web/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="../jsoneditor/js/jsoneditor.js"></script>
<link rel="stylesheet" type="text/css" href="../jsoneditor/css/jsoneditor.css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body, html {
@ -37,7 +36,7 @@
function init() {
var container = document.getElementById('jsoneditor');
editor = new JSONEditor(container);
editor = jsoneditor(container);
document.getElementById('url').focus();
}

3
test/test_bootstrap.html
View File

@ -4,7 +4,6 @@
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!--<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" type="text/css">-->
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
@ -43,7 +42,7 @@
}
}
};
var editor = new JSONEditor(container, options);
var editor = jsoneditor(container, options);
var text = "[{\"test\":\"test\"}]";
var json = JSON.parse(text);

3
test/test_build.html
View File

@ -3,7 +3,6 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
@ -69,7 +68,7 @@
"url": "http://jsoneditoronline.org"
};
editor = new JSONEditor(container, options, json);
editor = jsoneditor(container, options, json);
console.log('json', json);
console.log('string', JSON.stringify(json));

3
test/test_destroy.html
View File

@ -3,7 +3,6 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
@ -73,7 +72,7 @@
"url": "http://jsoneditoronline.org"
};
editor = new JSONEditor(container, options, json);
editor = jsoneditor(container, options, json);
console.log('json', json);
console.log('string', JSON.stringify(json));

3
test/test_materialize.html
View File

@ -7,7 +7,6 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style>
@ -73,7 +72,7 @@
"url": "http://jsoneditoronline.org"
};
editor = new JSONEditor(container, options, json);
editor = jsoneditor(container, options, json);
console.log('json', json);
console.log('string', JSON.stringify(json));

5
test/test_build_min.html → test/test_minimalist.html
View File

@ -3,8 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.min.js"></script>
<script src="../dist/jsoneditor-minimalist.js"></script>
<style type="text/css">
body {
@ -56,7 +55,7 @@
"string": "Hello World"
};
editor = new JSONEditor(container, options, json);
editor = jsoneditor(container, options, json);
</script>
</body>
</html>

62
test/test_minimalist_min.html
View File

@ -1,62 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor-minimalist.min.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
Switch editor mode using the mode box.
Note that the mode can be changed programmatically as well using the method
<code>editor.setMode(mode)</code>, try it in the console of your browser.
</p>
<div id="jsoneditor"></div>
<script>
var container, options, json, editor;
container = document.getElementById('jsoneditor');
options = {
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
onError: function (err) {
alert(err.toString());
}
};
json = {
"array": [1, 2, 3],
"boolean": true,
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World"
};
editor = new JSONEditor(container, options, json);
</script>
</body>
</html>

3
test/test_schema.html
View File

@ -3,7 +3,6 @@
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
@ -87,7 +86,7 @@
]
};
var editor = new JSONEditor(container, options, json);
var editor = jsoneditor(container, options, json);
console.log('json', json);
console.log('schema', schema);