Skip to content

Latest commit

 

History

History
519 lines (419 loc) · 14.4 KB

README.de.md

File metadata and controls

519 lines (419 loc) · 14.4 KB

CKEditor5 for REDAXO CMS

Intergriert den CKEditor5 in REDAXO CMS.

Screenshot

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

Screenshot

  • 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

Screenshot

Profil Editor

Konfiguriere dir deinen Editor, so wie du ihn brauchst.

Screenshot

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

Screenshot

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

Projekt-Lead

Joachim Dörr

Initiator:

KLXM Crossmedia / Thomas Skerbis