Disabled saving files using HTML5 on Firefox to prevent a Firefox bug

This commit is contained in:
josdejong 2013-11-15 16:03:52 +01:00
parent 1c1ffe4b8f
commit 8ddc6f3946
9 changed files with 34 additions and 522 deletions

View File

@ -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

View File

@ -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);

View File

@ -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",

4
jsoneditor-min.js vendored

File diff suppressed because one or more lines are too long

View File

@ -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
}

View File

@ -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
}

View File

@ -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": [

View File

@ -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>

View File

@ -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>&nbsp;</p>' +
'<p>&nbsp;</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>&nbsp;</p><p>&nbsp;</p><p>as</p><p></p><p></p><p>asdf</p><p></p><p>&nbsp;</p><p>c</p><p>&nbsp;</p><p>d</p><p>&nbsp;</p>';
displayInnerHTML();
}
editor.oninput = displayInnerHTML;
editor.onkeyup = displayInnerHTML;
editor.onblur = displayInnerHTML;
</script>
</body>
</html>