2020-05-13 14:17:54 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2020-09-23 16:23:38 +08:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
2020-05-13 14:17:54 +08:00
|
|
|
<title>JSONEditor test getInnerHtml</title>
|
|
|
|
|
|
|
|
|
|
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
|
|
|
|
|
<script src="../dist/jsoneditor.js"></script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
html, body {
|
|
|
|
|
font-family: verdana;
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
font-size: 11pt;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#editableDiv {
|
|
|
|
|
width: 600px;
|
|
|
|
|
height: 200px;
|
|
|
|
|
border: 1px solid red;
|
|
|
|
|
background: white;
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#editableDiv p {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#innerText,
|
|
|
|
|
#getInnerText,
|
|
|
|
|
#innerTextStr,
|
|
|
|
|
#textContentStr {
|
|
|
|
|
width: 600px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#innerText,
|
|
|
|
|
#getInnerText {
|
|
|
|
|
height: 200px;
|
|
|
|
|
border: 1px solid green;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#innerTextStr,
|
|
|
|
|
#textContentStr {
|
|
|
|
|
width: 600px;
|
|
|
|
|
border: 1px solid gray;
|
|
|
|
|
background: #f5f5f5;
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
contenteditable div:
|
|
|
|
|
<div id="editableDiv" contenteditable="true">
|
|
|
|
|
<p>Hello world</p>
|
|
|
|
|
<p>test paste from OpenOffice </p>
|
|
|
|
|
a
|
|
|
|
|
<p>
|
|
|
|
|
<br>
|
|
|
|
|
</p>
|
|
|
|
|
<p>test</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p>
|
|
|
|
|
innerText: <br/>
|
|
|
|
|
<textarea id="innerText"></textarea>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
getInnerText: <br/>
|
|
|
|
|
<textarea id="getInnerText"></textarea>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<p>
|
|
|
|
|
inner text (stringified): <br/>
|
|
|
|
|
<input id="innerTextStr" readonly />
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
text content (stringified): <br/>
|
|
|
|
|
<input id="textContentStr" readonly />
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const editableDiv = document.getElementById('editableDiv')
|
|
|
|
|
const innerText = document.getElementById('innerText')
|
|
|
|
|
const getInnerTextDiv = document.getElementById('getInnerText')
|
|
|
|
|
const innerTextStr = document.getElementById('innerTextStr')
|
|
|
|
|
const textContentStr = document.getElementById('textContentStr')
|
|
|
|
|
|
|
|
|
|
function updateInnerTexts () {
|
|
|
|
|
innerText.value = editableDiv.innerText
|
|
|
|
|
getInnerTextDiv.value = JSONEditor.getInnerText(editableDiv)
|
|
|
|
|
innerTextStr.value = JSON.stringify(editableDiv.innerText)
|
|
|
|
|
textContentStr.value = JSON.stringify(editableDiv.textContent)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
editableDiv.oninput = updateInnerTexts
|
|
|
|
|
|
|
|
|
|
updateInnerTexts()
|
|
|
|
|
|
|
|
|
|
innerText.oninput = function () {
|
|
|
|
|
editableDiv.innerText = innerText.value
|
|
|
|
|
getInnerTextDiv.value = getInnerText(editableDiv)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getInnerTextDiv.oninput = function () {
|
|
|
|
|
editableDiv.innerText = getInnerTextDiv.value
|
|
|
|
|
innerText.value = editableDiv.innerText
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
