How can i change the uneitable node's style?

[bigbigmyworld]

hi，i have a node , it is uneitable ,but the node value style is "jsoneditor-value jsoneditor-string" ,it looks like an eitable value ,so ,how can i change the style in function onEditable?

[josdejong]

That is a good question indeed.

You can provide an onClassName callback, similar to onEditable, and use the output of onEditable to add class names:

function onEditable (node) {
  // ...
}

const options = {
  onEditable,
  onClassName: function (node) {
    const editable = onEditable(node)
    const readOnlyField = editable === false || (editable && editable.field === false)
    const readOnlyValue = editable === false || (editable && editable.value === false)

    if (readOnlyField || readOnlyValue) {
      return (readOnlyField ? 'read-only-field' : '') + ' ' + (readOnlyValue ? 'read-only-value' : '')
    }
  }
}

Then add styling to make the read only fields and values gray for example:

.read-only-field .jsoneditor-field,
.read-only-value .jsoneditor-value {
  color: gray !important;
}

Here a working example: https://jsbin.com/folibof/edit?html,output