目录
1.集成jsoneditor到React
关于怎样将jsoneditor集成到React中，请参考文章：https://blog.csdn.net/wdquan19851029/article/details/115869264，本文只讲怎样修改jsoneditor源码，使用password格式保护json敏感信息。
从github下载源代码：https://github.com/josdejong/jsoneditor
2.修改代码
我们得考虑，真正使用的时候，我们一般只是需要保护部分敏感信息，没有必要保护所有信息，那样根本什么信息都看不到，所以我们只考虑保护部分信息。
看我们的json数据，其中有需要保护的数据 "sensitive-data".
-
const initialJson = {
-
"Array": [
1,
2,
3],
-
"Boolean":
true,
-
"Null":
null,
-
"Number":
123,
-
"Object": {
"a":
"b",
"c":
"d"},
-
"MultiLevel":{
-
"multi":{
-
"e":
"f",
-
"h":
"h"
-
}
-
},
-
"String":
"Hello World",
-
"sensitive-data": {
-
"sensitive1":
"sensitive1",
-
"sensitive2":
"sensitive2",
-
"sensitive3":
"sensitive3"
-
}
-
}
(1).添加Option
需要保护的信息，我们设计以option的形式传进去。我们自己添加一个新的参数sensitiveDataLabel ，设置其值为"sensitive-data"
-
const options = {
-
mode:
'tree',
-
sensitiveDataLabel:
'sensitive-data',
-
onChangeJSON:
(data)=>{
-
console.log(
'JSONeditor:change:',data);}
-
}
(2).修改Node.js文件
然后修改Node.js的_createDomValue ()函数：其中注释为"新增的代码"，是我做的修改，主要是判断parent node的name是不是与我们传进来的option sensitiveDataLabel 相等，如果相等，那么就创建一个input标签，type为password，用来保护敏感信息。
-
/**
-
* Create an editable value
-
* @private
-
*/
-
_createDomValue () {
-
let domValue
-
-
if (
this.type ===
'array') {
-
domValue = document.createElement(
'div')
-
domValue.textContent =
'[...]'
-
}
else
if (
this.type ===
'object') {
-
domValue = document.createElement(
'div')
-
domValue.textContent =
'{...}'
-
}
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)
-
}
else {
-
// create an editable or read-only div
-
//新增的代码
-
let isSensitiveData =
false
-
if(
this.parent) {
-
let sensitiveDataLabel =
""
-
if(
this.editor.options.sensitiveDataLabel) sensitiveDataLabel =
this.editor.options.sensitiveDataLabel
-
if(
this.parent.getName() &&
this.parent.getName() == sensitiveDataLabel){
-
isSensitiveData =
true
-
}
-
}
-
-
if(isSensitiveData){
-
//新增的代码
-
domValue = document.createElement(
'input')
-
domValue.type =
"password"
-
domValue.placeholder=
""
-
domValue.contentEditable =
this.editable.value
-
domValue.spellcheck =
false
-
domValue.value =
this._escapeHTML(
this.value)
-
}
else{
-
domValue = document.createElement(
'div')
-
domValue.contentEditable =
this.editable.value
-
domValue.spellcheck =
false
-
domValue.innerHTML =
this._escapeHTML(
this.value)
-
}
-
}
-
}
-
-
return domValue
-
}
重新编译源代码，并导入React工程之后，可以看到效果：
(3).修改util.js文件
但是当进行修改的时候，发现修改无效，头疼，继续修改代码，修改util.js文件中的getInnerText (element, buffer)函数。
注释为"新增的代码"部分，就是我做的修改，将用户在上面界面的修改，赋给child这个Node，因为以前都是用<div>标签去显示value，现在改成了<input>，按照以前的方式，是用innerHTML属性获取值，但是现在需要使用value属性去获取值。
-
export
function getInnerText (element, buffer) {
-
const first = (buffer ===
undefined)
-
if (first) {
-
buffer = {
-
_text:
'',
-
flush:
function () {
-
const text =
this._text
-
this._text =
''
-
return text
-
},
-
set:
function (text) {
-
this._text = text
-
}
-
}
-
}
-
-
// text node
-
//console.log("Debug: getInnerText() -> element.nodeValue : " + element.nodeValue)
-
if (element.nodeValue) {
-
// remove return characters and the whitespace surrounding return characters
-
const trimmedValue = element.nodeValue.replace(
/\s*\n\s*/g,
'')
-
if (trimmedValue !==
'') {
-
return buffer.flush() + trimmedValue
-
}
else {
-
// ignore empty text
-
return
''
-
}
-
}
-
-
// divs or other HTML elements
-
if (element.hasChildNodes()) {
-
const childNodes = element.childNodes
-
let innerText =
''
-
-
for (
let i =
0, iMax = childNodes.length; i < iMax; i++) {
-
const child = childNodes[i]
-
-
//新增的代码
-
if(element.type ==
"password" && element.value){
-
child.nodeValue = element.value;
-
}
-
-
if (child.nodeName ===
'DIV' || child.nodeName ===
'P') {
-
const prevChild = childNodes[i -
1]
-
const prevName = prevChild ? prevChild.nodeName :
undefined
-
if (prevName && prevName !==
'DIV' && prevName !==
'P' && prevName !==
'BR') {
-
if (innerText !==
'') {
-
innerText +=
'\n'
-
}
-
buffer.flush()
-
}
-
innerText += getInnerText(child, buffer)
-
buffer.set(
'\n')
-
}
else
if (child.nodeName ===
'BR') {
-
innerText += buffer.flush()
-
buffer.set(
'\n')
-
}
else {
-
innerText += getInnerText(child, buffer)
-
}
-
}
-
-
return innerText
-
}
-
-
// br or unknown
-
return
''
-
}
转载：https://blog.csdn.net/wdquan19851029/article/details/115872192
查看评论