summernote 不显示图标 rails

Question

我跟着Summernote-rails官方在我的Rails项目中添加了富文本编辑器。

然后在我的 edit.html.erb 中添加 class place_editor 到我的 text_area:

<%= f.text_area :text, class: "place_editor form-control col-md-7 col-xs-12", rows: "15j ,placeholder: "Text", required: "required"%>

然后 JavaScript 为：

<script type="text/javascript">
 $(function() {
      $('.place_editor').summernote();
      var edit = function () {
        $('.click2edit').summernote({ focus: true });
      };
      $("#edit").click(function () {
        $('.click2edit').summernote({ focus: true });
      });
      $("#save").click(function () {
        var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
        $('.click2edit').destroy();
      });
      // Adding Css to give border to text editor
      $(".note-editor").css("border", "solid 1px #e7eaec");

    });
</script>

除图标外一切正常。

Answer 1

您的项目中是否包含超赞字体？我相信该插件使用超棒的字体。如果没有，请尝试将其包含在您的 application.html.erb 文件中作为脚本标记的 src：https://www.bootstrapcdn.com/fontawesome/

另请阅读：https://github.com/summernote/summernote/issues/505

Answer 2

我搜索了几个小时，终于解决了。实际上，summernote 并没有保存图标到本地，而是下载图标

我在 header

中添加了这个链接

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">

它完成了工作如果有人可以进一步详细说明，我将非常欢迎

Answer 3

虽然答案已经被接受，但我仍然想 post 为寻求问题解决方案的人们提供更好的答案。

当然可以：

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css">

但我更喜欢在本地存储资产。它消除了 CDN 的需要，CDN 会影响其嵌入的页面的加载时间。

默认情况下 "summernote" 在目录 /css/font/ 中查找超棒的字体图标（以及其他一些 summernote 字体）：

//=================== The style-sheets stacking 
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/summernote.css">

//=================== The font goes here 
 /css/font/

所以你需要做的是：

下载fontawesome,
从下载的压缩包中取出fonts文件夹，重命名为font
将目录font放在项目的css目录中。

这应该有效。

考虑到您的资产是这样可用的http://localhost:1337/css/font/summernote.ttf //summernote.ttf is just an example

希望对您有所帮助。

谢谢

Answer 4

解压 Summernote 分发下载后，您必须将 Font 文件夹复制到放置 summernote.css 文件的相同位置。

在这个例子中，Elmer是网站的根文件夹，summernote.css和Font文件夹都是复制到 /assets/css 文件夹。

同样，summernote.js文件被复制到/assets/js文件夹。如果您不使用插件或语言，这就是您需要安装的全部内容。

下面是放入 header 的代码以加载这些文件，如图所示：

<!-- include summernote css/js-->
<link rel="stylesheet" type="text/css"  charset="utf-8" href="/assets/css/summernote.css">
<script type="text/javascript" charset="utf-8" src="/assets/js/summernote.js"></script>

注意：包括 charset="utf-8" 属性很重要。

Answer 5

很简单

只需下载 summernote compile zip file click here。

解压缩文件。复制 font 文件夹。贴给你summernote.css root。请确保您的 summernote.css 文件位于 font 文件夹中。现在使用 Ctrl + F5.

刷新浏览器

文件夹位置演示：

演示输出：

Answer 6

复制项目中的字体文件夹css。

     just like YourProject/css/font

应该可以。它适用于我的项目。

Answer 7

导入字体文件，就可以了。我尝试通过 CSS @font-face 规则导入。您也可以在 javascript 中导入。

@font-face {
font-family: summernote;
src : url('/fonts/summernote.ttf');
src : url('/fonts/summernote.eot'),
      url('/fonts/summernote.woff');
}

Answer 8

对于可能在 MVC 中遇到图标问题的任何人，似乎 summernote 查看基本文件夹（在我的例子中是 Content）并且字体文件夹需要放在里面。这是我的项目布局的屏幕截图：

无论出于何种原因，summernote 在内容中的 /summernote/font/ 文件夹中查找，而不是 summernote-lite.css 所在的位置。

希望对您有所帮助！

Answer 9

我发现了同样的问题。解决方案是我从 summernote 配置中删除了 'toolbar' 键：

$(".summernote").summernote({
    lang: 'hu-HU',
    height: 300,
    minHeight: null,
    maxHeight: null,
    toolbar: [
        ['font', ['roboto',]],
    ]
});

版本：summernote v.0.8.12.

summernote 不显示图标 rails

Icons not showing with summernote rails

javascript

css

ruby-on-rails

twitter-bootstrap-3

summernote