it-swarm.com.de

Ckeditor entfernt <i> Tags

CKeditor entfernt das <i> Tags, und ich kann nicht finden, wo ich in config.js diesen Code einfügen kann.

CKEDITOR.dtd.$removeEmpty['i'] = false

Dies ist eine Lösung für Drupal 7 und das CKEditor-Modul.

Fügen Sie ein leeres Leerzeichen hinzu -

<i class="fa fa-drupal">&nbsp;</i>
3
Damir Dimić

Ich bin auf Drupal 8.6.1, Fontawesome-Modul 8.x-2.6 und hatte ein ähnliches Problem mit eingefügten Symbolen für das CKEditor-Stripping-Modul. Ich habe auch versucht, "i" -Symbole manuell in "Quelle" einzugeben. Bearbeitungsmodus. Es schlug fehl, selbst nachdem ich am Ende & nsp hinzugefügt und "i" in Filter-Tags für CKEditor eingefügt hatte.

Aus irgendeinem Grund hat alles funktioniert, als ich die Einstellungen für "Fontawesome Admin"> "Konfiguration"> "Font Awesome"> "Font Awesome" von "i" in "span" geändert und dem CKEditor-Filter "span" -Tags hinzugefügt habe.

4
David R Onaka

Ich schlage folgendes vor:

<i class="icon icon-classname">&zwnj;</i>

$ zwnj ist ein "Nicht-Joiner mit einer Breite von Null", der es vermeidet, mit dem linken Abstand/dem linken Rand zu spielen.

3

Das Hinzufügen eines Hex-Symbols zum i-Tag funktioniert nicht für alle und nicht jeder ist ein PHP-Entwickler, der einfach ein kleines Modul für eine Lösung erstellen kann.

Hier ist eine schnelle js-Korrektur, speziell für großartige Schriftarten.

  • navigieren Sie zu/admin/config/content/formats/manage/basic_html
  • hinzufügen span.fontAwesome | Icon zu den Einstellungen des CKEditor-Plugins
  • wählen Sie "Zulässige HTML-Tags begrenzen und fehlerhaften HTML-Code korrigieren".
  • hinzufügen <i class=""> zu den zulässigen Tags in den Filtereinstellungen

  • Sie müssen eine benutzerdefinierte Javascript-Datei, die Font Awesome Library und die JQuery Library hinzufügen.

  • fügen Sie Folgendes in Ihre Datei theme.libraries.yml ein:

    global-js:
      js:
        js/custom_js_file.js: {}
      dependencies:
        - core/jquery
    
    font-awesome:
      remote: https://fortawesome.github.io/Font-Awesome/
      version: 4.5.0
      license:
      name: MIT
      url: https://fortawesome.github.io/Font-Awesome/license/
      gpl-compatible: true
    css:
      theme:
        https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css: { type: external, minified: true }`
    
  • fügen Sie in die Datei theme.info.yml Folgendes ein:

    libraries:
      - theme/global-js
      - theme/font-awesome
    
  • Fügen Sie Folgendes in die benutzerdefinierte Javascript-Datei ein.

(function ($) { $.fn.awesomeIcon = function(){ $(this).each(function(i, el) { $('span').replaceWith(function(){ return $('<i class="fa ' + $(el).text() + '">'); }); }) } $('.fontAwesome').awesomeIcon() })(jQuery);

  • Aktualisieren Sie den Cache
  • erstellen Sie neue Inhalte
  • fügen Sie im CKEditor den Klassennamen eines fontAwesome-Symbols ein, z. B. fa-thumbs-o-up
  • markieren Sie es und wählen Sie das Symbol aus der Dropdown-Liste Stile.
  • veröffentlichen Sie den Beitrag

Wenn alles gut geht, sollte das Fontawesome-Symbol im Knoten am Frontend angezeigt werden.

0
Bruce Davidson