Icons not showing with summernote rails

Question

I followed Summernote-rails official to add rich text editor in my Rails project.

Then in my edit.html.erb I added class place_editor to my text_area:

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

and then JavaScript as:

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

Everything works fine except ICONS.

Penney

Answer 1

I searched for hours and finally solved it. Actually, summernote doesn't save icons locally, instead it download it

I added this links in 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">

And it did the job I 'll welcome if someone can elaborate it further

Penney

This. Saved me 12 hours of head banging. And I have no idea how or why this works. Another reason added to why I hate front-end development. – Appoint

not necessarily. If you download summernote font files and linked them summernote.css, it will work locally. – Perverted

Answer 2

It's Simple

Just Download summernote compile zip file click here.

Unzip the file. Copy font folder. Paste it you summernote.css root. Be sure your summernote.css file stay with font folder. Now Refresh your Browser using Ctrl + F5.

Folder Location demo:

Demo Output:

Moldboard

Answer 3

Import the font files, it will work. I tried import through CSS @font-face rule. You can import in javascript also.

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

Mastoid

This should be the answer, in that they just have to copy the fonts locally and use this. The same can also be done sourcing directly from node_modules, assuming they are using modules, @font-face { font-family: 'summernote'; src : url('~summernote/dist/font/summernote.ttf'); src : url('~summernote/dist/font/summernote.ttf'), url('~summernote/dist/font/summernote.ttf'); } – Homemaking

Answer 4

Though an answer is already accepted, still I would like to post a better answer for people seeking a solution to the problem in question.

Of course this will work:

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

But I prefer to STORE ASSETS LOCALLY. It eliminates the need of CDN which affects the loading time of the page its embedded in.

By default "summernote" looks for font-awesome icons (and some other summernote fonts) in the directory /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/

So what u need to do is:

1. Download fontawesome,
2. Take out the fonts folder from the downloaded archive and rename it to font
3. Place the directory font inside the css directory of the project.

And this should work.

Considering your assets are available like this http://localhost:1337/css/font/summernote.ttf //summernote.ttf is just an example

I hope this will help.

Thanks

Jessi

Your solution didn't work for me, apparently because the font itself needs to be named summernote. However, you led me in the right direction in figuring out how to install the distribution download correctly — which already includes the required font. (other answer posted) – Outrage

Well you dont need to rename anything, I have this summernote working in few of my works and I never had to rename anything. You just have to download the correct font-awesome dist and summernote.css and place it the way I explained above. I wrote this answer while implementing summernote in one of my project. I am sorry if it didnt helped you, but its working fine for me, anyways I added the css stacking for more clarity . Thanks – Jessi

Your solution worked for me. Jusst adding font awesome css adds icons in menu of summnernote – Sentinel

Answer 5

After unzipping the Summernote distribution download, you must copy the Font folder to the same place you put the summernote.css file.

In this example, Elmer is the root folder of the website, and both summernote.css and the Font folder are copied to the /assets/css folder.

Similarly, the summernote.js file is copied to the /assets/js folder. If you're not using plugins or languages, that's all you need to install.

Here's the code to put in the header to load those files as shown:

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

Note: Including the charset="utf-8" attribute is important.

Outrage

Answer 6

Copy the font folder in your project css.

     just like YourProject/css/font

that should work. It's work with my project.

Fehr

Answer 7

Do you have font-awesome included in your project? I believe that plugin uses font-awesome. If not, trying including this in your application.html.erb file as the src for a script tag: https://www.bootstrapcdn.com/fontawesome/

Also read this: https://github.com/summernote/summernote/issues/505

Kleeman

I was looking at this link for hours – Penney

Answer 8

For anyone that may be having trouble with icons in MVC, it seems as though summernote looks at the base folder (in my case, Content) and the font folder needs to go in there. Here's a screenshot of my project's layout:

For whatever reason, summernote looks in the /summernote/font/ folder in Content rather than where summernote-lite.css is.

Hope this helps!

Kiakiah

Answer 9

I found the same problem. The solution was I deleted the 'toolbar' key from the summernote config:

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

version: summernote v.0.8.12.

Pleistocene