How to add a plugin to CKeditor with a package ?
Permalink 3 users found helpfulIs 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...
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.
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
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.
I am following your steps again to add a custom plugin to the ckeditor and i just seem to get a 404 error on the register.js file when I try and edit a content block. here is my code:
public function on_start()
{
$app = Application::getFacadeApplication();
$editor = $app->make('editor');
$pluginManager = $editor->getPluginManager();
$al = AssetList::getInstance();
$al->register('javascript', 'editor/ckeditor4/us_spelling_button', 'js/plugins/us_spelling_button/register.js', array(), 'us_spelling_button');
$al->registerGroup('editor/ckeditor4/us_spelling_button', array( array('javascript', 'editor/ckeditor4/us_spelling_button')));
$plugin = new Plugin();
$plugin->setKey('us_spelling_button');
$plugin->setName('US Spelling Button');
$plugin->requireAsset('editor/ckeditor4/us_spelling_button');
if (!$pluginManager->isAvailable($plugin)) {
$pluginManager->register($plugin);
}
if (!$pluginManager->isSelected($plugin)) {
$key = $plugin->getKey();
$pluginManager->select($key);
}
}
The Error i get is:
GEThttp://localhost/sapphire2017/concrete/js/plugins/us_spelling_butto... 404 (Not Found)
Yes i have a package and a plugin within the package with the same name. I have now changed the name to "spelling_button" on both the package and plugin
$al->register('javascript', 'editor/ckeditor4/spelling_button', 'js/plugins/spelling_button/register.js', array(), 'package_handle');
'package_handle' should be replace with your package handle so
$al->register('javascript', 'editor/ckeditor4/spelling_button', 'js/plugins/spelling_button/register.js', array(), 'spelling_button');
Another thing is CKeditor is only available from Concrete5 8 so your $appVersionRequired should be at least 8, not 5.7.
your file spelling_button.js should be renamed plugin.js
In your register.js you have
CKEDITOR.plugins.addExternal('spelling_button', CCM_REL + '/packages/spelling_button/js/spelling_button/');
it should be
CKEDITOR.plugins.addExternal('usenglishbutton', CCM_REL + '/packages/spelling_button/js/plugins/spelling_button/');
the first argument should be the name given to your plugin in the file plugin.js
And in the path provided in the second argument, you forgot /plugins
I think it should work now
Thanks for your help! I really appreciate it.
I have made the changes above but i am still getting an error. It now cant find the plugin.js file.
VM15775:98 GET http://localhost/sapphire2017/concrete/js/ckeditor4/vendor/plugins/spelling_button/plugin.js?t=HBDD net::ERR_ABORTED
The plugin code itself is wrong so I corrected it partially. The command was not being called, now it is. The function to get selected text was wrong it is now corrected.
It is still not working though as it is complaining that .select() is not a function. CKEditor is not something I know that well so I'll leave it to you to fix the plugin related errors that are left. As far as installation and adding to the editor are concerned, it all works.
And you shouldn't call your dictionary the way you are at the moment, you should be using a relative path and include the file with your plugin.
The package is attached to this message
Thanks again for your time. You have been a huge help!!
Jack
For those looking for this kind of solution, it's here:http://www.concrete5.org/marketplace/addons/ckeditor-pluginator/...
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:
Then, in your package's controller, you need to activate the plugin.
You need those libraries:
Then put this code in the on_start() function:
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.