如何使用select2和x-editable格式化标签

Question

我正在编写一个基于Django和Bootstrap的应用程序,它以缩略图的形式显示媒体文件,以及描述和标签.我希望这些标签可以设置为常规的Bootstrap标签,并且可以点击.

我正在使用X-editable单独编辑内联的描述和标签(通过Select2)并将它们发送回服务器.除了标签之外,这很有效.我无法达到:

1. 使用带标记的标记填充容器
2. 获取干净标签(无标记)以获取x-editable小部件
3. 在x-editable小部件上执行更改后,返回clean标记并将它们发送到服务器
4. 从窗口小部件向返回的标记添加标记,并使用带标记的标记重新填充容器.

第3步(向服务器发送干净的数据)是我可能想到的或可能是另一个问题的主题.

这个小提琴应该说明我正在尝试做的事情和结果:请注意,当单击编辑按钮时,窗口小部件会加载带有不需要的标记的数据.

HTML:X-editable标签设置和标签样式

<div class="controls controls-row">                        
    <span class="tags" id="tags-editable-1" data-toggle="manual" data-type="select2" data-pk="1" data-original-title="Enter tags">
        <a href="#"><span class="label">apples</span></a>
        <a href="#"><span class="label">oranges</span></a>
        <a href="#"><span class="label">pie</span></a>
    </span>
    <a href="#" id="tags-edit-1" data-editable="tags-editable-1" class=""><i class="icon-pencil"></i></a>
</div>

Javascript:设置X-editable和Select2

$('.tags').editable({
    placement: 'right',
    select2: {
        tags: ['cake', 'cookies'],
        tokenSeparators: [",", " "]
    },
});

$('[id^="tags-edit-"]').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#' + $(this).data('editable') ).editable('toggle');
});

所以实际的问题是步骤2和4:我如何剥离发送到x-editable小部件的标记并将其重新添加到它返回的结果中？

Answer 1

我经过一些实验后发现,虽然解决方案不是100%完美.

• 要预加载数据,我可以data-value在HTML中使用该属性,如data-value="apples, oranges, pie"
• 要以我想要的格式显示数据,我在X-editable中指定显示选项的功能.这是相关的一点.

.

display: function(value) {
    $.each(value,function(i){
       // value[i] needs to have its HTML stripped, as every time it's read, it contains
       // the HTML markup. If we don't strip it first, markup will recursively be added
       // every time we open the edit widget and submit new values.
       value[i] = "<span class='label'>" + $('<p>' + value[i] + '</p>').text() + "</span>";
    });
    $(this).html(value.join(" "));

• 要在编辑小部件中加载干净的数据,我正在使用shown回调.

.

$('.tags').on('shown', function() {
    var editable = $(this).data('editable');
    value = editable.value
    $.each(value,function(i){
       value[i] = $('<p>' + value[i] + '</p>').text()
    });
});

这个小提琴显示了代码和一个工作示例.