From 2c721733669a93940f3400dfd8db9e0bb7cc9ee1 Mon Sep 17 00:00:00 2001 From: Walker Randolph Smith Date: Sat, 8 Apr 2017 16:37:47 -0400 Subject: [PATCH 1/4] #382 Read only text mode. --- examples/06_readonly_text_mode.html | 69 +++++++++++++++++++++++++++++ src/js/textmode.js | 9 ++++ 2 files changed, 78 insertions(+) create mode 100644 examples/06_readonly_text_mode.html diff --git a/examples/06_readonly_text_mode.html b/examples/06_readonly_text_mode.html new file mode 100644 index 0000000..362e054 --- /dev/null +++ b/examples/06_readonly_text_mode.html @@ -0,0 +1,69 @@ + + + + JSONEditor | Switch mode + + + + + + + + + + + +

+ Switch editor mode using the mode box. + Note that the mode can be changed programmatically as well using the method + editor.setMode(mode), try it in the console of your browser. +

+ +
+ + + + diff --git a/src/js/textmode.js b/src/js/textmode.js index e27e88a..28de1fd 100644 --- a/src/js/textmode.js +++ b/src/js/textmode.js @@ -31,6 +31,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 @@ -202,6 +204,13 @@ textmode.create = function (container, options) { this.content.appendChild(textarea); this.textarea = textarea; + var emptyNode = {}; + var isReadOnly = (this.options.onEditable + && typeof(this.options.onEditable === 'Function') + && !this.options.onEditable(emptyNode)); + + this.textarea.readOnly = isReadOnly; + // register onchange event if (this.textarea.oninput === null) { this.textarea.oninput = this._onChange.bind(this); From c29bcba5ff33f1b03962f42b4f5d25ef394c94e4 Mon Sep 17 00:00:00 2001 From: Walker Randolph Smith Date: Sat, 8 Apr 2017 17:13:52 -0400 Subject: [PATCH 2/4] #382 typo on typeof function check --- src/js/textmode.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/textmode.js b/src/js/textmode.js index 28de1fd..11910db 100644 --- a/src/js/textmode.js +++ b/src/js/textmode.js @@ -206,7 +206,7 @@ textmode.create = function (container, options) { var emptyNode = {}; var isReadOnly = (this.options.onEditable - && typeof(this.options.onEditable === 'Function') + && typeof(this.options.onEditable === 'function') && !this.options.onEditable(emptyNode)); this.textarea.readOnly = isReadOnly; From 3539f40dc5fb3c6c3011bd8764dcb6c0158a3f58 Mon Sep 17 00:00:00 2001 From: Walker Randolph Smith Date: Tue, 11 Apr 2017 16:55:32 -0400 Subject: [PATCH 3/4] #382 Support read only code mode. --- src/js/textmode.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/js/textmode.js b/src/js/textmode.js index 11910db..e80ce6a 100644 --- a/src/js/textmode.js +++ b/src/js/textmode.js @@ -141,6 +141,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); @@ -156,6 +161,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'); @@ -203,12 +209,6 @@ textmode.create = function (container, options) { textarea.spellcheck = false; this.content.appendChild(textarea); this.textarea = textarea; - - var emptyNode = {}; - var isReadOnly = (this.options.onEditable - && typeof(this.options.onEditable === 'function') - && !this.options.onEditable(emptyNode)); - this.textarea.readOnly = isReadOnly; // register onchange event From c0b7139fd2799c8bc02646ae9567979098f2d569 Mon Sep 17 00:00:00 2001 From: Walker Randolph Smith Date: Tue, 11 Apr 2017 16:55:55 -0400 Subject: [PATCH 4/4] #382 Rename example file. --- .../{06_readonly_text_mode.html => 09_readonly_text_mode.html} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename examples/{06_readonly_text_mode.html => 09_readonly_text_mode.html} (98%) diff --git a/examples/06_readonly_text_mode.html b/examples/09_readonly_text_mode.html similarity index 98% rename from examples/06_readonly_text_mode.html rename to examples/09_readonly_text_mode.html index 362e054..3e9321f 100644 --- a/examples/06_readonly_text_mode.html +++ b/examples/09_readonly_text_mode.html @@ -42,7 +42,7 @@ var options = { mode: 'text', - modes: ['text'], + modes: ['text', 'code'], onEditable: function() { //absence of key makes the text area not readOnly return false; // returning false makes the text area readOnly },