当输入类型为选择2时，在x内显示图像可编辑 - Displaying image within x editable when input type is select2

Displaying image within x editable when input type is select2

我在以 select2 的格式生成的 x 可编辑 html img 中显示时遇到问题。

Select2 下拉列表正确显示图像，但 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-editable，它将从select2 formatSelection获得的任何文本(纯文本或格式化(分配给可编辑组件作为文本通过$(element(.text(text(。

如果通过 $(元素(分配格式化文本.html将显示图像而不是文本。

使 x-editable 将正确的 html 格式内容分配给元素文本的最佳方法是什么？

一个带有真棒图标字体的示例(可以很容易地格式化为<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);
        }
    });