Badges not showing with summernote rails

Question

I followed the official Summernote-rails representative to add a text editor to my Rails project.

Then in my edit.html.erb, I added the place_editor class 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 like:

 <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 for the icon.

Answer 1

I looked for a watch and finally decided. Actually, summernote does not save the icons locally, it loads it instead

I added these links to the title

  <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 will be glad if someone can develop it further.

Answer 2

It's simple

Just download the summernote compilation zip file, click here .

Unzip the file. Copy the font folder. Paste it in the root of summernote.css . Make sure your summernote.css file stays with the font folder. Now update your browser using Ctrl + F5 .

Folder location demonstration:

Demo output:

Answer 3

Although the answer has already been accepted, I would like to publish the best answer for people who are looking for a solution to this problem.

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 the ASSETS STORE LOCALLY . This eliminates the need for a CDN, which affects the loading time of the page in which it is embedded.

By default, "summernote" looks for awesome font icons (and some other summernote fonts) in the /css/font/ directory:

 //=================== 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 you need to do:

• Download fontawesome ,
• Remove the fonts folder from the downloaded archive and rename it to font
• Put the font directory in the css directory of the project.

And that should work.

Given that your assets are available as follows: http://localhost:1337/css/font/summernote.ttf //summernote.ttf is just an example

Hope this helps.

thanks

Answer 4

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

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

Similarly, the summernote.js file summernote.js copied to the /assets/js folder. If you do not use plugins or languages, all you need to install.

Here is the code to put in the header to download these 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. It is important to include the charset="utf-8" attribute.

Answer 5

Import the font files, this will work. I tried to import via CSS @ font-face rule. You can also import into JavaScript.

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

Answer 6

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

Also read the following: https://github.com/summernote/summernote/issues/505

Answer 7

Copy the font folder into your CSS project.

  just like YourProject/css/font 

this should work. This works with my project.