Javascript 如何使用select2和x-editable设置标签格式

我正在编写一个基于和的应用程序，该应用程序将媒体文件显示为缩略图以及描述和标记。我希望这些标签被设计成常规的引导标签，并且可以点击

我使用内联编辑描述和标记，并将它们发送回服务器。除了标签之外，它工作得很好。我无法做到：

使用带有标记的标记填充容器

获取要从x-editable小部件获取的干净标记（无标记）

在x-editable小部件上进行更改后，返回干净的标记并将其发送到服务器

将标记添加到小部件返回的标记中，并使用带有标记的标记重新填充容器

第3步（向服务器发送干净的数据）可能是我能够理解的，或者可能是另一个问题的主题

这应该说明我正在尝试做什么以及结果：请注意，当单击编辑按钮时，小部件将加载带有不需要的标记的数据。

HTML:X-可编辑标记设置和标记样式

---

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

我在一些实验后发现，尽管解决方案并非100%完美

• 要预加载数据，我可以使用HTML中的

  数据值

  属性，如

  data value=“apples，oranges，pie”

• 为了以我想要的格式显示数据，我在X-editable中为选项指定了一个函数。这是相关的一点

---

这显示了代码和一个工作示例。

非常棒的示例。如果有人能像您的示例一样让它正常工作，社区将非常高兴，但对于较新的版本，请选择2 v4和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>

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

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

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(" "));

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