diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js
index 5de4c73e6..8264d732c 100644
--- 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
index 8e780f6df..22eda180e 100644
--- 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
new file mode 100644
index 000000000..ad1603c3c
--- /dev/null
+++ b/test/test_custom_render.html
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Test color picker firing onChange on every change instead of onDone.
+
+
+
+
+
+
+