josdejong · 123survesh · Oct 12, 2019 · Oct 18, 2019 · Oct 18, 2019 · Oct 18, 2019
diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js
@@ -174,7 +174,8 @@ JSONEditor.VALID_OPTIONS = [
   'timestampTag',
   'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
   'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform',
-  'maxVisibleChilds'
+  'maxVisibleChilds',
+  'onRenderValue'
 ]
 
 /**

diff --git a/src/js/Node.js b/src/js/Node.js
@@ -1504,8 +1504,9 @@ export class Node {
    */
   _getDomValue () {
     this._clearValueError()
-
-    if (this.dom.value && this.type !== 'array' && this.type !== 'object') {
+    if (this.customValueRenderFlag) {
+      this.valueInnerText = this.value
+    } else if (this.dom.value && this.type !== 'array' && this.type !== 'object') {
       this.valueInnerText = getInnerText(this.dom.value)
     }
 
@@ -1641,9 +1642,8 @@ export class Node {
    */
   _updateDomValue () {
     const domValue = this.dom.value
-    if (domValue) {
+    if (domValue && !this.customValueRenderFlag) {
       const classNames = ['jsoneditor-value']
-
       // set text color depending on value type
       const value = this.value
       const valueType = (this.type === 'auto') ? getType(value) : this.type
@@ -2179,7 +2179,7 @@ export class Node {
 
     // apply value to DOM
     const domValue = this.dom.value
-    if (domValue) {
+    if (domValue && !this.customValueRenderFlag) {
       if (this.type === 'array') {
         this.updateNodeName()
         addClassName(this.dom.tr, 'jsoneditor-expandable')
@@ -2295,17 +2295,42 @@ export class Node {
       domValue = document.createElement('div')
       domValue.innerHTML = '{...}'
     } else {
-      if (!this.editable.value && isUrl(this.value)) {
-        // create a link in case of read-only editor and value containing an url
-        domValue = document.createElement('a')
-        domValue.href = this.value
-        domValue.innerHTML = this._escapeHTML(this.value)
+      let renderData
+      this.customValueRenderFlag = false
+      if (this.editor.options.onRenderValue) {
+        var _this = this
+        const conf = {
+          value: this.value,
+          field: this.field,
+          path: this.getPath(),
+          onChange: function (value) {
+            _this.setValue(value)
+          }
+        }
+        renderData = this.editor.options.onRenderValue(conf)
+      }
+      if (renderData && renderData.html) {
+        console.log(renderData)
+        // domValue = document.createElement('div')
+        // domValue.contentEditable = this.editable.value
+        // domValue.spellcheck = false
+        // domValue.appendChild(renderData.html);
+
+        domValue = renderData.html
+        this.customValueRenderFlag = true
       } else {
-        // create an editable or read-only div
-        domValue = document.createElement('div')
-        domValue.contentEditable = this.editable.value
-        domValue.spellcheck = false
-        domValue.innerHTML = this._escapeHTML(this.value)
+        if (!this.editable.value && isUrl(this.value)) {
+          // create a link in case of read-only editor and value containing an url
+          domValue = document.createElement('a')
+          domValue.href = this.value
+          domValue.innerHTML = this._escapeHTML(this.value)
+        } else {
+          // create an editable or read-only div
+          domValue = document.createElement('div')
+          domValue.contentEditable = this.editable.value
+          domValue.spellcheck = false
+          domValue.innerHTML = this._escapeHTML(this.value)
+        }
       }
     }
 

diff --git a/test/test_custom_render.html b/test/test_custom_render.html
@@ -0,0 +1,97 @@
+<!DOCTYPE HTML>
+<html>
+<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">
+    body {
+      font: 10.5pt arial;
+      color: #4d4d4d;
+      line-height: 150%;
+      width: 500px;
+      padding-left: 40px;
+    }
+
+    code {
+      background-color: #f5f5f5;
+    }
+
+    #jsoneditor {
+      width: 500px;
+      height: 500px;
+    }
+  </style>
+</head>
+<body>
+
+<p>
+  Test color picker firing onChange on every change instead of onDone.
+</p>
+
+<form>
+  <div id="jsoneditor"></div>
+</form>
+
+<script>
+  var container, options, json, editor;
+
+  container = document.getElementById('jsoneditor');
+
+  options = {
+    mode: 'tree',
+    modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
+    onRenderValue: function(obj){
+      console.log(obj);
+      switch(obj.field)
+      {
+        case "input":
+          var text = document.createElement("input");
+          text.setAttribute("type","text");
+          text.setAttribute ("value", obj.value);
+          text.addEventListener("change",function(e){
+            obj.onChange(e.target.value);
+          })
+          return {
+            html: text
+          }
+
+        case "video":
+          var iframe = document.createElement( "iframe" );
+
+          iframe.setAttribute( "allowfullscreen", "" );
+          iframe.setAttribute( "frameborder", "0" );
+          iframe.setAttribute( "src", obj.value);
+          return {
+            html: iframe
+          }
+      }
+      return null;
+    }
+  };
+
+  json = {
+    "array": [1, 2, [3,4,5]],
+    "input": "Howdy",
+    "video": "https://www.youtube.com/embed/mN0zPOpADL4?rel=0&showinfo=0&autoplay=1",
+    "htmlcode": '&quot;',
+    "escaped_unicode": '\\u20b9',
+    "unicode": '\u20b9,\uD83D\uDCA9',
+    "return": '\n',
+    "null": null,
+    "number": 123,
+    "object": {"a": "b", "c": "d"},
+    "string": "Hello World",
+    "timestamp": 1534952749890,
+    "url": "http://jsoneditoronline.org"
+  };
+
+  editor = new JSONEditor(container, options, json);
+
+  console.log('json', json);
+  console.log('string', JSON.stringify(json));
+</script>
+</body>
+</html>