ikony nie są wyświetlane z szynami summernote

Question

Śledziłem Summernote-rails oficjalny dodatek do edytora tekstu w moim projekcie szyn.

niż w moim edit.html.erb dodanej klasy place_editor do mojego text_area

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

i niż javascript jako

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

wszystko działa poprawnie z wyjątkiem IKONY Uprzejmie mi pomóc.

Answer 1

Szukałem godzin i ostatecznie rozwiązany. Właściwie summernote nie zapisać ikony lokalnie, zamiast go pobrać go

dodałem ten łączy w nagłówku

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

I to nie praca Będę mile widziane, jeśli ktoś może go opracować dalsze

Answer 2

Czy masz w swoim projekcie świetne czcionki? Wierzę, że wtyczka używa font-awesome. Jeśli nie, to próbuje w tym w pliku application.html.erb jako src dla tagu skryptu: https://www.bootstrapcdn.com/fontawesome/

przeczytać również to: https://github.com/summernote/summernote/issues/505

Answer 3

Chociaż odpowiedź jest już zaakceptowana, nadal chciałbym zamieścić lepszą odpowiedź dla osób szukających rozwiązania danego problemu.

Oczywiście to będzie działać:

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

Ale wolę SKLEP AKTYWÓW LOKALNIE. To eliminuje potrzebę CDN co wpływa na czas ładowania strony jego osadzony w

Domyślnie „summernote” wygląda na font-niesamowite ikon (i niektórych innych czcionek summernote) w katalogu /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/ 

Więc co u trzeba zrobić, to:

1. Pobierz fontawesome,
2. Wyjąć fonts f starszy z pobranego archiwum i zmień jego nazwę na font
3. Place katalogu font wewnątrz css katalogu projektu.

To powinno zadziałać.

rozpatrywaniu aktywa są dostępne jak to http://localhost:1337/css/font/summernote.ttf //summernote.ttf is just an example

Mam nadzieję, że to pomoże.

Dzięki

Answer 4

Po rozpakowaniu Summernote dystrybucji pobieranie, należy skopiować folderu czcionki w tym samym miejscu można umieścić plik summernote.css.

W tym przykładzie Elmer jest folder główny serwisu i obie summernote.css i folderu czcionki są kopiowane do folderu /assets/css.

Podobnie, plik summernote.js jest kopiowany do folderu /assets/js. Jeśli nie używasz wtyczek lub języków, to wszystko, co musisz zainstalować.

Oto kod, aby umieścić w nagłówku, aby załadować te pliki, jak pokazano:

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

Uwaga: wraz z atrybutem charset="utf-8" jest ważne.

Answer 5

To proste

Wystarczy pobrać summernote compile zip file click here.

Rozpakuj plik. Skopiuj folder z czcionką. Wklej go: summernote.css root. Upewnij się, że plik summernote.css pozostaje w folderze z czcionką. Teraz odśwież swoją przeglądarkę, używając Ctrl + F5.

Folder Lokalizacja demo:

Demo Wyjście: