Icons nicht mit summernote Schienen zeigen

Ich folgte Summernote-rails offizielle Rich-Text-Editor in meinem Schiene Projekt hinzuzufügen.

als in meiner edit.html.erb hinzugefügt Klasse place_editor meinen text_area

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

und als Javascript als

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

Alles funktioniert, außer ICONS feine mir bitte helfen.

Quelle

2016-03-16 Muhammad Faisal Iqbal

ich stundenlang gesucht und schließlich löste es. Eigentlich nicht speichern summernote nicht lokal Symbolen, anstatt sie es

ich herunterladen in dieser Links hinzugefügt 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">

Und es hat den Job Ich werde‘willkommen, wenn jemand es weiter

erarbeiten können

Quelle

2016-03-16 14:07:18

. Sparte mir 12 Stunden Kopfknallen. Und ich habe keine Ahnung, wie oder warum das funktioniert. Ein weiterer Grund, warum ich Front-End-Entwicklung hasse. –

Gut zu wissen, dass es für Sie funktioniert hat. –

nicht unbedingt. Wenn Sie Summer Font-Dateien herunterladen und sie mit summernote.css verknüpfen, funktioniert das lokal. –

Haben Sie font-awesome in Ihrem Projekt? Ich glaube, dass Plugin font-awesome verwendet. Wenn nicht, versuchen, einschließlich dies in Ihrer application.html.erb Datei als src für ein Script-Tag: https://www.bootstrapcdn.com/fontawesome/

das Lesen Sie auch: https://github.com/summernote/summernote/issues/505

Quelle

2016-03-16 13:02:25 toddmetheny

ich stundenlang an dieser Verbindung gesucht Dieser –

Obwohl eine Antwort bereits akzeptiert ist, möchte ich dennoch eine bessere Antwort für Leute, die eine Lösung für das fragliche Problem suchen, veröffentlichen.

Natürlich ist dies funktioniert:

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

Aber ich bevorzuge STORE VERMÖGEN LOKAL. Es entfällt die Notwendigkeit von CDN, die die Ladezeit der Seite wirkt sich in seiner eingebetteten

standardmäßig „summernote“ sieht für font-awesome Symbole (und einige andere summernote Schriften) im Verzeichnis /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/

Also, was u tun müssen:

Herunterladen fontawesome,
die fonts f herausnehmen älter aus dem heruntergeladenen Archiv und benennen Sie sie in font
Legen Sie das Verzeichnis font innerhalb des css Verzeichnis des Projekts.

Und das sollte funktionieren.

In Anbetracht Ihres Vermögens zur Verfügung wie diese http://localhost:1337/css/font/summernote.ttf //summernote.ttf is just an example

ich das hoffentlich helfen.

Dank

Quelle

2016-08-26 06:16:12

Ihre Lösung hat bei mir nicht funktioniert, anscheinend weil die Schriftart selbst als Sommernote bezeichnet werden muss. Sie haben mich jedoch in die richtige Richtung gelenkt, um herauszufinden, wie Sie den Distributions-Download korrekt installieren können - der bereits die erforderliche Schriftart enthält. (andere Antwort geschrieben) – ElmerCat

Nun, du musst nichts umbenennen, ich habe diese Sommernote in einigen meiner Arbeiten arbeiten und ich musste nie etwas umbenennen. Sie müssen nur die korrekte font-awesome dist und summernote.css herunterladen und sie wie oben beschrieben platzieren. Ich habe diese Antwort geschrieben, während ich Summernote in einem meiner Projekte implementiert habe. Es tut mir leid, wenn es dir nicht geholfen hat, aber es funktioniert gut für mich, jedenfalls habe ich die css-Stapel für mehr Klarheit hinzugefügt. Danke –

Ihre Lösung hat für mich funktioniert. Just Hinzufügen von Schriften super css fügt Symbole im Menü von summnernote hinzu –

Nach der Summernote Verteilung Download Entpacken, müssen Sie die Font Ordner an den gleichen Stellen Sie die summernote.css Datei setzen kopieren.

In diesem Beispiel Elmer ist der Stammordner der Website, und beide summernote.css und die Font Ordner werden den /assets/css Ordner kopiert.

Auch die summernote.js-Datei in den Ordner /assets/js kopiert wird. Wenn Sie keine Plugins oder Sprachen verwenden, müssen Sie nur noch installieren.

Hier ist der Code in der Kopfzeile zu setzen, diese Dateien zu laden, wie gezeigt:

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

Anmerkung: Einschließlich dem charset="utf-8" Attribute wichtig ist.

Quelle

2016-09-03 19:42:03 ElmerCat

Es ist einfach

Gerade summernote compile zip file click here zum Download.

Entpacken Sie die Datei. Kopieren Schriftart Ordner. Fügen Sie es ein summernote.css root. Stellen Sie sicher, dass Ihre Datei summernote.css mit Schriftart Ordner bleibt. Jetzt Aktualisieren Sie Ihren Browser mit Ctrl + F5.

Folder Location Demo:

Demo Ausgabe:

Quelle

2017-05-19 11:42:11

Icons nicht mit summernote Schienen zeigen

Antwort

Verwandte Themen