Integrates the CKEditor5 into REDAXO CMS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

CKEditor5 for REDAXO CMS

Screenshot

Integrates the CKEditor5 into REDAXO CMS.

Screenshot

Features

  • WYSIWYG-Editor
  • Profile configurator with drag and drop support, profiles can be simply clicked together
  • Image upload into the media pool via drag & drop into the text field
  • Image upload category per profile adjustable
  • Media manager type adjustable per profile
  • Linkmap-Support
  • Mediapool-Support
  • MBlock-Support

Demo

Screenshot

Profile Editor

Configure your editor as you need it.

Screenshot

Code Examples

Use in general:

Input 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>

Output Code

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

Further data attributes can be used to control the minimum and maximum height as well as the language:

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

Use 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();

Use in 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());

Keyboard support

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
Close contextual balloons and UI components like dropdowns Esc Esc
Nest the current list item (when in a list) Tab Tab
Move focus to the visible contextual balloon Tab Tab
Move focus between fields (inputs and buttons) in contextual balloons Tab Tab
Move focus to the toolbar Alt + F10 Alt + F10
(may require Fn)
Navigate through the toolbar / / / / / /
Execute the currently focused button Enter Enter
Insert a hard break (e.g. a new paragraph) Enter Enter
Insert a soft break (i.e. a <br>) Shift+Enter Shift+Enter

For Developers

By using the API: Cke5\Creator\Cke5ProfilesApi::addProfile, it is possible to install own profiles beside of the profile editor.

Example:

    $create = \Cke5\Creator\Cke5ProfilesApi::addProfile(
        'full_cke',
        'Cke5 with all possible tools',
        ['heading', '|', 'fontSize', 'fontFamily', 'alignment', 'bold', 'italic', 'underline', 'super', 'sub', 'strikethrough', 'insertTable', 'code', 'link', 'rexImage', 'bulletedList', 'numberedList', 'blockQuote', 'highlight', 'emoji', 'undo', 'redo'],
        ['paragraph', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
        ['left', 'right', 'center', 'justify'],
        ['imageTextAlternative', '|', 'full', 'alignLeft', 'alignCenter', 'alignRight'],
        ['tiny', 'small', 'big', 'huge'],
        ['yellowMarker', 'greenMarker', 'pinkMarker', 'blueMarker', 'redPen', 'greenPen'],
        ['tableColumn', 'tableRow', 'mergeTableCells'],
        ['internal', 'media']
    );
    echo (is_string($create)) ? $create : 'successful profile created';

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