diff --git a/src/editable-form/editable-form.css b/src/editable-form/editable-form.css index 5b1bea1..942357a 100644 --- a/src/editable-form/editable-form.css +++ b/src/editable-form/editable-form.css @@ -128,4 +128,8 @@ .editable-clear-x:hover { opacity: 1; +} + +.editable-pre-wrapped { + white-space: pre-wrap; } \ No newline at end of file diff --git a/src/element/editable-element.js b/src/element/editable-element.js index 1511595..72a3efa 100644 --- a/src/element/editable-element.js +++ b/src/element/editable-element.js @@ -61,6 +61,11 @@ Makes editable any HTML element on the page. Applied as jQuery method. //add 'editable' class to every editable element this.$element.addClass('editable'); + //specifically for "textarea" add class .editable-pre-wrapped to keep linebreaks + if(this.input.type === 'textarea') { + this.$element.addClass('editable-pre-wrapped'); + } + //attach handler activating editable. In disabled mode it just prevent default action (useful for links) if(this.options.toggle !== 'manual') { this.$element.addClass('editable-click'); diff --git a/src/inputs/textarea.js b/src/inputs/textarea.js index 358a9f1..0bddcba 100644 --- a/src/inputs/textarea.js +++ b/src/inputs/textarea.js @@ -38,8 +38,10 @@ $(function(){ } }); }, - - value2html: function(value, element) { + + //using `white-space: pre-wrap` solves \n <--> BR conversion very elegant! + /* + value2html: function(value, element) { var html = '', lines; if(value) { lines = value.split("\n"); @@ -50,7 +52,7 @@ $(function(){ } $(element).html(html); }, - + html2value: function(html) { if(!html) { return ''; @@ -69,7 +71,7 @@ $(function(){ } return lines.join("\n"); }, - + */ activate: function() { $.fn.editabletypes.text.prototype.activate.call(this); } diff --git a/test/unit/textarea.js b/test/unit/textarea.js index 7ca9bbc..6666b12 100644 --- a/test/unit/textarea.js +++ b/test/unit/textarea.js @@ -57,6 +57,8 @@ $(function () { }, timeout); }) + //with white-space: pre-wrap no need to convert \n to BR + /* asyncTest("should replace <br> with newline (on show) and back (on save)", function () { var v = '12<br>\n3<i>4<br />56', e = $('<a href="#" data-type="textarea" data-pk="1" data-url="post.php">'+v+'</a>').appendTo(fx).editable(), @@ -80,7 +82,32 @@ $(function () { e.remove(); start(); }, timeout); - }) + }) + */ + asyncTest("should keep newlines on show and on save", function () { + var v = '12\n56', + e = $('<a href="#" data-type="textarea" data-pk="1" data-url="post.php">'+v+'</a>').appendTo(fx).editable(), + vnew = "12\n3<b>4\n56\n\n78", + vnew2 = "12\n3<b>4\n56\n\n78"; + + equal(e.data('editable').value, v, '\\n preserved'); + + e.click(); + var p = tip(e); + equal(p.find('textarea').val(), e.data('editable').value, 'textarea contains correct value'); + + p.find('textarea').val(vnew) + p.find('form').submit(); + + setTimeout(function() { + ok(!p.is(':visible'), 'popover closed') + equal(e.data('editable').value, vnew, 'new text saved to value') + equal(e.html().toLowerCase(), vnew2.toLowerCase(), 'new text shown') + e.remove(); + start(); + }, timeout); + }); + asyncTest("submit by ctrl+enter", function () { expect(2);