Hi all,
This is tutorial load external plugins to CKEDITOR. I have just to create a plugin in the other directory ckeditor/plugins and load to CKEditor successfull.
The first i will take structure folder directory below :
-- ckeditor -- myplugins // all plugins external will defined here -- helloworld // plugin helloworld -- helloworld.html -- plugin.js -- images -- myconfig.js // custom config of ckeditor
Step 1
: edit config.js in the ckeditor directory :
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.customConfig = "../myconfig.js";
};
Step 2
code myconfig.js to load external plugin and config for toolbar,...
// get path of directory ckeditor
var basePath = CKEDITOR.basePath;
basePath = basePath.substr(0, basePath.indexOf("ckeditor/"));
load external plugin
(function() {
CKEDITOR.plugins.addExternal('helloworld',basePath+'myplugins/helloworld/', 'plugin.js');
})();
// config for toolbar, extraPlugins,...
CKEDITOR.editorConfig = function( config )
{
config.extraPlugins = 'helloworld';
// Can use default toolbar or custom toolbar if you want
// config.toolbar_Basic.push(['helloworld.btn']);
config.toolbar_MyToolbarSet =
[
['Bold','Italic','-'],['helloworld.btn']
];
config.toolbar_MyToolbarSet.push(['helloworld.btn']);
};
Step 3
code of helloworld plugin
CKEDITOR.plugins.add('helloworld',
{
requires : ['iframedialog'],
init : function(editor) {
var pluginName = 'helloworld';
var mypath = this.path;
editor.ui.addButton(
'helloworld.btn',
{
label : "My Plug-in",
command : 'helloworld.cmd',
icon : mypath + 'images/helloworld.gif'
}
);
var cmd = editor.addCommand('helloworld.cmd', {exec:showDialogPlugin});
CKEDITOR.dialog.addIframe(
'helloworld.dlg',
'Hello Title',
mypath + 'helloworld.html',
400,
300,
function(){
}
);
}
}
);
function showDialogPlugin(e){
e.openDialog('helloworld.dlg');
}
Step 4
helloworld.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>HelloWorl CKEditor</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var CKEDITOR = window.top.CKEDITOR || {};
</script>
</head>
<body>
<h3>This is test plugin new dialog</h3>
</body>
</html>
Step 5
The last, only test how about your plugins work? I created a file test.html in ckeditor directory :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>This is tutorial load external plugin</title> <meta content="text/html; charset=utf-8" http-equiv="content-type"/> <script type="text/javascript" src="ckeditor.js"></script> </head> <body> <h1>Custome plugin CKEditor</h1> <textarea cols="80" id="test" name="editor1" rows="10"> This is test content ckeditor </textarea> <script type="text/javascript"> var editor = CKEDITOR.replace( 'test' ); </script> </body> </html>
Re: Tutorial create external plugin for CKEDITOR
The addExternal docs describe a bunch of different ways of specifying plugins (including addExternal('plugina,pluginb', path)), none of which work. In fact, all but one of the examples they show don't work! The call to addExternal that you show here is the only form that works. Just hoping to save somebody some time!
Also, if you're using ckeditor_basic to prevent loading ckeditor code until it's needed, you can't just start adding external resources. The problem is that CKEDITOR.plugin still doesn't exist when loadFullCore returns. If you want to add some resources right after calling loadFullCore, you must wait for the loaded event:
function after_loaded(fn) { if(CKEDITOR.loadFullCore) { CKEDITOR.on('loaded', function () { fn() }); CKEDITOR.loadFullCore(); } else { fn(); } } function start_editor(editor_id) { CKEDITOR.replaceByClassEnabled = false; var mydir = location.pathname.substring(0, location.pathname.lastIndexOf('/')); // the following call dies with "CKEDITOR.plugins undefined" if we don't wait for the loaded event. CKEDITOR.plugins.addExternal('autogrow', mydir + '/plugins/autogrow/', 'plugin.js'); editor = CKEDITOR.replace(editor_id, { contentsCss: mydir + '/content.css' } ); } $('#editor1').click(function (evt) { after_loaded(start_editor) });Re: Tutorial create external plugin for CKEDITOR
One thing to note about your directories passed to addExternal.
Be sure to have a trailing slash at the end of the directories or the getUrl() method used to generate the request URL will include the timestamp. We ran into this at first when trying to use this api.
unable to add an external plugin
Sir am unable to add an external plugin, i followed all the steps but am unsucessful.
kindly help ! thanks!
call ckeditor plugin while loading page
I want to load a ckeditor plugin automatically without any click on button of ckeditor plugin. is there any method for this issue? so that i load ckeditor plugin on loading the page.
I created this tutorial long
I created this tutorial long time ago. For now, i move to do another things and don't work with CKeditot anymore.
Tutorial link
Have you made a video for this tutorial?.If you did please submit the video on any video submission site and give me the link.That will be helpful for me.Thank's for the tropic.