自定义 WYSIHTML5 工具栏答案

【问题标题】：Customize WYSIHTML5 Toolbar自定义 WYSIHTML5 工具栏
【发布时间】：2013-08-20 18:14:03
【问题描述】：

如何自定义WYSIHTML5 中的工具栏。我想禁用字体大小和图像插入按钮，尤其是 Bootstrap X-editable 中使用的 WYSIHTML5 版本。

【问题讨论】：

标签： twitter-bootstrap wysihtml5 x-editable

【解决方案1】：

如果你碰巧使用了bootstrap-wysiwyg/bootstrap3-wysiwyg（例如 gem bootstrap-wysihtml5-rails 使用的），从 3.0 版开始，你需要将它嵌套在工具栏内：

$('#some-textarea').wysihtml5({
  toolbar: {
    "font-styles": true, // Font styling, e.g. h1, h2, etc.
    "emphasis": true, // Italics, bold, etc.
    "lists": true, // (Un)ordered lists, e.g. Bullets, Numbers.
    "html": false, // Button which allows you to edit the generated HTML.
    "link": true, // Button to insert a link.
    "image": true, // Button to insert an image.
    "color": false, // Button to change color of font
    "blockquote": true, // Blockquote
    "size": <buttonsize> // options are xs, sm, lg
  }
});

【讨论】：

【解决方案2】：

您可以使用启动参数禁用工具栏选项：

$('#[YOUR INPUT ID]').wysihtml5({
     "font-styles": false, //Font styling, e.g. h1, h2, etc.
     "emphasis": true, //Italics, bold, etc.
     "lists": true, //(Un)ordered lists, e.g. Bullets, Numbers.
     "html": true, //Button which allows you to edit the generated HTML.
     "link": true, //Button to insert a link.
     "image": false, //Button to insert an image.
     "color": true //Button to change color of font
});

此信息应粘贴在标签中：

<head>
   <script> HERE </scrip>
</head>

【讨论】：

【解决方案3】：

你可以通过 CSS 做到这一点

ul.wysihtml5-toolbar li a[title="Insert image"] { display: none; }
ul.wysihtml5-toolbar li.dropdown { display: none; }

【讨论】：