I know how to add an extra plugin to CKEditor CDN. But the problem is, the plugin "templates" is already loaded.
How can I change the templates of the "templates" plugin when the editor is loaded through the CDN?
https://ckeditor.com/cke4/addon/templates
Related
I am creating a custom system plugin for Joomla 3.9. In the dashboard I need to include CSS for the same. When the plugin is active/Enabled, I am able to do the same but when the plugin is inactive, CSS file is not getting included.
I've just started using CKEditor 4 (having previously used version 1 a long time ago). I like that I can build it online and download it, but when I do that, I then use the toolbar config tool to set up my toolbar.
What happens if I want to add or remove a specific plugin in future though? Will I have to build a completely new CKEditor using the build tool, then download it to replace the existing one, and then reconfigure my toolbar? I don't really want to have to reconfig the toolbar each time.
There are a couple of plugins that I might want to use later, so I'm just trying to figure out whether I need to include them now, or can I add them in with no hassle later on?
Remove plugin
Removing is quite easy. CKEditor provide configuration option where you can define plugins to be remove. https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-removePlugins
E.g.
CKEDITOR.replace( 'editor', {
removePlugins: 'basicstyles,justify'
} );
You need to remember that, removing plugins might break dependancies. E.g. you wish to remove clipboard plugin, but you want to load pastefromword plugin. Paste from Word requires clipboard for proper work, removing clipboard will break loading this plugin. Adequate error will be thrown in the console.
Plugin option
Alternative solution is to define plugins which you wish to load in editor. You need to use plugin option in configuration https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-plugins. This will only load defined plugins together with its dependancies. E.g. In case like above, when you define pastefromword plugin to be loaded, this will also load clipboard plugin.
Adding plugin
There is configuration option for loading extra plugins. Where you can define names of plugins to be loaded: https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-extraPlugins. Here situation is a little bit more complicated because plugin needs to be available for the editor. When you wish to load plugin you need to make 2 things:
Load plugin (more detail description is below)
Add plugin for editor instance, with extraPlugins configuration option.
There might be situation that you have few editors on one page and every of editor will have different available plugins. In such case all plugins will be loaded, but no all will be used in specific editor instance.
Define plugin inline in code
If you wrote your own plugin you might want to define it directly in JS. You just need to take care to be defined before initialisation of the editor.
https://codepen.io/msamsel/pen/NwGJYL
CKEDITOR.plugins.add( 'testplugin', {
init: function( editor ) {
console.log( 'plugin loaded' );
// adding more logic
}
} )
CKEDITOR.replace( 'editor', {
extraPlugins: 'testplugin'
} );
Load plugin from local resources
If you wish to load plugin which you download/create separately, you can create proper folder structure together with CKEditor. Such added plugins will be available and possible to add through extraPlugins.
ckeditor root/
plugins/
<plugin name>/
icons/
<plugin name>.png
dialogs/
<dialog file>.js
plugin.js
A little bit more you can find at the beginning of tutorial for creating plugins: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/plugin_sdk_sample_1
Load plugin from external resources
Plugin might be also loaded form external sources through this method https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.resourceManager-method-addExternal
E.g.
CKEDITOR.plugins.addExternal( 'timestamp', 'https://sdk.ckeditor.com/samples/assets/plugins/timestamp/', 'plugin.js' );
CKEDITOR.replace( 'editor1', {
extraPlugins: 'timestamp'
} );
I have a custom CKEditor build. Eventually, after I've done code changes, which I don't want to lose, I decided that not all of the plugins, which I included in the initial build, were necessary, so I removed some of them through the config.js file by using config.removePlugins.
My questions are:
Does this method improve the loading speed of the editor at all or does it remove the plugins after they have been loaded?
If the first is true, does it only affect the loading of resources from the plugins folder or does it also affect the loaded content of the ckeditor.js file?
If you downloaded the Full package from CKEditor download page then while loading the editor, the whole package gets loaded even if config.removePlugins is used.
The less plugins you have, the faster the editor loads. This is the general rule. Another one is that the editor should be served in release and not the source mode.
The best practice is to get the editor source code from here, create your own fork which you can update to newest stable branches, create your custom plugins and build your own custom editor release according to this link.
This way you will get all the plugins you want and the editor code will be minified, obfuscated and combined into a single ckeditor.js file which should guarantee the fastest load time.
I have upgraded my CKEditor in my ajaxplorer project.
I want to add document property in ckeditor 4 and I have tried in all ways. by adding code in class.AjxpCkEditor.js aven ckeditor.js but yet succeed. There was no folder for document property as "docprops" which was having in older version. Then I have copied that folder and done some changes in class.AjxpCkEditor.js but its not working even I have done change in ckeditor.js but not working.
This plugin is not included in any of the 3 predefined presets, so you need to build your own version of CKEditor using the online builder.
Here's the plugin: http://ckeditor.com/addon/docprops and plugins installation instructions.
We're using CKEditor on a project where assets are handled by Grunt.js.
Grunt manage and compile CKEditor JS+CSS alongside other libs and our own code.
We've chosen to use an iconic font for our toolbar elements.
In production, assets are uploaded on S3.
Unfortunately, CKEditor has a "loader" feature which loads skin and icons files, based on the current path. Of course, the skin (the basic "moono", already loaded) and icons are not used.
Is there a way to disable this "loader" ?