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>

除了ICONS，一切正常。

Answer 1

很简单

只需下载summernote compile zip file click here。

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

文件夹位置演示：

演示输出：

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

它完成了这项工作如果有人可以进一步详细说明，我会欢迎

Answer 3

虽然已经接受了答案，但我还是希望为寻求解决问题的人找到更好的答案。

当然这会奏效：

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

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

默认情况下＆＃34; summernote＆＃34;在目录/css/font/：

中查找字体真棒图标（以及其他一些夏令营字体）

//=================== 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发行版下载后，您必须将字体文件夹复制到放置.getMinutes()文件的同一位置。

在此示例中， Elmer 是网站的根文件夹，summernote.css和字体文件夹都会复制到summernote.css文件夹中。

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

这是放在标题中以加载这些文件的代码，如下所示：

/assets/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>属性非常重要。

Answer 5

导入字体文件，它将起作用。我尝试通过CSS @ font-face规则导入。您也可以导入javascript。

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

Answer 6

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

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

Answer 7

将字体文件夹复制到项目CSS中。

     just like YourProject/css/font

应该起作用。它与我的项目一起工作。

Answer 8

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

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

希望这会有所帮助！

Answer 9

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

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

版本：summernote v.0.8.12。

没有显示与summernote路轨的象

9 个答案: