Implemented a new option `escapeUnicode`, which will show the hexadecimal unicode instead of the character itself. (See #93 and #230).

HISTORY.md

@@ -6,7 +6,9 @@ https://github.com/josdejong/jsoneditor
 ## not yet released, version 4.2.2
 
 - Replaced the PNG icon images with SVG. Thanks @1j01.
-- Fixed #230, #227, and #93: html and unicode characters not escaped.
+- Implemented a new option `escapeUnicode`, which will show the hexadecimal 
+  unicode instead of the character itself. (See #93 and #230).
+- Fixed #227: html codes like `&` not escaped.
 - Fixed #149: Memory leak when switching mode from/to `code` mode, web worker
   of Ace editor wasn't cleaned up.
 - Fixed #234: Remove dependency on a fork of the `jsonlint` project on github.

docs/api.md

@@ -24,6 +24,9 @@ Constructs a new JSONEditor.
   - `{function} error`  
     Set a callback method triggered when an error occurs. Invoked with the error as first argument. The callback is only invoked
     for errors triggered by a users action.
+  - `{boolean} escapeUnicode`  
+    If true, unicode characters are escaped and displayed as their code instead
+    of the character. False by default.
   - `{boolean} history`  
     Enables history, adds a button Undo and Redo to the menu of the JSONEditor. True by default. Only applicable when `mode` is 'tree' or 'form'.
   - `{String} mode`  

src/js/JSONEditor.js

@@ -26,6 +26,9 @@ var util = require('./util');
  *                                                        spaces. 4 by default.
  *                                                        Only applicable for
  *                                                        modes 'text' and 'code'
+ *                               {boolean} escapeUnicode  If true, unicode
+ *                                                        characters are escaped.
+ *                                                        false by default.
  * @param {Object | undefined} json JSON object
  */
 function JSONEditor (container, options, json) {

src/js/Node.js

@@ -2857,6 +2857,10 @@ Node.prototype._stringCast = function(str) {
  * @private
  */
 Node.prototype._escapeHTML = function (text) {
+  if (typeof text !== 'string') {
+    return String(text);
+  }
+  else {
     var htmlEscaped = String(text)
         .replace(/&/g, '&')    // must be replaced first!
         .replace(/</g, '&lt;')
@@ -2866,7 +2870,12 @@ Node.prototype._escapeHTML = function (text) {
         .replace(/ $/, '&nbsp;');  // space at end
 
     var json = JSON.stringify(htmlEscaped);
-  return json.substring(1, json.length - 1);
+    var html = json.substring(1, json.length - 1);
+    if (this.editor.options.escapeUnicode === true) {
+      html = util.escapeUnicodeChars(html);
+    }
+    return html;
+  }
 };
 
 /**

src/js/textmode.js

@@ -27,6 +27,9 @@ var textmode = {};
  *                                                   triggered after setMode
  *                             {Object} ace          A custom instance of
  *                                                   Ace editor.
+ *                             {boolean} escapeUnicode  If true, unicode
+ *                                                      characters are escaped.
+ *                                                      false by default.
  * @private
  */
 textmode.create = function (container, options) {
@@ -339,11 +342,18 @@ textmode.getText = function() {
  * @param {String} jsonText
  */
 textmode.setText = function(jsonText) {
+  if (this.options.escapeUnicode === true) {
+    text = util.escapeUnicodeChars(jsonText);
+  }
+  else {
+    text = jsonText;
+  }
+
   if (this.textarea) {
-    this.textarea.value = jsonText;
+    this.textarea.value = text;
   }
   if (this.editor) {
-    this.editor.setValue(jsonText, -1);
+    this.editor.setValue(text, -1);
   }
 };
 

src/js/treemode.js

@@ -22,6 +22,9 @@ var treemode = {};
  *                               {function} change  Callback method, triggered
  *                                                  on change of contents
  *                               {String} name      Field name for the root node.
+ *                               {boolean} escapeUnicode  If true, unicode
+ *                                                        characters are escaped.
+ *                                                        false by default.
  * @private
  */
 treemode.create = function (container, options) {

src/js/util.js

@@ -147,6 +147,21 @@ exports.sanitize = function (jsString) {
   return chars.join('');
 };
 
+/**
+ * Escape unicode characters.
+ * For example input '\u2661' (length 1) will output '\\u2661' (length 5).
+ * @param {string} text
+ * @return {string}
+ */
+exports.escapeUnicodeChars = function (text) {
+  // see https://www.wikiwand.com/en/UTF-16
+  // note: we leave surrogate pairs as two individual chars,
+  // as JSON doesn't interpret them as a single unicode char.
+  return text.replace(/[\u007F-\uFFFF]/g, function(c) {
+    return '\\u'+('0000' + c.charCodeAt(0).toString(16)).slice(-4);
+  })
+};
+
 /**
  * Validate a string containing a JSON object
  * This method uses JSONLint to validate the String. If JSONLint is not

test/test_build.html

@@ -1,13 +1,12 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-  <title>Test JSONEditor</title>
-  <!--<meta http-equiv="Content-Type" content="text/html;charset=utf-8">-->
+  <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>
+  <style type="text/css">
     body {
       font: 10.5pt arial;
       color: #4d4d4d;
@@ -46,7 +45,8 @@
     error: function (err) {
       alert(err.toString());
     },
-    indentation: 4
+    indentation: 4,
+    escapeUnicode: true
   };
 
   json = {
@@ -54,7 +54,7 @@
     "boolean": true,
     "htmlcode": '&quot;',
     "escaped_unicode": '\\u20b9',
-    "unicode": '\u20b9',
+    "unicode": '\u20b9,\uD83D\uDCA9',
     "return": '\n',
     "null": null,
     "number": 123,
@@ -64,7 +64,8 @@
 
   editor = new JSONEditor(container, options, json);
 
-  console.log(JSON.stringify(json));
+  console.log('json', json);
+  console.log('string', JSON.stringify(json));
 </script>
 </body>
 </html>