CKEditor5 for REDAXO CMS

Intergriert den CKEditor5 in REDAXO CMS.

Features

WYSIWYG-Editor
Profilkonfigurator mit Drag&Drop-Unterstützung, Profile können einfach zusammengeklickt werden
Eigene Schriften können integriert und verwaltet werden
Bild-Upload-Kategorie pro Profil einstellbar
Medienmanager-Typ je Profil einstellbar
Zusätzliche Optionen erlauben es den Editor anzupassen
Sprog-Ersetzungen per mentions Plugin
Der Expertenmodus erlaubt es Profile frei im Quellcode zu entwickeln
Platzhalter für alle Backend-Sprachen
Dark-mode-support für REDAXO >= 5.13

Custom REDAXO Link-Widget

Linkmap-Support
YForm-Datasets
Tel: and Mailto: links
Medienlinks
Eigene Link-Decorators

Editor Features

Alle kostenlosen Anbieter-Plugins integriert
nur unterstützte Formate werden eingefügt
Einfügen von Klartext
Transformationen erlauben die Umwandlung von z.B. Abkürzungen zu Sonderzeichen von (c) in ©
Selektor für Sonderzeichen
Bild-Upload in den Medienpool per Drag & Drop in das Textfeld

Demo

Profil Editor

Konfiguriere dir deinen Editor, so wie du ihn brauchst.

Codebeispiele

Verwendung allgemein:

Eingabe Code

 <textarea class="form-control cke5-editor" data-profile="default" data-lang="<?php echo \Cke5\Utils\Cke5Lang::getUserLang(); ?>" name="REX_INPUT_VALUE[1]">REX_VALUE[1]</textarea>

Ausgabe Code

REX_VALUE[id="1" output="html"]

Über weitere Data-Attribute können die Minimal- und Maximalhöhe sowie die Sprache gesteuert werden:

data-max-height
data-min-height
data-lang

Verwendung in YForm

Im individuellen Attribute-Feld: {"class":"cke5-editor","data-profile":"default","data-lang":"de"}
Weitere Attribute kommagetrennt möglich

Verwendung in MForm

$mform = new MForm();
$mform->addTextAreaField(1, 
        array(
        'label'=>'Text',
        'class'=>'cke5-editor', 
        'data-lang'=>\Cke5\Utils\Cke5Lang::getUserLang(), 
        'data-profile'=>'default')
        );
echo $mform->show();

Verwendunng mit MBlock

$id = 1;
$mform = new MForm();
$mform->addFieldset('Accordion');
$mform->addTextField("$id.0.titel", array('label'=>'Titel'));
$mform->addTextAreaField("$id.0.text", 
        array(
        'label'=>'Text',
        'class'=>'cke5-editor', 
        'data-lang'=>\Cke5\Utils\Cke5Lang::getUserLang(), 
        'data-profile'=>'default')
        );
echo MBlock::show($id, $mform->show());

Eigene Schriften einbinden

Damit die angegebenen Fonts im Backend sichtbar werden, müssen diese als Assets im Backend geladen werden. Dies kann z.B. in der boot.php Projekt-AddOn oder im backend.css des Theme-AddOn erfolgen. Die Schriften werden in gewohnter CSS-Schreibweise im Abschnitt FontFamily des Profile-Editors hinterlegt.

Sprog-Ersetzungen

Unter Mention & Sprog Ersetzungen > Sprog Ersetzungen > Ersetzungen können Sprog-Platzhalter mit Titel oder Beschreibung hinterlegt werden. Schreibweise {{key}} und im nächsten Feld der Titel. Im Editor gibt man nur '{{' ein um eine Liste der Platzhalter zu erhalten.

Individualisieren

Die Darstellung des Editors kann per CSS an die Fronteid-Ausgabe angepasst werden. Hierfür steht Im Ordner assets/addons/cke5_custom_data eine CSS-Datei bereit

CSS Content-Styles CSS

Link zum Styleguide

Den Styles ist das Präfix .ck-content vorangestellt. Die Klasse sollte dem Ausgabeelement hinzugefügt werden und die mitgelieferte cke5_content_styles.css aus dem Asset-Ordner geladen werden.

Nach der Installation dieses AddOns kann die CSS-Datei /assets/addons/cke5/cke5_content_styles.css verwendet werden. Besser aber ist, sich eine eigene zu erstellen.

CKE im Frontend verwenden

siehe: REDAXO Tricks

Keyboard support

Below is a list of the most important keystrokes supported by CKEditor 5 and its features:

Action	PC	Mac
Copy	`Ctrl` + `C`	`⌘` + `C`
Paste	`Ctrl` + `V`	`⌘` + `V`
Undo	`Ctrl` + `Z`	`⌘` + `Z`
Redo	`Ctrl` + `Y` `Ctrl` + `Shift` + `Z`	`⌘` + `Y` `⌘` + `Shift` + `Z`
Bold	`Ctrl` + `B`	`⌘` + `B`
Italic	`Ctrl` + `I`	`⌘` + `I`
Link	`Ctrl` + `K`	`⌘` + `K`
Insert a hard break (e.g. a new paragraph)	`Enter`
Insert a soft break (i.e. a `<br>`)	`Shift` + `Enter`
Nest the current list item (when in a list)	`Tab`
When a widget is selected (for example: image, table, horizontal line, etc.)
Insert a new paragraph directly after a widget	`Enter`
Insert a new paragraph directly before a widget	`Shift` + `Enter`
Display the caret to allow typing directly before a widget	`↑` / `←`
Display the caret to allow typing directly after a widget	`↓` / `→`
In a table cell
Move the selection to the next cell	`Tab`
Move the selection to the previous cell	`Shift` + `Tab`
Insert a new table row (when in the last cell of a table)	`Tab`
Navigate through the table	`↑` / `→` / `↓` / `←`

User interface and navigation

Use the following keystrokes for more efficient navigation in the CKEditor 5 user interface:

Action	PC	Mac
Close contextual balloons and UI components like dropdowns	`Esc`
Move focus to the visible contextual balloon	`Tab`
Move focus between fields (inputs and buttons) in contextual balloons	`Tab`
Move focus to the toolbar	`Alt` + `F10`	`Alt` + `F10` (may require `Fn`)
Navigate through the toolbar	`↑` / `→` / `↓` / `←`
Execute the currently focused button	`Enter`

Für Entwickler

Beispiel Extra Optionen

{
    "removePlugins": ["Autoformat"],
    "heading": {
        "options": [{
                "model": "paragraph",
                "title": "Paragraph",
                "class": "ck-heading_paragraph"
            },
            {
                "model": "paragrap1tl",
                "view": {
                    "name": "span",
                    "classes": "uk-text-large"
                    
                },
                "title": "Fließtext groß",
                "class": "ck-heading_paragraph"
            },
            {
                "model": "heading1",
                "view": {
                    "name": "h1",
                    "classes": "uk-animation-fade uk-heading-large"   
                },
                "title": "Überschrift 1 sehr groß",
                "class": "ck-heading_heading1"
            },

        ]
    }
}

Beispiel für benutzerdefinierte Link-Dekorator

Achtung, die Keys müssen in Kleinbuchstaben geschrieben werden

[{
    "newtab": {
        "mode": "manual",
        "label": "Open in a new tab",
        "attributes": {
            "target": "_blank",
            "rel": "noopener noreferrer"
        }
    }
}]

[{
    "arrowclass": {
        "mode": "manual",
        "label": "Link mit CSS Klasse",
        "defaultValue": "true",
        "classes": "arrow"
    }
}]

Oder multiple:

[{
    "openInNewTab": {
        "mode": "manual",
        "label": "Open in a new tab",
        "defaultValue": true,
        "attributes": {
            "target": "_blank",
            "rel": "noopener noreferrer"
        }
    }
},
{
    "isGallery": {
        "mode": "manual",
        "label": "Gallery link",
        "attributes": {
            "class": "button light",
        }
    }
}]

Mentions

Das AddOn liefert das Mentions-Plugin mit. Dieses kann frei konfiguriert werden. Hier ein Beispiel:

[{
    "marker": "@",
    "feed": [
        "@test",
        "@test2"
    ],
    "minimumCharacters": "0"
}]

YForm links

Um die generierten Urls wie rex_news://1 zu ersetzen, muss das folgende Skript in die boot.php des project AddOns eingefügt werden. Der Code für die Urls muss modifiziert werden.

rex_extension::register('OUTPUT_FILTER', function(\rex_extension_point $ep) {
    return preg_replace_callback(
        '@((rex_news|rex_person))://(\d+)(?:-(\d+))?/?@i',
        function ($matches) {
            // table = $matches[1]
            // id = $matches[3]
            $url = '';
            switch ($matches[1]) {
                case 'news':
                    // Example, if the Urls are generated via Url-AddOn  
                    $id = $matches[3];
                    if ($id) {
                       return rex_getUrl('', '', ['news' => $id]); 
                    }
                    break;
                case 'person':
                    // ein anderes Beispiel 
                    $url = '/index.php?person='.$matches[3];
                    break;
            }
            return $url;
        },
        $ep->getSubject()
    );
}, rex_extension::NORMAL);

Profile API

Über die API ist es möglich eigene Profile abseites des Profileditors anzulegen: Cke5\Creator\Cke5ProfilesApi::addProfile

Example:

    $create = \Cke5\Creator\Cke5ProfilesApi::addProfile(
        'profile_name_cke5',
        'API created Cke5 profile',
        '{
           "toolbar": ["link", "rexImage", "|", "undo", "redo", "|", "selectAll", "insertTable", "code", "codeBlock"],
           "removePlugins": ["Alignment", "Font", "FontFamily", "MediaEmbed", "Bold", "Italic", "BlockQuote", "Heading", "Alignment", "Highlight", "Strikethrough", "Underline", "Subscript", "Superscript", "Emoji", "RemoveFormat", "TodoList", "HorizontalLine", "PageBreak"],
           "link": {"rexlink": ["internal", "media"]},
           "image": {
             "toolbar": ["imageTextAlternative", "|", "imageStyle:full", "imageStyle:alignLeft", "imageStyle:alignRight", "imageStyle:alignCenter"],
             "styles": ["block", "alignLeft", "alignRight", "alignCenter"]
           },
           "table": {"toolbar": ["tableColumn", "tableRow", "mergeTableCells", "tableProperties", "tableCellProperties"]},
           "rexImage": {"media_path": "\/media\/"},
           "ckfinder": {"uploadUrl": ".\/index.php?cke5upload=1&media_path=media"},
           "placeholder_en": "Placeholder EN",
           "placeholder_de": "Placeholder DE",
           "codeBlock": {
             "languages": [{"language": "plaintext", "label": "Plain text", "class": ""}, {
               "language": "php",
               "label": "PHP",
               "class": "php-code"
             }]
           }
         }',
        '[{"min-height": 100}, {"max-height": 280}]'
    );
    echo (is_string($create)) ? $create : 'successful profile created';

HTML-Support

Source-Editing Plugin mach Update. Nach einem Update einer sehr alten Version fehlt ggf. die Grundeinstellung für das PlugIn im Abschnistt HtmlSupport.

[
    {
        "name": "regex(/.*/)",
        "attributes": true,
        "classes": true,
        "styles": true
    }
]

Autoformat deaktivieren

Das Autoformat-Feature (markdown code replacement) kann man deaktivieren, indem man folgende Option in den Abschnitt Extra Options einfügt:

{"removePlugins": ["Autoformat"]}

Bugtracker

If you have found a error or maybe you have an idea, You can create a Issue. Before you create a new issue, please search if there already exists an issue with your request, and read the Issue Guidelines (englisch) from Nicolas Gallagher.

Changelog

see CHANGELOG.md

Licenses

AddOn:MIT LICENSE CKEDITOR GPL LICENSE

Author

Friends Of REDAXO

http://www.redaxo.org
https://github.com/FriendsOfREDAXO

Projekt-Lead

Joachim Dörr

Initiator:

KLXM Crossmedia / Thomas Skerbis

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.de.md

README.de.md

CKEditor5 for REDAXO CMS

Features

Demo

Profil Editor

Codebeispiele

Verwendung allgemein:

Eingabe Code

Ausgabe Code

Verwendung in YForm

Verwendung in MForm

Verwendunng mit MBlock

Eigene Schriften einbinden

Sprog-Ersetzungen

Individualisieren

CSS Content-Styles CSS

CKE im Frontend verwenden

Keyboard support

User interface and navigation

Für Entwickler

Beispiel Extra Optionen

Beispiel für benutzerdefinierte Link-Dekorator

Mentions

YForm links

Profile API

HTML-Support

Autoformat deaktivieren

Bugtracker

Changelog

Licenses

Author

Files

README.de.md

Latest commit

History

README.de.md

File metadata and controls

CKEditor5 for REDAXO CMS

Features

Demo

Profil Editor

Codebeispiele

Verwendung allgemein:

Eingabe Code

Ausgabe Code

Verwendung in YForm

Verwendung in MForm

Verwendunng mit MBlock

Eigene Schriften einbinden

Sprog-Ersetzungen

Individualisieren

CSS Content-Styles CSS

CKE im Frontend verwenden

Keyboard support

User interface and navigation

Für Entwickler

Beispiel Extra Optionen

Beispiel für benutzerdefinierte Link-Dekorator

Mentions

YForm links

Profile API

HTML-Support

Autoformat deaktivieren

Bugtracker

Changelog

Licenses

Author