Posted by Benjamin Birkenhake on January 9, 2012 at 9:49am
Hi there,
I want to add my own Button to the CKeditor, which adds special HTML/XML.
In order to do so, I first followed the CKEditor Plugin described here:
http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin
After that I "just" need the Plugin and my Button to be activateable via the WISIWIG-Module.
But I haven't found any documentation on that … within the source I found the editors/ckeditor.inc
which seems to define the buttons using the hook_wysiwyg_plugin().
But I have no real clue, what to do next …
Has anyone an Idea, how to do that?
Greetings,
ben_
Comments
Have a look at all the
Have a look at all the wysiwyg modules. Some of them are implemting there own buttons.
http://drupalmodules.com/m?title=wysiwyg
Ah. Ohm.
Ah. Ohm. I am already using the Wisiwig-Module
http://drupal.org/project/Wysiwyg
Together with the CKEditor.
I thought this group here is focused on that Module …
--
anmut und demut
Hi,I add buttons using
Hi,
I add buttons using "hook_wysiwyg_plugin" as you wrote.
I take the code from a modulr that add code-button: http://drupal.org/project/wysiwyg_code_button
I've added the following function in my module:
function MYMODULE_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'new-button' => array(
'url' => 'http://......',
'path' => drupal_get_path('module', 'MYMODULE') . '/ckeditor/new-button',
'buttons' => array(
'new-button' => t('add explaintation'),
),
'load' => TRUE,
),
'new-button2' => array(
'url' => 'http://......',
'path' => drupal_get_path('module', 'MYMODULE') . '/ckeditor/new-button2',
'buttons' => array(
'new-button2' => t('add source'),
),
'load' => TRUE,
),
}
}
Works!
Thanks a lot! Works! Finally …
--
anmut und demut
Goes blank
Hi Benjamin, I tried exactly the same thing with the time stamp plugin as a starting point to get the principle working. But my CKeditor text area goes completely blank. Did you put the timestamp module in there exactly as it was done on http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin or did you tweak it somehow?
This is my custom module...
function custom_wysiwyg_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'new-button' => array(
'url' => 'http://www.popolo.se',
'path' => drupal_get_path('module', 'custom_wysiwyg').'/ckeditor/timestamp',
'buttons' => array(
'new-button' => t('Timestamp'),
),
'load' => TRUE,
),
);
break;
}
}
So I've figured out that
So I've figured out that probably it should be "timestamp", instead of "new-button"
function custom_wysiwyg_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'timestamp' => array(
'url' => 'http://www...',
'path' => drupal_get_path('module', 'custom_wysiwyg').'/ckeditor/timestamp',
'buttons' => array(
'timestamp' => t('Timestamp'),
),
'load' => TRUE,
),
);
break;
}
also I noticed that
echo drupal_get_path('module', 'custom_wysiwyg');renders the path twice so I added an absolute path instead. Now I no longer get a blank ckeditor. But the timestamp button doesn't show. Hopefully I will solve this in this life or the next...Hey I found the problem
In the timestamp plugin from http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin
line 30
editor.ui.addButton( 'Timestamp',should beeditor.ui.addButton( 'timestamp',. That is with at lower case "t" in "timestamp" and it works!// Create a toolbar button that executes the plugin command.// http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.html#addButton
editor.ui.addButton( 'timestamp',
{
// Toolbar button tooltip.
label: 'Insert Timestamp',
// Reference to the plugin command name.
command: 'insertTimestamp',
// Button's icon file path.
icon: this.path + 'images/timestamp.png'
//icon: 'images/timestamp.png'
} );
I tried the same, but for me
I tried the same, but for me nothing is happening. The option is not even displaying in Buttons and Plugins.
This is my code
plugin.js
CKEDITOR.plugins.add( 'timestamp',
{
init: function( editor )
{
editor.addCommand( 'insertTimestamp',
{
exec : function( editor )
{
var timestamp = new Date();
editor.insertHtml( 'The current date and time is: ' + timestamp.toString() + '' );
}
});
editor.ui.addButton( 'Timestamp',
{
label: 'Insert Timestamp',
command: 'insertTimestamp',
icon: this.path + 'timestamp.png'
} );
}
} );
config.js
CKEDITOR.editorConfig = function( config )
{
CKEDITOR.config.toolbar_Basic = 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', 'Timestamp';
config.toolbar = 'Basic';
config.startupOutlineBlocks = true;
config.extraPlugins = "timestamp";
};
timestamp.module
<?phpfunction timestamp_wysiwyg_plugin($editor, $version) {
switch ($editor) {
case 'ckeditor':
return array(
'timestamp' => array(
'url' => 'http://www...',
'path' => drupal_get_path('module', 'timestamp').'/ckeditor/timestamp',
'buttons' => array(
'timestamp' => t('Timestamp'),
),
'load' => TRUE,
),
);
break;
}
?>
Wow, thanks for pointing out
Wow, thanks for pointing out the lower case 't'! This really had me going in circles....
hi, I am new to drupal, I
hi,
I am new to drupal, I wanna add a custom button to ckeditor that will add html tags to the selected area. As a first step , I followed the link given and wrote the code to add the button, but the button is not displaying. Can someone please help me?
Greetings
I can't get this to work
I can't get this to work either. The check boxes show up in Buttons and Plugins but when I go to edit a page the buttons are not in the toolbar. What am I doing wrong?
function add_plugins_wysiwyg_plugin($editor, $version) {
//add_plugins_add_settings('wysiwyg' . $editor);
$plugins = array();
switch ($editor) {
case 'ckeditor':
$plugins['video'] = array(
'path' => drupal_get_path('module', 'add_plugins') . '/plugins/video/',
'buttons' => array('video' => t('Video')),
'url' => 'http://alfonsoml.blogspot.com.au/2011/01/html5-video-plugin-for-ckeditor.html',
'load' => TRUE,
'filename' => 'plugin.js',
'internal' => FALSE,
);
$plugins['youtube'] = array(
'path' => drupal_get_path('module', 'add_plugins') . '/plugins/youtube/',
'buttons' => array('youtube' => t('Youtube')),
'load' => TRUE,
'filename' => 'plugin.js',
'internal' => FALSE,
);
break;
case 'fckeditor':
$plugins['video'] = array(
'path' => drupal_get_path('module', 'add_plugins') . '/plugins/video/',
'buttons' => array('video' => t('Video')),
'url' => 'http://alfonsoml.blogspot.com.au/2011/01/html5-video-plugin-for-ckeditor.html',
'load' => TRUE,
'filename' => 'plugin.js',
);
break;
}
return $plugins;
}