Skip to content

Commit

Permalink
fix: Update CKEditor 5 to latest, add plugins
Browse files Browse the repository at this point in the history
  • Loading branch information
@zooley
zooley committed Aug 22, 2023
1 parent 89f1688 commit 614448c
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 198 deletions.
211 changes: 22 additions & 189 deletions app/Listeners/Editors/Ckeditor5/Ckeditor5.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

use App\Modules\Core\Events\EditorIsRendering;
use Illuminate\Config\Repository;
use Illuminate\Events\Dispatcher;
use stdClass;

/**
Expand All @@ -13,10 +14,10 @@ class Ckeditor5
/**
* Register the listeners for the subscriber.
*
* @param Illuminate\Events\Dispatcher $events
* @param Dispatcher $events
* @return void
*/
public function subscribe($events)
public function subscribe(Dispatcher $events): void
{
$events->listen(EditorIsRendering::class, self::class . '@handle');
}
Expand All @@ -25,11 +26,11 @@ public function subscribe($events)
* Display the editor area.
*
* @param EditorIsRendering $editor
* @return string
* @return void|bool
*/
public function handle(EditorIsRendering $editor)
{
if ($editor->getFormatting() != 'markdown')
if ($editor->getFormatting() != 'html')
{
return;
}
Expand Down Expand Up @@ -91,10 +92,10 @@ public function handle(EditorIsRendering $editor)
);

$editor->setContent(view('listener.editor.ckeditor5::textarea', [
'name' => $editor->getName(),
'id' => $attr['id'],
'value' => $editor->getValue(),
'atts' => $attributes,
'name' => $editor->getName(),
'id' => $attr['id'],
'value' => $editor->getValue(),
'atts' => $attributes,
'config' => $config,
]));

Expand All @@ -104,193 +105,25 @@ public function handle(EditorIsRendering $editor)
/**
* Build a config object
*
* @param array $params
* @return object stdClass
* @param Repository $params
* @return stdClass
*/
private function buildConfig($params)
private function buildConfig(Repository $params)
{
// Object to hold our final config
$config = new stdClass;
/*$config->autoParagraph = false;
$config->startupMode = 'wysiwyg';
$config->tabSpaces = 4;
$config->height = '200px';
$config->toolbarCanCollapse = false;
$config->extraPlugins = 'tableresize,iframedialog,halcyonhighlight';
$config->removePlugins = '';
$config->resize_enabled = true;
$config->emailProtection = '';
$config->protectedSource = array('/@widget(.*)}/gi', '/<map[^>]*>(.|\n)*<\/map>/ig', '/<area([^>]*)\/?>/ig');
$config->extraAllowedContent = 'img(*)[*]; style(*)[*]; mark(*)[*]; span(*)[*]; map(*)[*]; area(*)[*]; *(*)[*]{*}';
$config->bodyClass = 'ckeditor-body';
$config->contentsCss = [
asset('modules/core/vendor/bootstrap/bootstrap.min.css') . '?v=' . filemtime(public_path() . '/modules/core/vendor/bootstrap/bootstrap.min.css'),
asset('listeners/editors/ckeditor5/css/ckeditor5.css') . '?v=' . filemtime(public_path() . '/listeners/editors/ckeditor5/css/ckeditor5.css')
];
$config->toolbar = new stdClass;
$config->toolbar->items = array(
array('Image','Table','HorizontalRule', 'Smiley', 'SpecialChar', 'Iframe'), //'PageBreak',
array('Link', 'Unlink'), //, 'Anchor'
'/',
array('Format', 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'),
array('NumberedList', 'BulletedList', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock')
);
$tlbr = array();
if ($params->get('colorButton'))
{
$config->extraPlugins .= ',colorbutton';
$tlbr[] = 'TextColor';
$tlbr[] = 'BGColor';
}
if ($params->get('fontSize'))
{
$config->extraPlugins .= ',font';
$tlbr[] = 'FontSize';
}
if (!empty($tlbr))
{
$config->toolbar[] = $tlbr;
}
//$config->toolbar[] = array('HalcyonMacro');
// If minimal toolbar
if (in_array('minimal', $params->get('class')))
{
$config->toolbar = array(
array('Link', 'Unlink', 'Anchor'),
array('Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'),
array('NumberedList', 'BulletedList')
);
$config->toolbarCanCollapse = false;
//$config->resize_enabled = false;
//$config->halcyonAutogrow_autoStart = false;
}
// Image plugin if in minimal mode
if (in_array('minimal', $params->get('class'))
&& in_array('images', $params->get('class')))
{
// push after links section
$config->toolbar = array_merge(array_splice($config->toolbar, 0, 1), array(array('Image')), $config->toolbar);
}
// If no footer
//if (in_array('no-footer', $params->get('class')))
//{
$config->removePlugins = 'elementspath';
//}
// Setup codemirror
$config->codemirror = new stdClass;
$config->codemirror->autoFormatOnModeChange = false;
$config->codemirror->autoCloseTags = false;
$config->codemirror->autoCloseBrackets = false;
// Startup mode
if (in_array($params->get('startupMode'), array('wysiwyg','source')))
{
$config->startupMode = $params->get('startupMode');
}
// Show source button
if ($params->get('sourceViewButton', 1))
{
array_unshift($config->toolbar[0], 'Source', '-');
$config->extraPlugins .= ',codemirror';
}
// Height
if ($params->get('height'))
{
$config->height = $params->get('height', '200px');
}
// Class to add to ckeditor body
if ($params->get('contentBodyClass'))
{
$config->bodyClass = $params->get('contentBodyClass');
}
// add stylesheets to ckeditor content
// Otherwise, do not style
if (is_array($params->get('contentCss')) && count($params->get('contentCss')))
{
$config->contentsCss = $params->get('contentCss');
}
// File browsing
if ($params->get('fileBrowserBrowseUrl'))
{
$config->filebrowserBrowseUrl = $params->get('fileBrowserBrowseUrl');
}
// Image browsing
if ($params->get('fileBrowserImageBrowseUrl'))
{
$config->filebrowserImageBrowseUrl = $params->get('fileBrowserImageBrowseUrl');
}

// File upload
if ($params->get('fileBrowserUploadUrl'))
{
$config->filebrowserUploadUrl = $params->get('fileBrowserUploadUrl');
}
$allow = new stdClass;
$allow->name = '/^.*$/';
$allow->styles = true;
$allow->attributes = true;
$allow->classes = true;

// File browse popup size
if ($params->get('fileBrowserWindowWidth'))
{
$config->filebrowserWindowWidth = $params->get('fileBrowserWindowWidth');
}
if ($params->get('fileBrowserWindowHeight'))
{
$config->filebrowserWindowHeight = $params->get('fileBrowserWindowHeight');
}
// Page templates
if ($params->get('templates_files') && is_object($params->get('templates_files')))
{
foreach ($params->get('templates_files') as $name => $template)
{
// Make sure templates exists
if (file_exists(app_path() . $template))
{
// Do we want to replace original ones
if ($params->get('templates_replace'))
{
$config->templates = array();
$config->templates_files = array();
}
array_push($config->templates, $name);
array_push($config->templates_files, $template);
}
}
// Make template definition a string
$config->templates = implode(',', $config->templates);
}
// Allow scripts
if ($params->get('allowScriptTags'))
{
$config->protectedSource[] = '/<script[^>]*>(.|\n)*<\/script>/ig';
}
// Allow php
if ($params->get('allowPhpTags'))
{
$config->protectedSource[] = '/<\?[\s\S]*?\?>/g';
$config->codemirror->mode = 'application/x-httpd-php';
}
// Set editor skin
//$config->skin = $params->get('skin', 'moono');
// Let the global filters handle what HTML tags are or aren't allowed
$config->allowedContent = true;*/
$config->htmlSupport = [
'allow' => [
$allow
]
];

return $config;
}
Expand Down
8 changes: 4 additions & 4 deletions app/Listeners/Editors/Ckeditor5/assets/js/ckeditor.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/Listeners/Editors/Ckeditor5/assets/js/ckeditor.js.map
View file

Large diffs are not rendered by default.

22 changes: 18 additions & 4 deletions app/Listeners/Editors/Ckeditor5/views/textarea.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,24 @@
<script type="text/javascript" src="{{ timestamped_asset('listeners/editors/ckeditor5/js/ckeditor.js') }}"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
ClassicEditor
.create(document.querySelector("#<?php echo $id; ?>"), JSON.parse(document.getElementById("<?php echo $id; ?>-ckeconfig").innerHTML))
.catch(error => { console.error( error ); }
);
let config = {
htmlSupport: {
allow: [
{
name: /.*/,
attributes: true,
classes: true,
styles: true
}
]
}
};
document.querySelectorAll('.ckeditor-content').forEach(function(el){
ClassicEditor
.create(el, config)
.catch(error => { console.error( error ); }
);
});
});
</script>
@endpush

0 comments on commit 614448c

Please sign in to comment.