Replaced the plain text editor with ace (providing syntax highlighting and code inspection)
This commit is contained in:
parent
809cbec31d
commit
89e7b6e76e
|
@ -100,6 +100,7 @@ app.load = function() {
|
|||
// formatter
|
||||
var container = document.getElementById("jsonformatter");
|
||||
formatter = new jsoneditor.JSONFormatter(container, {
|
||||
mode: 'code',
|
||||
change: function () {
|
||||
app.lastChanged = formatter;
|
||||
}
|
||||
|
@ -201,8 +202,8 @@ app.load = function() {
|
|||
var domSave = document.getElementById('save');
|
||||
domSave.onclick = app.saveFile;
|
||||
|
||||
// TODO: implement a focus method
|
||||
formatter.textarea.focus();
|
||||
// set focus on the formatter
|
||||
formatter.focus();
|
||||
|
||||
// enforce FireFox to not do spell checking on any input field
|
||||
document.body.spellcheck = false;
|
||||
|
@ -310,6 +311,7 @@ app.resize = function() {
|
|||
|
||||
// resize formatter
|
||||
domFormatter.style.width = Math.round(splitterLeft) + 'px';
|
||||
formatter.resize();
|
||||
|
||||
// resize editor
|
||||
// the width has a -1 to prevent the width from being just half a pixel
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
Copyright (C) 2011-2013 Jos de Jong, http://jsoneditoronline.org
|
||||
|
||||
@author Jos de Jong, <wjosdejong@gmail.com>
|
||||
@date 2013-02-26
|
||||
@date 2013-03-04
|
||||
-->
|
||||
|
||||
<meta name="description" content="JSON Editor Online is a web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in formatted plain text.">
|
||||
|
@ -53,6 +53,7 @@
|
|||
-->
|
||||
|
||||
<script type="text/javascript" src="lib/jsoneditor/jsoneditor-min.js"></script>
|
||||
<script type="text/javascript" src="lib/ace/ace-min.js"></script>
|
||||
<script type="text/javascript" src="app-min.js"></script>
|
||||
</head>
|
||||
|
||||
|
@ -152,7 +153,7 @@
|
|||
|
||||
<div id="footer">
|
||||
<div id="footer-inner">
|
||||
<a href="http://jsoneditoronline.org" class="footer">JSON Editor Online 2.0.2</a>
|
||||
<a href="http://jsoneditoronline.org" class="footer">JSON Editor Online 2.1.0</a>
|
||||
•
|
||||
<a href="changelog.txt" target="_blank" class="footer">Changelog</a>
|
||||
•
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,143 @@
|
|||
/* ***** BEGIN LICENSE BLOCK *****
|
||||
* Distributed under the BSD license:
|
||||
*
|
||||
* Copyright (c) 2010, Ajax.org B.V.
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
* * Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* * Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
* * Neither the name of Ajax.org B.V. nor the
|
||||
* names of its contributors may be used to endorse or promote products
|
||||
* derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
* DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
|
||||
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
define('ace/theme/jso', ['require', 'exports', 'module' , 'ace/lib/dom'], function(require, exports, module) {
|
||||
|
||||
exports.isDark = false;
|
||||
exports.cssClass = "ace-jso";
|
||||
exports.cssText = ".ace-jso .ace_gutter {\
|
||||
background: #ebebeb;\
|
||||
color: #333\
|
||||
}\
|
||||
\
|
||||
.ace-jso.ace_editor {\
|
||||
font-family: droid sans mono, monospace, courier new, courier, sans-serif;\
|
||||
line-height: 1.3;\
|
||||
}\
|
||||
.ace-jso .ace_print-margin {\
|
||||
width: 1px;\
|
||||
background: #e8e8e8\
|
||||
}\
|
||||
.ace-jso .ace_scroller {\
|
||||
background-color: #FFFFFF\
|
||||
}\
|
||||
.ace-jso .ace_text-layer {\
|
||||
color: gray\
|
||||
}\
|
||||
.ace-jso .ace_variable {\
|
||||
color: #1a1a1a\
|
||||
}\
|
||||
.ace-jso .ace_cursor {\
|
||||
border-left: 2px solid #000000\
|
||||
}\
|
||||
.ace-jso .ace_overwrite-cursors .ace_cursor {\
|
||||
border-left: 0px;\
|
||||
border-bottom: 1px solid #000000\
|
||||
}\
|
||||
.ace-jso .ace_marker-layer .ace_selection {\
|
||||
background: #D5DDF6\
|
||||
}\
|
||||
.ace-jso.ace_multiselect .ace_selection.ace_start {\
|
||||
box-shadow: 0 0 3px 0px #FFFFFF;\
|
||||
border-radius: 2px\
|
||||
}\
|
||||
.ace-jso .ace_marker-layer .ace_step {\
|
||||
background: rgb(255, 255, 0)\
|
||||
}\
|
||||
.ace-jso .ace_marker-layer .ace_bracket {\
|
||||
margin: -1px 0 0 -1px;\
|
||||
border: 1px solid #BFBFBF\
|
||||
}\
|
||||
.ace-jso .ace_marker-layer .ace_active-line {\
|
||||
background: #FFFBD1\
|
||||
}\
|
||||
.ace-jso .ace_gutter-active-line {\
|
||||
background-color : #dcdcdc\
|
||||
}\
|
||||
.ace-jso .ace_marker-layer .ace_selected-word {\
|
||||
border: 1px solid #D5DDF6\
|
||||
}\
|
||||
.ace-jso .ace_invisible {\
|
||||
color: #BFBFBF\
|
||||
}\
|
||||
.ace-jso .ace_keyword,\
|
||||
.ace-jso .ace_meta,\
|
||||
.ace-jso .ace_support.ace_constant.ace_property-value {\
|
||||
color: #AF956F\
|
||||
}\
|
||||
.ace-jso .ace_keyword.ace_operator {\
|
||||
color: #484848\
|
||||
}\
|
||||
.ace-jso .ace_keyword.ace_other.ace_unit {\
|
||||
color: #96DC5F\
|
||||
}\
|
||||
.ace-jso .ace_constant.ace_language {\
|
||||
color: orange\
|
||||
}\
|
||||
.ace-jso .ace_constant.ace_numeric {\
|
||||
color: red\
|
||||
}\
|
||||
.ace-jso .ace_constant.ace_character.ace_entity {\
|
||||
color: #BF78CC\
|
||||
}\
|
||||
.ace-jso .ace_invalid {\
|
||||
background-color: #FF002A\
|
||||
}\
|
||||
.ace-jso .ace_fold {\
|
||||
background-color: #AF956F;\
|
||||
border-color: #000000\
|
||||
}\
|
||||
.ace-jso .ace_storage,\
|
||||
.ace-jso .ace_support.ace_class,\
|
||||
.ace-jso .ace_support.ace_function,\
|
||||
.ace-jso .ace_support.ace_other,\
|
||||
.ace-jso .ace_support.ace_type {\
|
||||
color: #C52727\
|
||||
}\
|
||||
.ace-jso .ace_string {\
|
||||
color: green\
|
||||
}\
|
||||
.ace-jso .ace_comment {\
|
||||
color: #BCC8BA\
|
||||
}\
|
||||
.ace-jso .ace_entity.ace_name.ace_tag,\
|
||||
.ace-jso .ace_entity.ace_other.ace_attribute-name {\
|
||||
color: #606060\
|
||||
}\
|
||||
.ace-jso .ace_markup.ace_underline {\
|
||||
text-decoration: underline\
|
||||
}\
|
||||
.ace-jso .ace_indent-guide {\
|
||||
background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==\") right repeat-y\
|
||||
}";
|
||||
|
||||
var dom = require("../lib/dom");
|
||||
dom.importCssString(exports.cssText, exports.cssClass);
|
||||
});
|
|
@ -0,0 +1,163 @@
|
|||
/* ***** BEGIN LICENSE BLOCK *****
|
||||
* Distributed under the BSD license:
|
||||
*
|
||||
* Copyright (c) 2010, Ajax.org B.V.
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without
|
||||
* modification, are permitted provided that the following conditions are met:
|
||||
* * Redistributions of source code must retain the above copyright
|
||||
* notice, this list of conditions and the following disclaimer.
|
||||
* * Redistributions in binary form must reproduce the above copyright
|
||||
* notice, this list of conditions and the following disclaimer in the
|
||||
* documentation and/or other materials provided with the distribution.
|
||||
* * Neither the name of Ajax.org B.V. nor the
|
||||
* names of its contributors may be used to endorse or promote products
|
||||
* derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
||||
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
||||
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
||||
* DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
|
||||
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
||||
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
||||
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
||||
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
* ***** END LICENSE BLOCK ***** */
|
||||
|
||||
define('ace/theme/textmate', ['require', 'exports', 'module' , 'ace/lib/dom'], function(require, exports, module) {
|
||||
|
||||
|
||||
exports.isDark = false;
|
||||
exports.cssClass = "ace-tm";
|
||||
exports.cssText = ".ace-tm .ace_gutter {\
|
||||
background: #f0f0f0;\
|
||||
color: #333;\
|
||||
}\
|
||||
.ace-tm .ace_print-margin {\
|
||||
width: 1px;\
|
||||
background: #e8e8e8;\
|
||||
}\
|
||||
.ace-tm .ace_fold {\
|
||||
background-color: #6B72E6;\
|
||||
}\
|
||||
.ace-tm .ace_scroller {\
|
||||
background-color: #FFFFFF;\
|
||||
}\
|
||||
.ace-tm .ace_cursor {\
|
||||
border-left: 2px solid black;\
|
||||
}\
|
||||
.ace-tm .ace_overwrite-cursors .ace_cursor {\
|
||||
border-left: 0px;\
|
||||
border-bottom: 1px solid black;\
|
||||
}\
|
||||
.ace-tm .ace_invisible {\
|
||||
color: rgb(191, 191, 191);\
|
||||
}\
|
||||
.ace-tm .ace_storage,\
|
||||
.ace-tm .ace_keyword {\
|
||||
color: blue;\
|
||||
}\
|
||||
.ace-tm .ace_constant {\
|
||||
color: rgb(197, 6, 11);\
|
||||
}\
|
||||
.ace-tm .ace_constant.ace_buildin {\
|
||||
color: rgb(88, 72, 246);\
|
||||
}\
|
||||
.ace-tm .ace_constant.ace_language {\
|
||||
color: rgb(88, 92, 246);\
|
||||
}\
|
||||
.ace-tm .ace_constant.ace_library {\
|
||||
color: rgb(6, 150, 14);\
|
||||
}\
|
||||
.ace-tm .ace_invalid {\
|
||||
background-color: rgba(255, 0, 0, 0.1);\
|
||||
color: red;\
|
||||
}\
|
||||
.ace-tm .ace_support.ace_function {\
|
||||
color: rgb(60, 76, 114);\
|
||||
}\
|
||||
.ace-tm .ace_support.ace_constant {\
|
||||
color: rgb(6, 150, 14);\
|
||||
}\
|
||||
.ace-tm .ace_support.ace_type,\
|
||||
.ace-tm .ace_support.ace_class {\
|
||||
color: rgb(109, 121, 222);\
|
||||
}\
|
||||
.ace-tm .ace_keyword.ace_operator {\
|
||||
color: rgb(104, 118, 135);\
|
||||
}\
|
||||
.ace-tm .ace_string {\
|
||||
color: rgb(3, 106, 7);\
|
||||
}\
|
||||
.ace-tm .ace_comment {\
|
||||
color: rgb(76, 136, 107);\
|
||||
}\
|
||||
.ace-tm .ace_comment.ace_doc {\
|
||||
color: rgb(0, 102, 255);\
|
||||
}\
|
||||
.ace-tm .ace_comment.ace_doc.ace_tag {\
|
||||
color: rgb(128, 159, 191);\
|
||||
}\
|
||||
.ace-tm .ace_constant.ace_numeric {\
|
||||
color: rgb(0, 0, 205);\
|
||||
}\
|
||||
.ace-tm .ace_variable {\
|
||||
color: rgb(49, 132, 149);\
|
||||
}\
|
||||
.ace-tm .ace_xml-pe {\
|
||||
color: rgb(104, 104, 91);\
|
||||
}\
|
||||
.ace-tm .ace_entity.ace_name.ace_function {\
|
||||
color: #0000A2;\
|
||||
}\
|
||||
.ace-tm .ace_markup.ace_heading {\
|
||||
color: rgb(12, 7, 255);\
|
||||
}\
|
||||
.ace-tm .ace_markup.ace_list {\
|
||||
color:rgb(185, 6, 144);\
|
||||
}\
|
||||
.ace-tm .ace_meta.ace_tag {\
|
||||
color:rgb(0, 22, 142);\
|
||||
}\
|
||||
.ace-tm .ace_string.ace_regex {\
|
||||
color: rgb(255, 0, 0)\
|
||||
}\
|
||||
.ace-tm .ace_marker-layer .ace_selection {\
|
||||
background: rgb(181, 213, 255);\
|
||||
}\
|
||||
.ace-tm.ace_multiselect .ace_selection.ace_start {\
|
||||
box-shadow: 0 0 3px 0px white;\
|
||||
border-radius: 2px;\
|
||||
}\
|
||||
.ace-tm .ace_marker-layer .ace_step {\
|
||||
background: rgb(252, 255, 0);\
|
||||
}\
|
||||
.ace-tm .ace_marker-layer .ace_stack {\
|
||||
background: rgb(164, 229, 101);\
|
||||
}\
|
||||
.ace-tm .ace_marker-layer .ace_bracket {\
|
||||
margin: -1px 0 0 -1px;\
|
||||
border: 1px solid rgb(192, 192, 192);\
|
||||
}\
|
||||
.ace-tm .ace_marker-layer .ace_active-line {\
|
||||
background: rgba(0, 0, 0, 0.07);\
|
||||
}\
|
||||
.ace-tm .ace_gutter-active-line {\
|
||||
background-color : #dcdcdc;\
|
||||
}\
|
||||
.ace-tm .ace_marker-layer .ace_selected-word {\
|
||||
background: rgb(250, 250, 255);\
|
||||
border: 1px solid rgb(200, 200, 250);\
|
||||
}\
|
||||
.ace-tm .ace_indent-guide {\
|
||||
background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bLly//BwAmVgd1/w11/gAAAABJRU5ErkJggg==\") right repeat-y;\
|
||||
}\
|
||||
";
|
||||
|
||||
var dom = require("../lib/dom");
|
||||
dom.importCssString(exports.cssText, exports.cssClass);
|
||||
});
|
File diff suppressed because one or more lines are too long
|
@ -36,7 +36,7 @@
|
|||
Copyright (C) 2011-2013 Jos de Jong, http://jsoneditoronline.org
|
||||
|
||||
@author Jos de Jong, <wjosdejong@gmail.com>
|
||||
@date 2013-02-26
|
||||
@date 2013-03-04
|
||||
-->
|
||||
|
||||
<meta name="description" content="JSON Editor Online is a web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in formatted plain text.">
|
||||
|
@ -72,6 +72,11 @@
|
|||
<script type="text/javascript" src="app.js"></script>
|
||||
<script type="text/javascript" src="lib/jsonlint/jsonlint.js"></script>
|
||||
|
||||
<script type="text/javascript" src="lib/ace/ace.js"></script>
|
||||
<script type="text/javascript" src="lib/ace/mode-json.js"></script>
|
||||
<script type="text/javascript" src="lib/ace/theme-textmate.js"></script>
|
||||
<script type="text/javascript" src="lib/ace/theme-jso.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
div.convert-right {
|
||||
background: url('../../jsoneditor/css/img/jsoneditor-icons.png') -0 -48px;
|
||||
|
@ -181,7 +186,7 @@
|
|||
|
||||
<div id="footer">
|
||||
<div id="footer-inner">
|
||||
<a href="http://jsoneditoronline.org" class="footer">JSON Editor Online 2.0.2</a>
|
||||
<a href="http://jsoneditoronline.org" class="footer">JSON Editor Online 2.1.0</a>
|
||||
•
|
||||
<a href="../../changelog.txt" target="_blank" class="footer">Changelog</a>
|
||||
•
|
||||
|
|
11
build.xml
11
build.xml
|
@ -2,7 +2,7 @@
|
|||
|
||||
<project name="jsoneditor-builder" default="main">
|
||||
<!-- the version number of must be updated here (according to changelog.txt) -->
|
||||
<property name="version" value="2.0.2"/>
|
||||
<property name="version" value="2.1.0-SNAPSHOT"/>
|
||||
|
||||
<!-- compression tools -->
|
||||
<property name="compressor" value="tools/yuicompressor-2.4.7.jar" />
|
||||
|
@ -144,6 +144,15 @@
|
|||
<fileset dir="${web_app_src}/doc"/>
|
||||
</copy>
|
||||
|
||||
<!-- concatenate and copy the ace files -->
|
||||
<concat destfile="${web_app}/lib/ace/ace-min.js">
|
||||
<fileset dir="${web_app_src}/lib/ace" includes="ace.js"/>
|
||||
<fileset dir="${web_app_src}/lib/ace" includes="mode-json.js"/>
|
||||
<fileset dir="${web_app_src}/lib/ace" includes="theme-textmate.js"/>
|
||||
<fileset dir="${web_app_src}/lib/ace" includes="theme-jso.js"/>
|
||||
</concat>
|
||||
<copy file="${web_app_src}/lib/ace/worker-json.js" todir="${web_app}/lib/ace" />
|
||||
|
||||
<copy file="${web_app_src}/lib/jsonlint/jsonlint.js" todir="${web_app}/lib/jsonlint" />
|
||||
<copy file="${jsoneditor_min}/jsoneditor-min.js" todir="${web_app}/lib/jsoneditor" />
|
||||
<copy file="${jsoneditor_min}/jsoneditor-min.css" todir="${web_app}/lib/jsoneditor" />
|
||||
|
|
|
@ -3,6 +3,12 @@
|
|||
http://jsoneditoronline.org
|
||||
|
||||
|
||||
## <not yet released>, version 2.1.0
|
||||
|
||||
- Implemented code editor Ace instead of the plain text JSON editor. Ace
|
||||
provides syntax highlighting and code inspection.
|
||||
|
||||
|
||||
## 2013-02-26, version 2.0.2
|
||||
|
||||
- Fixed: dragarea of the root node was wrongly visible is removed now.
|
||||
|
|
|
@ -45,6 +45,7 @@
|
|||
.jsoneditor .separator {
|
||||
padding: 3px 0;
|
||||
vertical-align: top;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.jsoneditor .field[contenteditable=true]:focus,
|
||||
|
|
|
@ -59,4 +59,23 @@
|
|||
background-position: -72px -120px;
|
||||
}
|
||||
|
||||
.jsoneditor .menu a {
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 10pt;
|
||||
color: #97B0F8;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.jsoneditor .menu a:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.jsoneditor .menu a.poweredBy {
|
||||
font-size: 8pt;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* TODO: css for button:disabled is not supported by IE8 */
|
||||
|
|
|
@ -25,6 +25,9 @@ var jsoneditor = jsoneditor || {};
|
|||
* @constructor jsoneditor.JSONFormatter
|
||||
* @param {Element} container
|
||||
* @param {Object} [options] Object with options. available options:
|
||||
* {String} mode Available values:
|
||||
* "text" (default)
|
||||
* or "code".
|
||||
* {Number} indentation Number of indentation
|
||||
* spaces. 4 by default.
|
||||
* {function} change Callback method
|
||||
|
@ -43,7 +46,23 @@ jsoneditor.JSONFormatter = function (container, options, json) {
|
|||
'(all modern browsers support JSON).');
|
||||
}
|
||||
|
||||
// read options
|
||||
options = options || {};
|
||||
if (options.indentation) {
|
||||
this.indentation = Number(options.indentation);
|
||||
}
|
||||
this.mode = (options.mode == 'code') ? 'code' : 'text';
|
||||
// load an ace code editor
|
||||
if (this.mode == 'code' && (typeof ace === 'undefined')) {
|
||||
this.mode = 'text';
|
||||
console.log('ERROR: Cannot load code editor, Ace library not loaded. ' +
|
||||
'Falling back to plain text editor');
|
||||
}
|
||||
|
||||
var me = this;
|
||||
this.container = container;
|
||||
this.editor = undefined; // ace code editor
|
||||
this.textarea = undefined; // plain text editor (fallback when Ace is not available)
|
||||
this.indentation = 4; // number of spaces
|
||||
|
||||
this.width = container.clientWidth;
|
||||
|
@ -68,6 +87,9 @@ jsoneditor.JSONFormatter = function (container, options, json) {
|
|||
buttonFormat.title = 'Format JSON data, with proper indentation and line feeds';
|
||||
//buttonFormat.className = 'jsoneditor-button';
|
||||
this.menu.appendChild(buttonFormat);
|
||||
buttonFormat.onclick = function () {
|
||||
me.format();
|
||||
};
|
||||
|
||||
// create compact button
|
||||
var buttonCompact = document.createElement('button');
|
||||
|
@ -76,20 +98,59 @@ jsoneditor.JSONFormatter = function (container, options, json) {
|
|||
buttonCompact.title = 'Compact JSON data, remove all whitespaces';
|
||||
//buttonCompact.className = 'jsoneditor-button';
|
||||
this.menu.appendChild(buttonCompact);
|
||||
buttonCompact.onclick = function () {
|
||||
me.compact();
|
||||
};
|
||||
|
||||
this.content = document.createElement('div');
|
||||
this.content.className = 'outer';
|
||||
this.frame.appendChild(this.content);
|
||||
|
||||
this.textarea = document.createElement('textarea');
|
||||
this.textarea.className = 'content';
|
||||
this.textarea.spellcheck = false;
|
||||
this.content.appendChild(this.textarea);
|
||||
this.container.appendChild(this.frame);
|
||||
|
||||
var textarea = this.textarea;
|
||||
if (this.mode == 'code') {
|
||||
this.editorDom = document.createElement('div');
|
||||
this.editorDom.style.height = '100%'; // TODO: move to css
|
||||
this.editorDom.style.width = '100%'; // TODO: move to css
|
||||
this.content.appendChild(this.editorDom);
|
||||
|
||||
var editor = ace.edit(this.editorDom);
|
||||
editor.setTheme('ace/theme/jso');
|
||||
editor.setShowPrintMargin(false);
|
||||
editor.setFontSize(13);
|
||||
editor.getSession().setMode('ace/mode/json');
|
||||
editor.getSession().setUseSoftTabs(true);
|
||||
editor.getSession().setUseWrapMode(true);
|
||||
this.editor = editor;
|
||||
|
||||
var poweredBy = document.createElement('a');
|
||||
poweredBy.appendChild(document.createTextNode('powered by ace'));
|
||||
poweredBy.href = 'http://ace.ajax.org';
|
||||
poweredBy.target = '_blank';
|
||||
poweredBy.className = 'poweredBy';
|
||||
poweredBy.onclick = function () {
|
||||
// TODO: this anchor falls below the margin of the content,
|
||||
// therefore the normal a.href does not work. We use a click event
|
||||
// for now, but this should be fixed.
|
||||
window.open(poweredBy.href, poweredBy.target);
|
||||
};
|
||||
this.menu.appendChild(poweredBy);
|
||||
|
||||
if (options.change) {
|
||||
// register onchange event
|
||||
editor.on('change', function () {
|
||||
options.change();
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
// load a plain text textarea
|
||||
var textarea = document.createElement('textarea');
|
||||
textarea.className = 'content';
|
||||
textarea.spellcheck = false;
|
||||
this.content.appendChild(textarea);
|
||||
this.textarea = textarea;
|
||||
|
||||
// read the options
|
||||
if (options) {
|
||||
if (options.change) {
|
||||
// register onchange event
|
||||
if (this.textarea.oninput === null) {
|
||||
|
@ -104,32 +165,7 @@ jsoneditor.JSONFormatter = function (container, options, json) {
|
|||
}
|
||||
}
|
||||
}
|
||||
if (options.indentation) {
|
||||
this.indentation = Number(options.indentation);
|
||||
}
|
||||
}
|
||||
|
||||
var me = this;
|
||||
buttonFormat.onclick = function () {
|
||||
try {
|
||||
var json = jsoneditor.util.parse(textarea.value);
|
||||
textarea.value = JSON.stringify(json, null, me.indentation);
|
||||
}
|
||||
catch (err) {
|
||||
me.onError(err);
|
||||
}
|
||||
};
|
||||
buttonCompact.onclick = function () {
|
||||
try {
|
||||
var json = jsoneditor.util.parse(textarea.value);
|
||||
textarea.value = JSON.stringify(json);
|
||||
}
|
||||
catch (err) {
|
||||
me.onError(err);
|
||||
}
|
||||
};
|
||||
|
||||
this.container.appendChild(this.frame);
|
||||
|
||||
// load initial json object or string
|
||||
if (typeof(json) == 'string') {
|
||||
|
@ -149,12 +185,60 @@ jsoneditor.JSONFormatter.prototype.onError = function(err) {
|
|||
// action should be implemented for the instance
|
||||
};
|
||||
|
||||
/**
|
||||
* Compact the code in the formatter
|
||||
*/
|
||||
jsoneditor.JSONFormatter.prototype.compact = function () {
|
||||
try {
|
||||
var json = jsoneditor.util.parse(this.getText());
|
||||
this.setText(JSON.stringify(json));
|
||||
}
|
||||
catch (err) {
|
||||
this.onError(err);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Format the code in the formatter
|
||||
*/
|
||||
jsoneditor.JSONFormatter.prototype.format = function () {
|
||||
try {
|
||||
var json = jsoneditor.util.parse(this.getText());
|
||||
this.setText(JSON.stringify(json, null, this.indentation));
|
||||
}
|
||||
catch (err) {
|
||||
this.onError(err);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set focus to the formatter
|
||||
*/
|
||||
jsoneditor.JSONFormatter.prototype.focus = function () {
|
||||
if (this.textarea) {
|
||||
this.textarea.focus();
|
||||
}
|
||||
if (this.editor) {
|
||||
this.editor.focus();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Resize the formatter
|
||||
*/
|
||||
jsoneditor.JSONFormatter.prototype.resize = function () {
|
||||
if (this.editor) {
|
||||
var force = false;
|
||||
this.editor.resize(force);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set json data in the formatter
|
||||
* @param {Object} json
|
||||
*/
|
||||
jsoneditor.JSONFormatter.prototype.set = function(json) {
|
||||
this.textarea.value = JSON.stringify(json, null, this.indentation);
|
||||
this.setText(JSON.stringify(json, null, this.indentation));
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -162,7 +246,7 @@ jsoneditor.JSONFormatter.prototype.set = function(json) {
|
|||
* @return {Object} json
|
||||
*/
|
||||
jsoneditor.JSONFormatter.prototype.get = function() {
|
||||
return jsoneditor.util.parse(this.textarea.value);
|
||||
return jsoneditor.util.parse(this.getText());
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -170,7 +254,13 @@ jsoneditor.JSONFormatter.prototype.get = function() {
|
|||
* @return {String} text
|
||||
*/
|
||||
jsoneditor.JSONFormatter.prototype.getText = function() {
|
||||
if (this.textarea) {
|
||||
return this.textarea.value;
|
||||
}
|
||||
if (this.editor) {
|
||||
return this.editor.getValue();
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -178,5 +268,10 @@ jsoneditor.JSONFormatter.prototype.getText = function() {
|
|||
* @param {String} text
|
||||
*/
|
||||
jsoneditor.JSONFormatter.prototype.setText = function(text) {
|
||||
if (this.textarea) {
|
||||
this.textarea.value = text;
|
||||
}
|
||||
if (this.editor) {
|
||||
return this.editor.setValue(text, -1);
|
||||
}
|
||||
};
|
||||
|
|
|
@ -991,6 +991,7 @@ jsoneditor.Node.prototype._updateDomValue = function () {
|
|||
var domValue = this.dom.value;
|
||||
if (domValue) {
|
||||
// set text color depending on value type
|
||||
// TODO: put colors in css
|
||||
var v = this.value;
|
||||
var t = (this.type == 'auto') ? typeof(v) : this.type;
|
||||
var color = '';
|
||||
|
@ -1001,14 +1002,14 @@ jsoneditor.Node.prototype._updateDomValue = function () {
|
|||
color = 'red';
|
||||
}
|
||||
else if (t == 'boolean') {
|
||||
color = 'blue';
|
||||
color = 'orange';
|
||||
}
|
||||
else if (this._hasChilds()) {
|
||||
// note: typeof(null)=="object", therefore check this.type instead of t
|
||||
color = '';
|
||||
}
|
||||
else if (v === null) {
|
||||
color = 'purple';
|
||||
color = 'blue';
|
||||
}
|
||||
else {
|
||||
// invalid value
|
||||
|
|
Loading…
Reference in New Issue