X-Editable 和 Bootstrap 4

Posted 2023-02-22

【中文标题】X-Editable 和 Bootstrap 4

【英文标题】：X-Editable and Bootstrap 4

【发布时间】：2018-04-06 04:26:53

【问题描述】：

之前我已经使用 X-Editable 和 Bootstrap 3 实现了内联编辑。使用 Bootstrap 4 它似乎不再起作用。 Check out the JsFiddle here.

如果我像这样定义一个简单的弹出窗口：

<div style="margin: 150px">
     <a href="#" class="comment" data-name="comment" data-type="text" data-pk="@item.Id" data-url="/" data-title="Enter comment">comment</a>
</div>

<script>
$(document).ready(function() 
        $('.comment').editable();
    );
</script>

它在 BS3 中工作正常，但一旦我切换到 BS4，它就不再工作，给出错误：

Uncaught TypeError: Cannot read property 'addClass' of undefined
at Popup.show (bootstrap-editable.js:1091)
at Editable.show (bootstrap-editable.js:1802)
at Editable.toggle (bootstrap-editable.js:1824)
at Editable.<anonymous> (bootstrap-editable.js:1547)
at htmlAnchorElement.e (jquery-3.2.1.slim.min.js:2)

在控制台中。

我做错了什么？我应该使用不同的库/fork 吗？

【参考方案1】：

有一个支持 Bootstrap 4 的新版本：

https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable

【讨论】：

这是某个用户的分叉

这应该是公认的答案，因为它解决了默认样式的问题。

需要 font-awesome css 来查看提交和取消按钮。 CDN 链接：bootstrapcdn.com/fontawesome

【参考方案2】：

只是为了帮助其他遇到此问题的人，这就是我的处理方法。我切换到内联模式：

 $(document).ready(function() 
        $('.comment').editable(
            mode: 'inline',
        );
        $('.hours').editable(
            mode: 'inline',
            type: 'number',
            step: '1.00',
            min: '0.00',
            max: '24'
        );
    );

这工作正常，但由于不再支持字形图标，按钮不会呈现任何图像。

我添加了font-awesome，然后使用以下 css 将图标取回：

        .glyphicon-ok:before 
        content: "\f00c";
    
    .glyphicon-remove:before 
        content: "\f00d";
    
    .glyphicon 
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    

一切似乎都像以前一样工作。感谢萨杜为我指明了正确的方向。

【参考方案3】：

这似乎是 bootstrap 4 中的错误。 Bootstrap 4 目前处于测试阶段。

查看以下链接： https://github.com/vitalets/x-editable/issues/950

【讨论】：

谢谢 - 阅读让我产生了使用内联的想法。又过了几个星期，它被排序了:)

另一张票被提出：github.com/vitalets/x-editable/issues/1043

【参考方案4】：

在https://jsfiddle.net/frallain/h5qmord2/ 使用 FontAwesome 4 引导 4 个示例 并在https://jsfiddle.net/frallain/atwb19dz/使用 FontAwesome 5

顺便说一句，CSS before 关键字需要双 :

            .glyphicon-ok::before 
                content: "\f00c";
            
            .glyphicon-remove::before 
                content: "\f00d";
            
            .glyphicon 
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-style: normal;
            

【参考方案5】：

这是另一个让 x-editable 与 Bootstrap 4 兼容的示例

https://bbbootstrap.com/snippets/edit-forms-inline-using-x-editable-editor-11973728

从 css 中，您可以获取第 69 行以下的所有内容 .form-group label ...

对于 javascript 部分，您可以在文档加载中复制以下内容

$.fn.editable.defaults.mode = 'inline';
$.fn.editableform.buttons =
'<button type="submit" class="btn btn-primary btn-sm editable-submit">' +
    '<i class="fa fa-fw fa-check"></i>' +
    '</button>' +
'<button type="button" class="btn btn-warning btn-sm editable-cancel">' +
    '<i class="fa fa-fw fa-times"></i>' +
    '</button>';

除了基本的 x 可编辑依赖项之外，您还需要 FontAwesome。