Icons not showing with summernote rails

user_5703217 0
Viewed 15447

enter image description here

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.

summernote twitter-bootstrap-3 ruby-on-rails css javascript
9 Answers

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');
}
user_109996390

Copy the font folder in your project css.

     just like YourProject/css/font

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

user_71626020

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:

MVC project layout for summernote icons.

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

Hope this helps!

user_83729040

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.

user_81703430
Related