ANLEITUNG: Tipp für leere HTML-tags und Text in p-tags im CKEditor

[noRiddle (revilonetz)]

Hallo Community.
Ich habe hier mal einen Tipp für Leute, die leere HTML-tags im Backend-Editor benutzen möchten, z.B. weil sie FontAwesome benutzen wollen in der Art wie es im Standard-Template tpl_modified_responsive benutzt wird:

Code: XML  [Auswählen]

<i class="fas fa-info"></i>

Der Editor akzeptiert leere HTML-tags nicht und löscht sie einfach raus.
Lösung:
PHP-Datei anlegen namens z.B. allow_empty_tags_in_editor.php in /includes/extra/wysiwyg/ mit folgendem Inhalt:

Code: PHP  [Auswählen]

<?php
/*******************************************
* file: allow_empty_tags_in_editor.php
* path: /includes/extra/wysiwyg/
* use: allow empty tags in ckeditor
*
* © copyright, 04-2021, noRiddle
*******************************************/

//BOC don't remove empty tags, noRiddle
$html .= '$(function() {
            $.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
                CKEDITOR.dtd.$removeEmpty[i] = false;
            })
           })';
//EOC don't remove empty tags, noRiddle
?>

Damit werden alle HTML-tags auch als leere tags akzeptiert.
Möchte man nur bestimmte leere tags zulassen, z.B. <i> und <span>, kann man das noch filtern:

Code: PHP  [Auswählen]

<?php
/*******************************************
* file: allow_empty_tags_in_editor.php
* path: /includes/extra/wysiwyg/
* use: allow empty tags in ckeditor
*
* © copyright, 04-2021, noRiddle
*******************************************/

//BOC don't remove empty tags i and span, noRiddle
$html .= '$(function() {
            $.each(CKEDITOR.dtd.$removeEmpty, function (i, value) {
                if(i == \'i\' || i == \'span\') {
                    CKEDITOR.dtd.$removeEmpty[i] = false;
                }
            })
        })';
//EOC don't remove empty tags i and span, noRiddle
?>

Für nur einen tag, z.B. <i>, kann man sich den Loop sparen:

Code: PHP  [Auswählen]

<?php
/*******************************************
* file: allow_empty_tags_in_editor.php
* path: /includes/extra/wysiwyg/
* use: allow empty tags in ckeditor
*
* © copyright, 04-2021, noRiddle
*******************************************/

//BOC don't remove empty tag i, noRiddle
$html .= '$(function() {
            CKEDITOR.dtd.$removeEmpty[\'i\'] = false;
        })';
//EOC don't remove empty tag i, noRiddle
?>

Zum Thema indirekt passend:
Mich stört, daß der Editor eingegebenen Text nicht automatisch in p-tags fasst; für semantisches Web und wahrscheinlich für SEO schlecht.

Das in einer Datei in /includes/extra/wysiwyg/

Code: PHP  [Auswählen]

$customConfig['autoParagraph'] = "autoParagraph: true,";

führt leider nicht zum erhofften Ergebnis.

Weiß jemand wie man das hinbekommt ?
Ich möchte nicht dafür eine Custom-JS-Datei anlegen müssen (wobei ich nauch nicht weiß, ob das dann funktionieren würde).

Gruß,
noRiddle

*NACHTRAG*
Hat sich erledigt.
Das funktioniert nur wenn man das Default-Verhalten für ENTER und SHIFT+ENTER ebenfalls ändert.
Für die die es möchten:

Code: PHP  [Auswählen]

$customConfig['enterMode'] = "enterMode: CKEDITOR.ENTER_PENTER_BR,";
$customConfig['shiftEnterMode'] = "shiftEnterMode: CKEDITOR.ENTER_BR,";
$customConfig['autoParagraph'] = "autoParagraph: true,";

ENTER ergibt dann einen neuen Absatz (=p-tag) und SHIFT+ENTER ein Break (= <br>).
Eingegebener Text wird automatisch in p-tags gesetzt.
[...]

Gruß,
noRiddle

[EDIT Tomcraft 04.07.2022: Anleitung für p-tags ergänzt.]

Linkback: https://www.modified-shop.org/forum/index.php?topic=41794.0

[RobtheTop]

Sehr nice.
Danke dir.

[karsta.de]

Danke noRiddle. Das macht Ganze wirklich leichter.

BG Karsta

[voodoopupp]

Das ist auf alle Fälle eine sehr sinnvolle Erweiterung.

[noRiddle (revilonetz)]

Zum Thema indirekt passend:
Mich stört, daß der Editor eingegebenen Text nicht automatisch in p-tags fasst; für semantisches Web und wahrscheinlich für SEO schlecht.

Das in einer Datei in /includes/extra/wysiwyg/

Code: PHP  [Auswählen]

$customConfig['autoParagraph'] = "autoParagraph: true,";

führt leider nicht zum erhofften Ergebnis.

Weiß jemand wie man das hinbekommt ?
Ich möchte nicht dafür eine Custom-JS-Datei anlegen müssen (wobei ich nauch nicht weiß, ob das dann funktionieren würde).

Gruß,
noRiddle

*NACHTRAG*
Hat sich erledigt.
Das funktioniert nur wenn man das Default-Verhalten für ENTER und SHIFT+ENTER ebenfalls ändert.
Für die die es möchten:

Code: PHP  [Auswählen]

$customConfig['enterMode'] = "enterMode: CKEDITOR.ENTER_PENTER_BR,";
$customConfig['shiftEnterMode'] = "shiftEnterMode: CKEDITOR.ENTER_BR,";
$customConfig['autoParagraph'] = "autoParagraph: true,";

ENTER ergibt dann einen neuen Absatz (=p-tag) und SHIFT+ENTER ein Break (= <br>).
Eingegebener Text wird automatisch in p-tags gesetzt.

[EDIT Tomcraft 04.07.2022: Anleitung in Beitrag 1 ergänzt.]

[noRiddle (revilonetz)]

Noch eine kleine Sache wenn man HTML-Entities im Editor benutzen möchte (in der Quelltextansicht):

Code: PHP  [Auswählen]

$customConfig['entities'] = "entities: true,"; //allow entities like &shy; or the like

Ansonsten filter der Editor die Entities nämlich heraus.

Gruß,
noRiddle