StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #383 from walkerrandolphsmith/develop 

#382 Read only text mode.
This commit is contained in:
Jos de Jong 2017-04-12 21:08:57 +02:00 committed by GitHub
parent cfc5a805e7 c0b7139fd2
commit eadf5c6403
2 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
examples/09_readonly_text_mode.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Switch mode</title>
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<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;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
Switch editor mode using the mode box.
Note that the mode can be changed programmatically as well using the method
<code>editor.setMode(mode)</code>, try it in the console of your browser.
</p>
<div id="jsoneditor"></div>
<script>
var container = document.getElementById('jsoneditor');
var options = {
mode: 'text',
modes: ['text', 'code'],
onEditable: function() { //absence of key makes the text area not readOnly
return false; // returning false makes the text area readOnly
},
onError: function (err) {
alert(err.toString());
},
onModeChange: function (newMode, oldMode) {
console.log('Mode switched from', oldMode, 'to', newMode);
}
};
var json = {
"array": [1, 2, 3],
"boolean": true,
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World"
};
var editor = new JSONEditor(container, options, json);
</script>
</body>
</html>

9
src/js/textmode.js
View File

@ -24,6 +24,8 @@ var DEFAULT_THEME = 'ace/theme/jsoneditor';
* triggered on change
* {function} onModeChange Callback method
* triggered after setMode
* {function} onEditable Determine if textarea is readOnly
* readOnly defaults true
* {Object} ace A custom instance of
* Ace editor.
* {boolean} escapeUnicode If true, unicode
@ -138,6 +140,11 @@ textmode.create = function (container, options) {
});
}
var emptyNode = {};
var isReadOnly = (this.options.onEditable
&& typeof(this.options.onEditable === 'function')
&& !this.options.onEditable(emptyNode));
this.content = document.createElement('div');
this.content.className = 'jsoneditor-outer';
this.frame.appendChild(this.content);
@ -153,6 +160,7 @@ textmode.create = function (container, options) {
var aceEditor = _ace.edit(this.editorDom);
aceEditor.$blockScrolling = Infinity;
aceEditor.setTheme(this.theme);
aceEditor.setOptions({ readOnly: isReadOnly });
aceEditor.setShowPrintMargin(false);
aceEditor.setFontSize(13);
aceEditor.getSession().setMode('ace/mode/json');
@ -200,6 +208,7 @@ textmode.create = function (container, options) {
textarea.spellcheck = false;
this.content.appendChild(textarea);
this.textarea = textarea;
this.textarea.readOnly = isReadOnly;
// register onchange event
if (this.textarea.oninput === null) {