CKEditor Strips <i> Tag

Question

Ich versuche eine Lösung zu finden, um CKEditor zu vermeiden, aber auch der ältere FCKeditor löscht alle <i> Tags von zuvor eingefügtem Inhalt in die db.

Fall:

ich HTML-Inhalt an die DB einfügen, enthalten einige Inhalte, die <i> Elemente. Ich mache das mit dem CKEditor. Alles funktioniert perfekt und der Inhalt erscheint auf der Webseite. Wenn ich jedoch den zuvor eingefügten Inhalt bearbeiten möchte, fehlen die Elemente <i>.

In meinem speziellen Fall verwende ich:

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i> 

Natürlich, wenn ich den Editor zu deaktivieren, zeigt der Inhalt ganz gut in dem Textfeld auf.

Answer 1

fand ich die Lösung für dieses spezifische Problem, das ich mit dem <i> Tag lief in

Die ursprüngliche Antwort, die ich von drupal forum bekam

Das Update oder zwicken (Sie nennen es) denn es ist zu stellen Sie die folgenden in die ckeditors config.js:

// ALLOW <i></i> 
config.protectedSource.push(/<i[^>]*><\/i>/g); 

Dank Spasticd onkey für den Verweis auf den Link.

Answer 2

Es gibt zwei mögliche Probleme:

• Lesen Sie mehr über Advanced Content Filter. CKEditor entfernt Elemente, die nicht erlaubt sind, aber Sie können die Filterregeln erweitern.

• Wenn jedoch das Problem ist, dass CKEditor leere <i> Elemente entfernt, dann müssen Sie eine andere Art der Verwendung finden. CKEditor ist kein WYSIWYG-Website-Generator. Es ist ein Dokumenteneditor, daher muss der geladene Inhalt eine Bedeutung haben. Ein leeres Inline-Element hat keine Bedeutung, daher wird es entfernt, weil sonst der Editor nicht wüsste, was damit zu tun ist.

  Eine der möglichen Lösungen in der (nahen) Zukunft wird sein, diese leeren Elemente mit Widgets system zu behandeln. Aber jetzt rate ich Ihnen, die CKEDITOR.htmlDataProcessor und short guide zu überprüfen, wie man es benutzt.

Answer 3

für Version 4.3 ckeditor

in Konfig.js (nach Config Abschnitt) paste

CKEDITOR.dtd.$removeEmpty['b'] = false; 

und schreiben Widget mit Code

CKEDITOR.plugins.add('bwcaret', { 
requires: ['widget'/*, 'richcombo'*/], 

icons: 'bwcaret', 

init: function(editor) { 

    editor.widgets.add('bwcaret', { 

     button: 'Create a caret', 

     template: '<b class="caret"></b>', 


     allowedContent: 'b(!caret)', 

     requiredContent: 'b(!caret)', 

     upcast: function(element) { 
      return element.name == 'b' && element.hasClass('caret'); 
     }, 

    }); 
} 

});

Answer 4

Wenn die protectedSource-Lösung verwendet wird, werden i Tags nicht mehr entfernt, aber img Tags werden nicht mehr im WYSIWIG-Modus von CKEditor angezeigt (ich verwende 4.3.1). Die Lösung, die besser für mich gearbeitet ist CKEDITOR.dtd.$removeEmpty

Zum Beispiel mit leeren i Umbauten zu entfernen, um zu deaktivieren, habe ich folgendes zu dem config.js

// allow i tags to be empty (for font awesome) 
CKEDITOR.dtd.$removeEmpty['i'] = false; 

Hinweis: Dies sollte außerhalb der CKEDITOR.editorConfig = function(config) Funktion gesetzt werden .

Answer 5

Hier ist, was für mich

fügen Sie die drei folgenden Codezeilen in der gleichen Reihenfolge, in der Drupal ckeditor Profileinstellung admin/config/content/ckeditor/edit/Full

ADVANCED OPTIONS Arbeiten> > Benutzerdefinierte JavaScript-Konfiguration

config.allowedContent = true; 
 
    config.extraAllowedContent = 'p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}'; 
 
    CKEDITOR.dtd.$removeEmpty.i = 0;

Die erste Zeile schaltet die erweiterte Filterung ziemlich aus

Die zweite Zeile erlaubt die ALL-Klasse (), einen beliebigen Stil {} und jedes Attribut [*] für p, div, li und ul.

Die letzte Zeile ist für das leere Tag ... diese Zeile arbeitet mit Bildern ... Ich habe festgestellt, dass wenn Sie config.protectedSource.push verwenden (/] *> </i>/g); Es löscht das Tag während der Bearbeitung.