add option escape, fixes #377

CHANGELOG.txt

@@ -3,6 +3,7 @@ X-editable changelog
 
 Version 1.5.0 wip
 ----------------------------
+[enh #377] add bool option `escape` to allow html as content (vitalets)
 [bug #344] fix determing empty for html content (vitalets)
 [enh] update select2 to 3.4.3 (vitalets)
 [enh #343] Bootstrap 3 support (vitalets)

src/inputs/abstract.js

@@ -52,7 +52,7 @@ To create your own input you can inherit from this class.
         @param {DOMElement} element
        **/
        value2html: function(value, element) {
-           $(element).text($.trim(value));
+           $(element)[this.options.escape ? 'text' : 'html']($.trim(value));
        },
 
        /**
@@ -194,6 +194,19 @@ To create your own input you can inherit from this class.
         @default null
         **/         
         inputclass: null,
+        
+        /**
+        If `true` - html will be escaped in content of element via $.text() method.
+        If `false` - html will not be escaped, $.html() used.
+        When you use own `display` function, this option has no influence.
+        
+        @property escape 
+        @type boolean
+        @since 1.5.0
+        @default true
+        **/         
+        escape: true,
+                
         //scope for external methods (e.g. source defined as function)
         //for internal use only
         scope: null,

src/inputs/checklist.js

@@ -100,10 +100,14 @@ $(function(){
        //collect text of checked boxes
         value2htmlFinal: function(value, element) {
            var html = [],
-               checked = $.fn.editableutils.itemsByValue(value, this.sourceData);
+               checked = $.fn.editableutils.itemsByValue(value, this.sourceData),
+               escape = this.options.escape;
                
            if(checked.length) {
-               $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
+               $.each(checked, function(i, v) {
+                   var text = escape ? $.fn.editableutils.escape(v.text) : v.text; 
+                   html.push(text); 
+               });
                $(element).html(html.join('<br>'));
            } else {
                $(element).empty(); 

src/inputs/combodate/combodate.js

@@ -88,7 +88,8 @@ $(function(){
         
         value2html: function(value, element) {
             var text = value ? value.format(this.options.viewformat) : '';
-            $(element).text(text); 
+            //$(element).text(text);
+            Constructor.superclass.value2html.call(this, text, element);  
         },
 
         html2value: function(html) {

src/inputs/date/date.js

@@ -85,7 +85,7 @@ $(function(){
         
         value2html: function(value, element) {
            var text = value ? this.dpg.formatDate(value, this.parsedViewFormat, this.options.datepicker.language) : '';
-            Date.superclass.value2html(text, element); 
+           Date.superclass.value2html.call(this, text, element); 
         },
 
         html2value: function(html) {

src/inputs/datetime/datetime.js

@@ -96,7 +96,7 @@ $(function(){
             //formatDate works with UTCDate!
             var text = value ? this.dpg.formatDate(this.toUTC(value), this.parsedViewFormat, this.options.datetimepicker.language, this.options.formatType) : '';
             if(element) {
-                DateTime.superclass.value2html(text, element);
+                DateTime.superclass.value2html.call(this, text, element);
             } else {
                 return text;
             }

src/inputs/dateui/dateui.js

@@ -67,7 +67,7 @@ $(function(){
 
         value2html: function(value, element) {
             var text = $.datepicker.formatDate(this.options.viewformat, value);
-            DateUI.superclass.value2html(text, element); 
+            DateUI.superclass.value2html.call(this, text, element); 
         },
 
         html2value: function(html) {

src/inputs/select.js

@@ -72,7 +72,8 @@ $(function(){
                 text = items[0].text;
             }
             
-            $(element).text(text);
+            //$(element).text(text);
+            $.fn.editabletypes.abstractinput.prototype.value2html.call(this, text, element);
         },
         
         autosubmit: function() {

src/inputs/select2/select2.js

@@ -174,7 +174,8 @@ $(function(){
            } else if(this.sourceData) {
               data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc); 
            } else {
-              //can not get list of possible values (e.g. autotext for select2 with ajax source) 
+              //can not get list of possible values 
+              //(e.g. autotext for select2 with ajax source) 
            }
            
            //data may be array (when multiple values allowed)          
@@ -190,7 +191,8 @@ $(function(){
 
            text = $.isArray(text) ? text.join(this.options.viewseparator) : text;
 
-           $(element).text(text);
+           //$(element).text(text);
+           Constructor.superclass.value2html.call(this, text, element); 
        },       
         
        html2value: function(html) {

src/inputs/typeahead.js

@@ -71,10 +71,9 @@ $(function(){
         value2htmlFinal: function(value, element) {
             if(this.getIsObjects()) {
                 var items = $.fn.editableutils.itemsByValue(value, this.sourceData);
-                $(element).text(items.length ? items[0].text : '');
-            } else {
-                $(element).text(value);
-            }
+                value = items.length ? items[0].text : '';
+            } 
+            $.fn.editabletypes.abstractinput.prototype.value2html.call(this, value, element);
         },
         
         html2value: function (html) {

test/unit/text.js

@@ -437,12 +437,10 @@ $(function () {
     });
     
     test("'display' returning html only (img)", function () {
-        var c = 0,
-            html = '<img src="../src/img/clear.png">',
-            html_br = '<br>',
+        var html = '<img src="../src/img/clear.png">',
             e = $('<a href="#" data-pk="1" data-type="text" data-name="text1">0</a>').appendTo('#qunit-fixture').editable({
               display: function(value, response) {
-          	      $(this).html(c == 0 ? html : html_br);
+          	      $(this).html(html);
               } 
             });  
 
@@ -454,7 +452,7 @@ $(function () {
         p.find('input').val(1);         	
         p.find('form').submit();
         
-		equal(e.html(), $.fn.editable.defaults.emptytext, 'html br --> emptytext ok');
+		equal(e.html(), html, 'html again ok');
     });         
 
    test("password", function () {