How to add a plugin to CKeditor with a package ?

Permalink 3 users found helpful
5.7 use a nice way to add plugin to redactor but what about CKEditor ? HOw to updgrade my package ?

sebastienj
View Replies: View Best Answer
mnakalay replied on at Permalink Best Answer Reply
mnakalay
Hello,

First, you put your plugin somewhere in your package. Personally, I put it in js/plugins/pluginHandle.

Then you add a file register.js inside the folder just next to the plugin.js file

In that file you add:

if (typeof CKEDITOR !== 'undefined') {
    CKEDITOR.plugins.addExternal('pluginHandle', CCM_REL + '/packages/package_folder/js/plugins/pluginHandle/');
}


Then, in your package's controller, you need to activate the plugin.
You need those libraries:
use Concrete\Core\Editor\Plugin;
use Concrete\Core\Asset\AssetList as AssetList;
use \Concrete\Core\Support\Facade\Application as Application;

Then put this code in the on_start() function:
$app = Application::getFacadeApplication();
$editor = $app->make('editor');
$pluginManager = $editor->getPluginManager();
$al = AssetList::getInstance();
$al->register('javascript', 'editor/ckeditor4/pluginHandle',  'js/plugins/pluginHandle/register.js', array(), 'package_handle');
$al->registerGroup('editor/ckeditor4/pluginHandle', array( array('javascript', 'editor/ckeditor4/pluginHandle')));
$plugin = new Plugin();
$plugin->setKey('pluginHandle');
$plugin->setName('Plugin Name');
$plugin->requireAsset('editor/ckeditor4/pluginHandle');
if (!$pluginManager->isAvailable($plugin)) {
    $pluginManager->register($plugin);
}
if (!$pluginManager->isSelected($plugin)) {
    $key = $plugin->getKey();

Make sure you replace all instances of 'PluginHandle' with your actual plugin handle and 'Plugin Name' with the plugin name and 'package_handle' with the package handle.
It should work.
sebastienj replied on at Permalink Reply
sebastienj
Wow ! Thanks for this quick and complete reply. I will try it !
sharadkap replied on at Permalink Reply
Hello!

Is there a way to add stylesheets when registering the plugin?
A lot of CKEditor plugins have got CSS which is missed out when using this process to import in.
I am struggling to get for eg. codesnippet plugin working as it supports a lot CSS which is not picked up in the editor.
https://ckeditor.com/cke4/addon/codesnippet...
mnakalay replied on at Permalink Reply
mnakalay
It depends on what you mean. CSS the plugin needs while editing the content should be loaded by the plugin itself and so you shouldn't have anything special to do.

If you need to load the CSS when viewing the page, there is no real way for Concrete5 to now if a specific CK editor plugin was used. Once in viewing mode, it's all just HTML markup.

I actually built a C5 package to add a CKeditor code snippet plugin and it offers the following strategies:

1- load the files on every page
2- load the files on pages marked by a specific attribute

I vaguely tried to load the files only if the loading page contained a Content block but I was not happy with the result, can't remember why though.

If you're interested in my package you can contact me directly by PM.
mnakalay replied on at Permalink Reply
mnakalay
Sorry, I just thought about a third way that could really simplify things for you.

Create a template for the content block and add your JS and CSS files in the js and css folders for the template and you're done, they will get loaded every time you apply the template to your content block
sharadkap replied on at Permalink Reply
Thanks! This is exactly what I ended up doing. Thanks for your help. Somehow this fell off my radar. The C5 messages are ending up in my junk folder in gmail. I have now marked it nonspam. Thanks for your help!
JohntheFish replied on at Permalink Reply
JohntheFish
If your purpose is for code sections, rather than use a CK editor plugin, you could use my Syntax Anywhere addon.
https://www.concrete5.org/marketplace/addons/syntax-anywhere1...

It can pick out sections of code marked in a variety of ways including [] code parenthesis and apply syntac highlighting. It is completely agnostic about what block is used to enter the code fragments. The demo video is for 5.7. It works even more smoothly with v8.