it-swarm.com.de

Wie zeige ich einige Symbole auf der Administrationsseite in Ckeditor?

Ich habe es geschafft, mit Ckeditor mit dem Modul Font Awesome Icons v1 fontawesome iconS einzufügen.

Ich habe diesen Code einfach in die HTML-Ansicht von Ckeditor eingefügt.

<i class="fa fa-camera-retro fa-lg">&nbsp;</i>

Das Symbol wird im Frontend korrekt angezeigt, in CKEditor jedoch überhaupt nicht.

Ich denke, ich muss alle Fontawesome-Dateien in Ckeditor laden. Wie kann ich das machen? Ich muss das Symbol in ckeditor genauso sehen wie im Frontend.

Fontawesome befindet sich unter: sites/all/library/fontawesome

5
chefnelone

Ein CKEditor-Plugin für fontawesome existiert. Wenn Sie das WYSIWYG-Modul verwenden, gibt es eine Reihe von Hooks, mit denen Sie Ihren WYSIWYG-Editor ändern können. Tatsächlich hat jemand geschrieben, wie man CKEditor-Plugins mit Drupal manuell hinzufügt.

4
Shawn Conn

Ich benutze das Add-On CKEditor Font Awesome von DOKSoft. Dieses Plugin fügt Font Awesome CSS automatisch hinzu. Siehe Demo .

1
webbuilder

Sie können die Font-Awesome-Symbole auch im Bereich Drupal wysiwyg) verwenden. Fügen Sie die folgende Zeile in den erweiterten Optionen von wysiwyg hinzu> Benutzerdefinierte JavaScript-Konfiguration. (Admin/config/content/ckeditor/edit/xxx):

config.contentsCss = ['//cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css','//cdn.jsdelivr.net/bootswatch/3.3.6/readable/bootstrap.css'];

ps: Sie können diese zweite Zeile hinzufügen, um ein leeres Tag zuzulassen (dann können Sie das nutzlose &nbsp; im Tag vermeiden).

CKEDITOR.dtd.$removeEmpty.i = 0;

Am Ende sollten Sie etwas Ähnliches haben wie:

config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty['i'] = false
CKEDITOR.dtd.$removeEmpty.i = 0;
CKEDITOR.dtd.$removeEmpty['span'] = false;
config.contentsCss = ['//cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css','//cdn.jsdelivr.net/bootswatch/3.3.6/readable/bootstrap.css'];
0
xaa