Do anyone know how to add a custom item in the toolbar and fire our own custom code for that ?
Regds, noneda
Hi, After some hours investigating this, I could achieve what I was looking for: A custom Toolbar Button which opens a popup window with my custom made Picture Gallery dialog, made on .NET .
Hope this helps, here's what I've made (procedures and code): 1 - Create a new folder for your plugin on /ckeditor/plugins folder. ex: /ckeditor/plugins/newplugin 2 - Inside this newplugin folder, create a JS file: ex. plugin.js 3 - Copy a toolbar button icon image to this newplugin folder. This can be a gif/jpg/etc.. 4 - Edit the /ckeditor/config.js.
If you are using CKEditor version 3.3.X (and maybe on some earlier versions), your /ckeditor/config.js file looks like this:
In my case, I have a customized toolbar, showing some ckeditor toolbar buttons only. Also, I've specified my newplugin in this section. My /ckeditor/config.js file looks like this:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
//--------------------
// Referencing the new plugin
config.extraPlugins = 'newplugin';
// Define the toolbar buttons you want to have available
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
['Newplugin', 'Preview'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Scayt'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat']
];
};
Finally, here's my /ckeditor/plugins/newplugin/plugin.js file:
CKEDITOR.plugins.add('newplugin',
{
init: function (editor) {
var pluginName = 'newplugin';
editor.ui.addButton('Newplugin',
{
label: 'My New Plugin',
command: 'OpenWindow',
icon: CKEDITOR.plugins.getPath('newplugin') + 'mybuttonicon.gif'
});
var cmd = editor.addCommand('OpenWindow', { exec: showMyDialog });
}
});
function showMyDialog(e) {
window.open('/Default.aspx', 'MyWindow', 'width=800,height=700,scrollbars=no,scrolling=no,location=no,toolbar=no');
}
I'm using CKEditor version 3.3.2
Good luck, and sorry for my bad english. JL (Portugal)
I want to change the function and add this function :
Add "Hello" into the ckeditor when i press my new button.
Do you have an idea ?
Hi, Inserting some text into ckeditor is quite simple. You can use exactly the same code posted above. Just modify the function showMyDialog(e) . Instead of opening a dialog window, use insertHtml function:
function showMyDialog(e) {
var oEditor = CKEDITOR.instances.editor1;
oEditor.insertHtml('Hello');
}
NOTE: CKEDITOR.instances.editor1 'editor1' is the textarea Id used by ckeditor.
Re: How to add custom toolbar item ?
Hi,
After some hours investigating this, I could achieve what I was looking for: A custom Toolbar Button which opens a popup window with my custom made Picture Gallery dialog, made on .NET .
Hope this helps, here's what I've made (procedures and code):
1 - Create a new folder for your plugin on /ckeditor/plugins folder. ex: /ckeditor/plugins/newplugin
2 - Inside this newplugin folder, create a JS file: ex. plugin.js
3 - Copy a toolbar button icon image to this newplugin folder. This can be a gif/jpg/etc..
4 - Edit the /ckeditor/config.js.
If you are using CKEditor version 3.3.X (and maybe on some earlier versions), your /ckeditor/config.js file looks like this:
In my case, I have a customized toolbar, showing some ckeditor toolbar buttons only.
Also, I've specified my newplugin in this section.
My /ckeditor/config.js file looks like this:
Finally, here's my /ckeditor/plugins/newplugin/plugin.js file:
I'm using CKEditor version 3.3.2
Good luck, and sorry for my bad english.
JL
(Portugal)
Re: How to add custom toolbar item ?
I have a question.
I want to change the function and add this function :
Add "Hello" into the ckeditor when i press my new button.
Do you have an idea ?
Re: How to add custom toolbar item ?
Hi,
Inserting some text into ckeditor is quite simple.
You can use exactly the same code posted above. Just modify the function showMyDialog(e) .
Instead of opening a dialog window, use insertHtml function:
NOTE: CKEDITOR.instances.editor1
'editor1' is the textarea Id used by ckeditor.
Good luck.
Re: How to add custom toolbar item ?
thanks
I find the solution between my answer and your respons.
Here find my solution :
You add a directory name Hello in the plugin folder.
Add a plugin.js into this directory and also logo_ckeditor.png with 16*16 px