summernote rails 不显示图标

Posted 2023-03-06

【中文标题】summernote rails 不显示图标

【英文标题】：Icons not showing with summernote rails

【发布时间】：2016-07-02 06:52:37

【问题描述】：

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

然后在我的 edit.html.erb 中，我将类 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>

除图标外，一切正常。

【参考方案1】：

您的项目中包含 font-awesome 吗？我相信这个插件使用了很棒的字体。如果没有，请尝试将其包含在您的 application.html.erb 文件中作为脚本标签的 src：https://www.bootstrapcdn.com/fontawesome/

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

【讨论】：

我看了这个链接好几个小时

【参考方案2】：

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

我在标题中添加了这个链接

  <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">

它完成了工作 如果有人可以进一步详细说明，我将不胜感激

【讨论】：

这个。为我节省了 12 个小时的撞头时间。而且我不知道这是如何或为什么起作用的。我讨厌前端开发的另一个原因。

不一定。如果您下载summernote字体文件并链接它们summernote.css，它将在本地工作。

【参考方案3】：

虽然答案已被接受，但我仍想为寻求解决问题的人发布更好的答案。

当然可以：

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

但我更喜欢在本地存储资产。它消除了影响其嵌入页面加载时间的 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

我希望这会有所帮助。

谢谢

【讨论】：

您的解决方案对我不起作用，显然是因为字体本身需要命名为summernote。但是，您引导我正确地了解如何正确安装分发下载 - 其中已经包含所需的字体。 （发布其他答案）

嗯，你不需要重命名任何东西，我有这个summernote在我的一些作品中工作，我从来不需要重命名任何东西。你只需要下载正确的 font-awesome dist 和 summernote.css 并按照我上面解释的方式放置它。我在我的一个项目中实施summernote时写了这个答案。如果它没有帮助你，我很抱歉，但它对我来说工作正常，无论如何我添加了 css 堆叠以获得更清晰。谢谢

您的解决方案对我有用。只需添加字体真棒 css 在 summnernote 的菜单中添加图标

【参考方案4】：

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

在本例中，Elmer 是网站的根文件夹，summernote.css 和 Font 文件夹都被复制到 /assets/css 文件夹中。 p>

同样，summernote.js 文件被复制到/assets/js 文件夹中。如果您不使用插件或语言，那么您只需要安装这些。

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

<!-- 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" 属性很重要。

【参考方案5】：

很简单

只需下载summernote compile zip file click here。

解压缩文件。复制 font 文件夹。将它粘贴到 summernote.css 根目录。确保您的 summernote.css 文件保留在 font 文件夹中。现在使用 Ctrl + F5 刷新您的浏览器。

文件夹位置演示：

演示输出：

【参考方案6】：

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

     just like YourProject/css/font

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

【参考方案7】：

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

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

【参考方案8】：

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

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

希望这会有所帮助！

【参考方案9】：

我发现了同样的问题。解决方案是我从 Summernote 配置中删除了“工具栏”键：

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

版本：summernote v.0.8.12。