Disabled saving files using HTML5 on Firefox to prevent a Firefox bug
This commit is contained in:
parent
1c1ffe4b8f
commit
8ddc6f3946
|
@ -3,9 +3,11 @@
|
|||
http://jsoneditoronline.org
|
||||
|
||||
|
||||
## not yet released, version 2.3.4
|
||||
## not yet released, version 2.4.0
|
||||
|
||||
- Dropped support for IE8, cleaned up legacy code for old browsers.
|
||||
- Disabled saving files using HTML5 on Firefox to prevent a Firefox bug
|
||||
blocking cut/paste functionality in editable divs after using a.download.
|
||||
|
||||
|
||||
## 2013-10-17, version 2.3.3
|
||||
|
|
|
@ -522,8 +522,11 @@ FileRetriever.prototype.saveFile = function (data, callback) {
|
|||
};
|
||||
|
||||
// create an anchor to save files to disk (if supported by the browser)
|
||||
// Note: save file using a.download is disabled in Firefox because of a
|
||||
// a bug in Firefox, which breaks the cut/paste functionality of
|
||||
// editable divs on the page.
|
||||
var a = document.createElement('a');
|
||||
if (this.options.html5 && a.download != undefined) {
|
||||
if (this.options.html5 && a.download != undefined && !util.isFirefox()) {
|
||||
// save file directly using a data URL
|
||||
a.style.display = 'none';
|
||||
a.href = 'data:application/json;charset=utf-8,' + encodeURIComponent(data);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "jsoneditor",
|
||||
"version": "2.3.4-SNAPSHOT",
|
||||
"version": "2.4.0-SNAPSHOT",
|
||||
"description": "A web-based tool to view, edit and format JSON",
|
||||
"tags": [
|
||||
"json",
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -27,7 +27,7 @@
|
|||
* Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
|
||||
*
|
||||
* @author Jos de Jong, <wjosdejong@gmail.com>
|
||||
* @version 2.3.4-SNAPSHOT
|
||||
* @version 2.4.0-SNAPSHOT
|
||||
* @date 2013-11-15
|
||||
*/
|
||||
(function () {
|
||||
|
@ -4597,8 +4597,8 @@ ContextMenu.prototype.show = function (anchor) {
|
|||
}
|
||||
});
|
||||
this.eventListeners.mousewheel = util.addEventListener(
|
||||
document, 'mousewheel', function () {
|
||||
// hide the menu on mouse scroll
|
||||
document, 'mousewheel', function (event) {
|
||||
// block scrolling when context menu is visible
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
});
|
||||
|
@ -5922,6 +5922,14 @@ util.getInternetExplorerVersion = function getInternetExplorerVersion() {
|
|||
return _ieVersion;
|
||||
};
|
||||
|
||||
/**
|
||||
* Test whether the current browser is Firefox
|
||||
* @returns {boolean} isFirefox
|
||||
*/
|
||||
util.isFirefox = function isFirefox () {
|
||||
return (navigator.userAgent.indexOf("Firefox") != -1);
|
||||
};
|
||||
|
||||
/**
|
||||
* cached internet explorer version
|
||||
* @type {Number}
|
||||
|
@ -5943,7 +5951,7 @@ util.addEventListener = function addEventListener(element, action, listener, use
|
|||
if (useCapture === undefined)
|
||||
useCapture = false;
|
||||
|
||||
if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
|
||||
if (action === "mousewheel" && util.isFirefox()) {
|
||||
action = "DOMMouseScroll"; // For Firefox
|
||||
}
|
||||
|
||||
|
@ -5966,7 +5974,7 @@ util.removeEventListener = function removeEventListener(element, action, listene
|
|||
if (useCapture === undefined)
|
||||
useCapture = false;
|
||||
|
||||
if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
|
||||
if (action === "mousewheel" && util.isFirefox()) {
|
||||
action = "DOMMouseScroll"; // For Firefox
|
||||
}
|
||||
|
||||
|
|
|
@ -419,6 +419,14 @@ util.getInternetExplorerVersion = function getInternetExplorerVersion() {
|
|||
return _ieVersion;
|
||||
};
|
||||
|
||||
/**
|
||||
* Test whether the current browser is Firefox
|
||||
* @returns {boolean} isFirefox
|
||||
*/
|
||||
util.isFirefox = function isFirefox () {
|
||||
return (navigator.userAgent.indexOf("Firefox") != -1);
|
||||
};
|
||||
|
||||
/**
|
||||
* cached internet explorer version
|
||||
* @type {Number}
|
||||
|
@ -440,7 +448,7 @@ util.addEventListener = function addEventListener(element, action, listener, use
|
|||
if (useCapture === undefined)
|
||||
useCapture = false;
|
||||
|
||||
if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
|
||||
if (action === "mousewheel" && util.isFirefox()) {
|
||||
action = "DOMMouseScroll"; // For Firefox
|
||||
}
|
||||
|
||||
|
@ -463,7 +471,7 @@ util.removeEventListener = function removeEventListener(element, action, listene
|
|||
if (useCapture === undefined)
|
||||
useCapture = false;
|
||||
|
||||
if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
|
||||
if (action === "mousewheel" && util.isFirefox()) {
|
||||
action = "DOMMouseScroll"; // For Firefox
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "jsoneditor",
|
||||
"version": "2.3.4-SNAPSHOT",
|
||||
"version": "2.4.0-SNAPSHOT",
|
||||
"main": "jsoneditor.js",
|
||||
"description": "A web-based tool to view, edit and format JSON",
|
||||
"tags": [
|
||||
|
|
|
@ -1,60 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Test Ace</title>
|
||||
|
||||
<script src="../app/web/lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="../app/web/lib/ace/mode-json.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="../app/web/lib/ace/theme-textmate.js" type="text/javascript" charset="utf-8"></script>
|
||||
<script src="../app/web/lib/ace/theme-jso.js" type="text/javascript" charset="utf-8"></script>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#editor {
|
||||
border: 1px solid gray;
|
||||
width: 50%;
|
||||
height: 75%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Test Ace</h1>
|
||||
|
||||
<div id="editor"></div>
|
||||
|
||||
<script>
|
||||
var editor = ace.edit('editor');
|
||||
editor.setTheme("ace/theme/jso");
|
||||
editor.setShowPrintMargin(false);
|
||||
editor.setFontSize(13);
|
||||
editor.getSession().setMode('ace/mode/json');
|
||||
editor.getSession().setUseSoftTabs(true);
|
||||
editor.getSession().setUseWrapMode(true);
|
||||
|
||||
var json = {
|
||||
"array": [
|
||||
1,
|
||||
2,
|
||||
3
|
||||
],
|
||||
"boolean": true,
|
||||
"null": null,
|
||||
"number": 123,
|
||||
"object": {
|
||||
"a": "b",
|
||||
"c": "d",
|
||||
"e": "f"
|
||||
},
|
||||
"string": "Hello World"
|
||||
};
|
||||
editor.setValue(JSON.stringify(json, null, 4), -1);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -1,449 +0,0 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>test editable div</title>
|
||||
|
||||
<!-- http://jsbeautifier.org/ -->
|
||||
<script type="text/javascript" src="http://jsbeautifier.org/beautify.js"></script>
|
||||
<script type="text/javascript" src="http://jsbeautifier.org/beautify-css.js"></script>
|
||||
<script type="text/javascript" src="http://jsbeautifier.org/beautify-html.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-size: 10pt;
|
||||
font-family: verdana, arial, sans-serif;
|
||||
}
|
||||
|
||||
#editor, #traverseText, #regexText {
|
||||
width: 200px;
|
||||
height: 400px;
|
||||
border: 1px solid gray;
|
||||
overflow: auto;
|
||||
font: 10pt monospace;
|
||||
color: #1a1a1a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#editor p { /* For IE and Opera */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
td, th {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p style="font-weight: bold;">
|
||||
Test file for testing two different methods to extract the inner text (including
|
||||
return characters) from and editable div.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button onclick="test1()">test 1</button>
|
||||
<button onclick="test2()">test 2</button>
|
||||
<button onclick="test3()">test 3</button>
|
||||
<button onclick="test4()">test 4</button>
|
||||
<button onclick="test5()">test 5</button>
|
||||
<button onclick="test6()">test 6</button>
|
||||
<button onclick="test7()">test 7</button>
|
||||
(For more testing, just start entering text, deleting text, copying/pasting text, etc...)
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button onclick="test_chrome()">test chrome</button>
|
||||
<button onclick="test_firefox()">test firefox</button>
|
||||
<button onclick="test_opera()">test opera</button>
|
||||
<button onclick="test_ie()">test ie</button>
|
||||
(typical content per browser, after some entering text and cutting/pasting within the editable div)
|
||||
</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>editable div</th>
|
||||
<th>traverse</th>
|
||||
<th>regex</th>
|
||||
<th>innerHTML</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><div id="editor" contenteditable="true"></div></td>
|
||||
<td><textarea id="traverseText"></textarea></td>
|
||||
<td><textarea id="regexText"></textarea></td>
|
||||
<td><pre id="innerHTML"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function prepareHtmlForEscaping (html) {
|
||||
//html = JSONEditor.insertMissingEscapes(html);
|
||||
html = html.replace(/<br[^>]*>\s*<div>/g, '<div>');
|
||||
|
||||
// DIV BR /DIV => \n
|
||||
html = html.replace(/<div>\s*(?:<br[^>]*>)?\s*<\/div>/g, '\\n');
|
||||
|
||||
// strip trailing BR
|
||||
html = html.replace(/<br[^>]*>(\s*)$/, '$1');
|
||||
|
||||
// BR /DIV => /DIV
|
||||
html = html.replace(/<br[^>]*>\s*<\/div>/g, '</div>');
|
||||
|
||||
// place \n before line breaking HTML so typed line breaks get preserved
|
||||
html = html.replace(/(<(?:br|div))\b/g, '\\n$1');
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function stripHTML (html) {
|
||||
// remove HTML tags
|
||||
// code from nickf, http://stackoverflow.com/a/822464/1262753
|
||||
return html.replace(/<(?:.|\n)*?>/gm, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* get the inner text of an HTML element using regex expressions
|
||||
* @param {Element} element
|
||||
* @return {String} innerText
|
||||
*/
|
||||
function getInnerTextUsingRegex (element) {
|
||||
var html = prepareHtmlForEscaping(element.innerHTML);
|
||||
var json = '"' + html + '"';
|
||||
return stripHTML(JSON.parse(json));
|
||||
}
|
||||
|
||||
/**
|
||||
* get the inner text of an HTML element (for example a div element)
|
||||
* @param {Element} element
|
||||
* @return {String} innerText
|
||||
*/
|
||||
function getInnerText_v1 (element, level) {
|
||||
if (level == undefined) {
|
||||
level = 0;
|
||||
}
|
||||
|
||||
// text node
|
||||
if (element.nodeValue) {
|
||||
return element.nodeValue;
|
||||
}
|
||||
|
||||
// divs or other HTML elements
|
||||
if (element.hasChildNodes()) {
|
||||
var childNodes = element.childNodes;
|
||||
var innerText = '';
|
||||
|
||||
for (var i = 0, iMax = childNodes.length; i < iMax; i++) {
|
||||
var child = childNodes[i];
|
||||
|
||||
if (child.nodeName == 'DIV' || child.nodeName == 'P') {
|
||||
// check to add a return between #text and <div>
|
||||
var prevChild = childNodes[i - 1];
|
||||
if (prevChild && prevChild.nodeName == '#text') {
|
||||
innerText += '\n';
|
||||
}
|
||||
|
||||
innerText += getInnerText(child, level + 1);
|
||||
|
||||
// add text after the end of div
|
||||
if ((i < iMax - 1) && (innerText[innerText.length-1] != '\n')) {
|
||||
innerText += '\n';
|
||||
}
|
||||
}
|
||||
else if (child.nodeName == 'BR') {
|
||||
// insert return except when on level 0 and at the last element
|
||||
if (level != 0 || i < iMax - 1) {
|
||||
innerText += '\n';
|
||||
}
|
||||
}
|
||||
else {
|
||||
innerText += getInnerText(child, level + 1);
|
||||
}
|
||||
}
|
||||
|
||||
return innerText;
|
||||
}
|
||||
|
||||
// br or unknown
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* get the inner text of an HTML element (for example a div element)
|
||||
* @param {Element} element
|
||||
* @return {Object} [buffer]
|
||||
*/
|
||||
function getInnerText_v2 (element, buffer) {
|
||||
if (buffer == undefined) {
|
||||
buffer = {
|
||||
'text': '',
|
||||
'flush': function () {
|
||||
var text = this.text;
|
||||
this.text = '';
|
||||
return text;
|
||||
},
|
||||
'set': function (text) {
|
||||
this.text = text;
|
||||
},
|
||||
'add': function (text) {
|
||||
this.text += text;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// text node
|
||||
if (element.nodeValue) {
|
||||
return buffer.flush() + element.nodeValue;
|
||||
}
|
||||
|
||||
// divs or other HTML elements
|
||||
if (element.hasChildNodes()) {
|
||||
var childNodes = element.childNodes;
|
||||
var innerText = '';
|
||||
|
||||
for (var i = 0, iMax = childNodes.length; i < iMax; i++) {
|
||||
var child = childNodes[i];
|
||||
|
||||
if (child.nodeName == 'DIV' || child.nodeName == 'P') {
|
||||
// check to add a return between non-block elements and
|
||||
// a block element
|
||||
var prevChild = childNodes[i - 1];
|
||||
var prevName = prevChild ? prevChild.nodeName : undefined;
|
||||
if (prevName && prevName != 'DIV' && prevName != 'P' && prevName != 'BR') {
|
||||
innerText += '\n';
|
||||
buffer.flush();
|
||||
}
|
||||
|
||||
innerText += 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 '';
|
||||
}
|
||||
|
||||
/**
|
||||
* get the inner text of an HTML element (for example a div element)
|
||||
* @param {Element} element
|
||||
* @param {Object} [buffer]
|
||||
* @return {String} innerText
|
||||
*/
|
||||
function getInnerText_v3 (element, buffer) {
|
||||
var first = (buffer == undefined);
|
||||
if (first) {
|
||||
buffer = {
|
||||
'text': '',
|
||||
'flush': function () {
|
||||
var text = this.text;
|
||||
this.text = '';
|
||||
return text;
|
||||
},
|
||||
'set': function (text) {
|
||||
this.text = text;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// text node
|
||||
if (element.nodeValue) {
|
||||
return buffer.flush() + element.nodeValue;
|
||||
}
|
||||
|
||||
// divs or other HTML elements
|
||||
if (element.hasChildNodes()) {
|
||||
var childNodes = element.childNodes;
|
||||
var innerText = '';
|
||||
|
||||
for (var i = 0, iMax = childNodes.length; i < iMax; i++) {
|
||||
var child = childNodes[i];
|
||||
|
||||
// console.log(child.nodeName + ' ' + (child.innerHTML || child.nodeValue)); // TODO: cleanup
|
||||
|
||||
if (child.nodeName == 'DIV' || child.nodeName == 'P') {
|
||||
var prevChild = childNodes[i - 1];
|
||||
var prevName = prevChild ? prevChild.nodeName : undefined;
|
||||
if (prevName && prevName != 'DIV' && prevName != 'P' && prevName != 'BR') {
|
||||
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;
|
||||
}
|
||||
else {
|
||||
if (element.nodeName == 'P' && getInternetExplorerVersion() != -1) {
|
||||
// On Internet Explorer, a P with hasChildNodes()==false is
|
||||
// rendered with a new line. Note that a P with
|
||||
// hasChildNodes()==true is rendered without a new line
|
||||
return buffer.flush();
|
||||
}
|
||||
}
|
||||
|
||||
// br or unknown
|
||||
return '';
|
||||
}
|
||||
|
||||
var getInternetExplorerVersion = function() {
|
||||
var rv = -1; // Return value assumes failure.
|
||||
if (navigator.appName == 'Microsoft Internet Explorer')
|
||||
{
|
||||
var ua = navigator.userAgent;
|
||||
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
|
||||
if (re.exec(ua) != null)
|
||||
rv = parseFloat( RegExp.$1 );
|
||||
}
|
||||
return rv;
|
||||
};
|
||||
|
||||
var getInnerText = getInnerText_v3;
|
||||
|
||||
var editor = document.getElementById('editor');
|
||||
var traverseText = document.getElementById('traverseText');
|
||||
var regexText = document.getElementById('regexText');
|
||||
var innerHTML = document.getElementById('innerHTML');
|
||||
|
||||
function displayInnerHTML () {
|
||||
//function style_html (t) {return t.replace(/</g, '\n<');}
|
||||
//*
|
||||
if (editor.innerText) {
|
||||
innerHTML.innerText = style_html(editor.innerHTML);
|
||||
}
|
||||
else {
|
||||
innerHTML.textContent = style_html(editor.innerHTML);
|
||||
}
|
||||
//*/
|
||||
|
||||
traverseText.value = getInnerText(editor);
|
||||
regexText.value = getInnerTextUsingRegex(editor);
|
||||
}
|
||||
|
||||
function test1 () {
|
||||
editor.innerHTML =
|
||||
'Typical Chrome...' +
|
||||
'<div>1</div>' +
|
||||
'<div>2</div>' +
|
||||
'<div><br class="Apple-interchange-newline"></div>' +
|
||||
'<div><br></div>' +
|
||||
'<div>3</div>' +
|
||||
|
||||
'Typical Firefox...' +
|
||||
'<br>1' +
|
||||
'<br>2' +
|
||||
'<br>' +
|
||||
'<br>3' +
|
||||
'<br>' +
|
||||
|
||||
'<p>Typical IE...</p>' +
|
||||
'<p>1</p>' +
|
||||
'<p>2</p>' +
|
||||
'<p> </p>' +
|
||||
'<p> </p>' +
|
||||
'<p>check the last return</p>';
|
||||
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
function test2 () {
|
||||
editor.innerHTML =
|
||||
'<div>' +
|
||||
'<div>Some weird nested divs</div>' +
|
||||
'<div>' +
|
||||
'<div>1</div>' +
|
||||
'</div>' +
|
||||
'<div><br></div>' +
|
||||
'<div><br></div>' +
|
||||
'</div>' +
|
||||
'2' +
|
||||
'</div>' +
|
||||
'<div><br><br></div>' +
|
||||
'<div>3</div>' +
|
||||
'</div>' +
|
||||
'<br>' +
|
||||
'4' +
|
||||
'<br>' +
|
||||
'5' +
|
||||
'<span>in span</span>' +
|
||||
'<div>aaa</div>' +
|
||||
'check the last return' +
|
||||
'<br>';
|
||||
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
function test3 () {
|
||||
editor.innerHTML = '<div>check the last return</div>';
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
function test4 () {
|
||||
editor.innerHTML = '<br>';
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
function test5 () {
|
||||
editor.innerHTML = '';
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
function test6 () {
|
||||
editor.innerHTML = 'just text';
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
function test7 () {
|
||||
editor.innerHTML = '<div>check the last return</div><div><br></div>';
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
function test_chrome () {
|
||||
editor.innerHTML = 'abc<div><br></div><div>af</div><div><br></div><div><br></div><div>d</div><div>asd</div>';
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
function test_firefox () {
|
||||
editor.innerHTML = 'abc<br>df<br><br>dsf<br>asdf<br><br>asdf<br>dsf<br>asdf<br><br><br>dsaf<br>';
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
function test_opera () {
|
||||
editor.innerHTML = '<p>abc</p><p><p>df</p><p><br></p><p>d</p></p><p><p>df</p><p><br></p><p><br></p><p>d</p></p><p>asdf</p>';
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
function test_ie () {
|
||||
editor.innerHTML = '<p>a</p><p> </p><p> </p><p>as</p><p></p><p></p><p>asdf</p><p></p><p> </p><p>c</p><p> </p><p>d</p><p> </p>';
|
||||
displayInnerHTML();
|
||||
}
|
||||
|
||||
editor.oninput = displayInnerHTML;
|
||||
editor.onkeyup = displayInnerHTML;
|
||||
editor.onblur = displayInnerHTML;
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue