5

enter image description hereicone non mostrando con le rotaie summernote

ho seguito Summernote-rails ufficiale per aggiungere rich text editor nel mio progetto rotaie.

che nella mia edit.html.erb aggiunto place_editor classe alla mia text_area

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

e di JavaScript come

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

Tutto funziona bene, tranne ICONE Gentilmente darmi una mano.

risposta

2

Ho cercato per ore e alla fine risolto. In realtà, summernote non salva le icone a livello locale, invece scaricarlo

ho aggiunto questo link nell'intestazione

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

E ha fatto il lavoro I 'll benvenuto se qualcuno può approfondire ulteriormente

+0

questo. Mi ha salvato 12 ore di sbattere la testa. E non ho idea di come o perché funzioni. Un altro motivo aggiunto al motivo per cui odio lo sviluppo front-end. –

+0

Felice di sapere che ha funzionato per te. –

+0

non necessariamente. Se scarichi i file dei caratteri del summernote e li colleghi a summernote.css, funzionerà localmente. –

2

Anche se una risposta è già accettata, vorrei ancora pubblicare una risposta migliore per le persone che cercano una soluzione al problema in questione.

Naturalmente questo funziona:

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

ma preferisco risorse del negozio LOCALMENTE. Si elimina la necessità di CDN che colpisce il tempo di caricamento della pagina il suo incorporato in

Con "summernote" default sembra per le icone dei font-impressionante (e alcuni altri tipi di carattere summernote) nella 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/ 

Allora, cosa u necessità di fare è:

  1. Scarica fontawesome,
  2. Estrarre la fonts f anziani dall'archivio scaricato e rinominarlo in font
  3. Posizionare la directory font all'interno del css directory del progetto.

E questo dovrebbe funzionare.

Considerando le risorse sono disponibili come questo http://localhost:1337/css/font/summernote.ttf //summernote.ttf is just an example

Spero che questo vi aiuterà.

Grazie

+0

La tua soluzione non ha funzionato per me, apparentemente perché il font stesso ha bisogno di essere nominato summernote. Tuttavia, mi hai guidato nella giusta direzione per capire come installare correttamente il download della distribuzione, che include già il font richiesto. (altra risposta pubblicata) – ElmerCat

+0

Beh, non è necessario rinominare nulla, ho questa summernote che funziona in alcuni dei miei lavori e non ho mai dovuto rinominare nulla. Devi solo scaricare il font corretto-fantastico dist e summernote.css e posizionarlo come ho spiegato sopra. Ho scritto questa risposta mentre implementavo il summernote in uno dei miei progetti. Mi dispiace se non ti ha aiutato, ma funziona bene per me, comunque ho aggiunto l'impilatura dei CSS per maggiore chiarezza. Grazie –

+0

La tua soluzione ha funzionato per me. Jusst aggiungendo font fantastici css aggiunge icone nel menu di summnernote –

0

Dopo aver decompresso la distribuzione scaricare Summernote, è necessario copiare la cartella Font nello stesso posto si inserisce il file summernote.css.

In questo esempio, Elmer è la cartella principale del sito, ed entrambi summernote.css e la cartella Font vengono copiati nella cartella /assets/css.

enter image description here

Allo stesso modo, il file summernote.js viene copiato nella cartella /assets/js. Se non stai utilizzando plug-in o lingue, è tutto ciò che devi installare.

Ecco il codice per mettere nell'intestazione per caricare i file come mostrato:

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

Nota: Compreso l'attributo charset="utf-8" è importante.

1

E 'semplice

Basta scaricare summernote compile zip file click here.

Decomprimere il file. Copia cartella font. Incollalo tu radice summernote.css. Assicurati che il tuo file summernote.css rimanga nella cartella font. Ora aggiorna il tuo browser usando Ctrl + F5.

posizione cartella demo: enter image description here

Demo in uscita: enter image description here