x-editable 和 bootstrap-wysihtml5 工具栏配置为 data-wysihtml5答案

【问题标题】：x-editable and bootstrap-wysihtml5 toolbar configuration as data-wysihtml5x-editable 和 bootstrap-wysihtml5 工具栏配置为 data-wysihtml5
【发布时间】：2015-03-19 14:27:33
【问题描述】：

我正在尝试将 x-editable 与 wysihtml5 数据类型设置一起使用来获取 span 的内联编辑器

<span id="username" class="editable" data-type="wysihtml5" data-pk="2"
 data-content="Content" data-wysihtml5="{'link':false}" data-url="/home/SaveEdits" 
data-title="Enter username">My editable content goes here.</span>

我的 JQuery 是：

 $.fn.editable.defaults.mode = 'inline';
$('.editable').editable();

我想做的是从工具栏中删除一些按钮。文档说这可以通过编辑跨度中的 data-wysihtml5 值来完成。但这似乎不起作用。我错过了什么？

【问题讨论】：

标签： jquery twitter-bootstrap x-editable bootstrap-wysihtml5

【解决方案1】：

我不确定配置是否通过数据属性起作用，并且在我看来你会以丑陋的标记结束。您最好尝试使用 JS/Jquery 自定义工具栏，如下所示：

    $('.editable').editable({
        url: '/post',
        title: 'Enter comments',
        showbuttons: 'bottom',
        onblur: 'ignore',
        wysihtml5: {
          "image": false,
          "font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
          "emphasis": true, //Italics, bold, etc. Default true
          "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
          "html": false, //Button which allows you to edit the generated HTML. Default false
          "link": true, //Button to insert a link. Default true
       },
    });

祝你好运！

【讨论】：