顯示圖像時輸入類型是SELECT2

Question

我問題沿x編輯的HTML IMG顯示在SELECT2的formatSelection生成。

選擇二下拉顯示正確的圖像，但X編輯沒有。

我有：

<a href="#" class="editable-select" data-pk="10" data-url="/my_url/1" data-name="my_data_id" data-value="1" data-type="select2"/></a> 

<script> 
    function format(state) { 
     var result = ""; 
     if(state.id){ 
      result = '<img src="/path_to_img/et'+state.id+'.png"/>'; 
     } 
     return result; 
    } 

    $('.editable-select').editable({ 
     source: [ 
      {id: '1', text: 'option_1'}, 
      {id: '2', text: 'option_2'}, 
      {id: '3', text: 'option_3'}, 
     ], 
     select2: { 
      formatResult: format, 
      formatSelection: format, 
      escapeMarkup: function (m) {return m; } 
     } 
    }); 
</script> 

結果我有可編輯的，其顯示

<img src="/path_to_img/et1.png"/> 

作爲純文本而不是顯示圖像et1.png。

其原因是x可編輯，它通過$（element）.text（text）將文本（純文本或格式化）從select2 formatSelection指定爲可編輯組件。

如果格式化的文本是通過$（元素）的.html（文本）圖像分配會被顯示，而不是文字。

什麼是解決這個問題的最好方法，使X-編輯分配正確的HTML格式的內容元素的文字？

Answer 1

與真棒圖標字體的例子（可以很容易地格式化，以<img>標籤，而不是<i>）

var icons = []; 

    $.each({ 
     "compass" : "icon-compass", 
     "eur" : "icon-eur", 
     "dollar" : "icon-dollar", 
     "yen" : "icon-yen", 
     "won" : "icon-won", 
     "file-text" : "icon-file-text", 
     "sort-by-attributes-alt" : "icon-sort-by-attributes-alt", 
    }, function (k, v) { 
     icons.push({ 
      id: k, 
      style: v 
     }); 
    }); 


    function format(icon) { 
     if (!icon.id) return icon.style; 
     return "<i class='icon-" + icon.id + "'></i> " + icon.style; 
    } 

    $('#awsome_icons_select').editable({ 
     inputclass: 'form-control input-medium select2', 
     select2: { 
      allowClear: true, 
      formatResult: format, 
      formatSelection: format, 
      escapeMarkup: function (m) { 
       return m; 
      } 
     }, 
     source: icons, 
     display: function (value) { 
      if (!value) { 
       $(this).empty(); 
       return; 
      } 
      var html = "<i class='icon-" + value + "'></i> "; 
      $(this).html(html); 
     } 
    }); 

這應該對圖像做的伎倆：

var countries= []; 
    $.each({ 
     "US" : "USA", 
     "RU" : "Russia", 
     "DK" : "Denmark", 
     "FR" : "France", 
     "PL" : "Poland", 
     "DE" : "Germany", 
     "GB" : "Great Britain", 
    }, function (k, v) { 
     countries.push({ 
      id: k, 
      state: v 
     }); 
    }); 


    function format(country) { 
     if (!country.id) return country.state; 
     return "<img src='path_to_images/" + country.id + ".png' /> " + country.state; 
    } 

    $('#countries_select').editable({ 
     inputclass: 'form-control input-medium select2', 
     select2: { 
      allowClear: true, 
      formatResult: format, 
      formatSelection: format, 
      escapeMarkup: function (m) { 
       return m; 
      } 
     }, 
     source: countries, 
     display: function (value) { 
      if (!value) { 
       $(this).empty(); 
       return; 
      } 
      var html = "<img src='path_to_images/" + value + ".png' /> "; 
      $(this).html(html); 
     } 
    });