logo标签列表

Summernote Rails中图标未显示

javascriptcssruby-on-railstwitter-bootstrap-3summernote
10

enter image description here

我将翻译以下内容，这是有关编程的：

我按照Summernote-rails官方文档，在我的Rails项目中添加了富文本编辑器。

然后在我的edit.html.erb中，我为text_area添加了class place_editor：

<%= 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>

除了图标外，一切正常。

9个回答
11

简单易懂

只需下载summernote编译zip文件，点击此处。

解压文件。复制font文件夹并将其粘贴到summernote.css根目录下。请确保您的summernote.css文件与font文件夹在同一目录下。现在使用Ctrl + F5刷新您的浏览器。

文件夹位置演示：进入图像描述

演示输出：进入图像描述

9

我花了几个小时搜索，最终解决了它。 实际上，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个小时的头痛。但我不知道为什么它能起作用。这是我讨厌前端开发的又一个原因。 - Sajib Acharya
不一定。如果您下载了summernote字体文件并将它们链接到summernote.css，它将在本地工作。 - Waleed Abdalmajeed
6

导入字体文件，它就能正常工作了。 我尝试使用CSS的@font-face规则进行导入。你也可以在JavaScript中导入。

@font-face {
font-family: summernote;
src : url('/fonts/summernote.ttf');
src : url('/fonts/summernote.eot'),
      url('/fonts/summernote.woff');
}
这应该是答案，因为他们只需要在本地复制字体并使用它。同样，如果他们正在使用模块，则可以直接从node_modules中获取。 font-family: 'summernote'; src : url('~summernote/dist/font/summernote.ttf'); src : url('~summernote/dist/font/summernote.ttf'), url('~summernote/dist/font/summernote.ttf'); }``` - Tim
4
尽管已有一个答案被采纳，但我仍想为寻求解决问题的人们发布更好的答案。 当然，以下方法可以解决问题：
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css">

但我更喜欢本地存储资产。这样可以省去CDN，从而影响嵌入页面的加载时间。

默认情况下，“summernote”在目录/css/font/中查找font-awesome图标（以及其他一些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/

所需要做的是：
  1. 下载 fontawesome,
  2. 打开所下载压缩包并提取出fonts文件夹，将其重命名为font
  3. 将font目录放置在项目的css目录中。
这样就可以正常使用了。
假设您的资源位于以下位置：http://localhost:1337/css/font/summernote.ttf //其中 summernote.ttf 仅为示例 希望这能帮到您。
谢谢！
你的解决方案对我没有起作用，显然是因为字体本身需要命名为summernote。不过，你让我朝着正确的方向去了解如何正确安装分发下载 - 这已经包括所需的字体。（其他答案已发布） - ElmerCat
你不需要重命名任何东西，我在我的几个项目中都使用了这个summernote，并且从未重命名过任何东西。你只需要下载正确的font-awesome dist和summernote.css并按照我上面所述的方式放置即可。我在实现summernote时编写了这个答案。如果这没有帮助到你，我很抱歉，但它对我来说运行良好，无论如何，我添加了CSS堆叠以获得更清晰的效果。谢谢。 - Siddhartha Chowdhury
你的解决方案对我很有效。只需添加Font Awesome CSS，就可以在Summernote菜单中添加图标。 - vaibhav shah
4
解压Summernote发行版下载后，您必须将Font文件夹复制到放置summernote.css文件的相同位置。
在此示例中，Elmer是网站的根目录，并且summernote.css和Font文件夹都被复制到/assets/css文件夹中。

enter image description here

同样地，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" 属性是很重要的。
1
将字体文件夹复制到您的项目CSS中。
     just like YourProject/css/font

那应该可以运行。

它可以与我的项目一起工作。

0
我看了几个小时这个链接。 - Muhammad Faisal Iqbal
0

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

MVC project layout for summernote icons.

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

希望这能帮到你！

0
我遇到了同样的问题。解决办法是从summernote配置中删除'toolbar'键：
$(".summernote").summernote({
    lang: 'hu-HU',
    height: 300,
    minHeight: null,
    maxHeight: null,
    toolbar: [
        ['font', ['roboto',]],
    ]
});

版本：summernote v.0.8.12。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接