Bringing CKEditor to Drupal 5
At the moment, there is no pre-packaged way to add CKEditor to Drupal 5. The following is a result of my attempt to port the Drupal 6 wysiwyg module's CKEditor plugin to the Drupal 5 version. It's ugly, but accomplishes my goal of getting CKEditor going in D5 without having to create a new module from scratch or try to port the rather large D6 module for CKEditor.
Step 1) Create ckeditor.inc (this is based off the D5 version of fckeditor.inc and the D6 version of ckeditor.inc), and place it under wysiwyg/editors
<?php
// $Id: $
/**
* @file
* Editor integration functions for CKeditor.
*/
/**
* Plugin implementation of hook_editor().
*/
function wysiwyg_ckeditor_editor() {
$editor = array();
$editor['ckeditor'] = array(
'title' => 'CKeditor',
'vendor url' => 'http://ckeditor.com/',
'download url' => 'http://ckeditor.com/download',
'library path' => wysiwyg_get_path('ckeditor'),
'libraries' => array(
'' => array(
'title' => 'Default',
'files' => array('ckeditor.js'),
),
),
'version callback' => 'wysiwyg_ckeditor_version',
'themes callback' => 'wysiwyg_ckeditor_themes',
'settings callback' => 'wysiwyg_ckeditor_settings',
'plugin callback' => 'wysiwyg_ckeditor_plugins',
'versions' => array(
3.2 => array(
'js files' => array('ckeditor.js'),
),
),
);
return $editor;
}
/**
* Detect editor version.
*
* @param $editor
* An array containing editor properties as returned from hook_editor().
*
* @return
* The installed editor version.
*/
function wysiwyg_ckeditor_version($editor) {
$library = $editor['library path'] .'/ckeditor.js';
$library = fopen($library, 'r');
$max_lines = 100;
while ($max_lines && $line = fgets($library, 60)) {
if (preg_match('@,version:\'([\d\.]+)\',revision@', $line, $version)) {
fclose($library);
return $version[1];
}
$max_lines--;
}
fclose($library);
}
/**
* Return runtime editor settings for a given wysiwyg profile.
*
* @param $editor
* A processed hook_editor() array of editor properties.
* @param $config
* An array containing wysiwyg editor profile settings.
* @param $theme
* The name of a theme/GUI/skin to use.
*
* @return
* A settings array to be populated in
* Drupal.settings.wysiwyg.configs.{editor}
*/
function wysiwyg_ckeditor_settings($editor, $config, $theme) {
$settings = array(
'baseHref' => $GLOBALS['base_url'] . '/',
'width' => '100%',
// For better compatibility with smaller textareas.
'resize_minWidth' => 450,
'height' => 420,
// @todo Do not use skins as themes and add separate skin handling.
'theme' => 'default',
'skin' => !empty($theme) ? $theme : 'kama',
// By default, CKEditor converts most characters into HTML entities. Since
// it does not support a custom definition, but Drupal supports Unicode, we
// disable at least the additional character sets. CKEditor always converts
// XML default characters '&', '<', '>'.
// @todo Check whether completely disabling ProcessHTMLEntities is an option.
'entities_latin' => FALSE,
'entities_greek' => FALSE,
);
// Add HTML block format settings; common block formats are already predefined
// by CKEditor.
if (isset($config['block_formats'])) {
$block_formats = explode(',', drupal_strtolower($config['block_formats']));
$predefined_formats = array('h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'address', 'div');
foreach (array_diff($block_formats, $predefined_formats) as $tag) {
$tag = trim($tag);
$settings["format_$tag"] = array('element' => $tag);
}
$settings['format_tags'] = implode(';', $block_formats);
}
if (isset($config['apply_source_formatting'])) {
$settings['apply_source_formatting'] = $config['apply_source_formatting'];
}
if (isset($config['css_setting'])) {
// Versions below 3.0.1 could only handle one stylesheet.
if (version_compare($editor['installed version'], '3.0.1.4391', '<')) {
if ($config['css_setting'] == 'theme') {
$settings['contentsCss'] = reset(wysiwyg_get_css());
}
elseif ($config['css_setting'] == 'self' && isset($config['css_path'])) {
$settings['contentsCss'] = strtr($config['css_path'], array('%b' => base_path(), '%t' => path_to_theme()));
}
}
else {
if ($config['css_setting'] == 'theme') {
$settings['contentsCss'] = wysiwyg_get_css();
}
elseif ($config['css_setting'] == 'self' && isset($config['css_path'])) {
$settings['contentsCss'] = explode(',', strtr($config['css_path'], array('%b' => base_path(), '%t' => path_to_theme())));
}
}
}
if (isset($config['language'])) {
$settings['language'] = $config['language'];
}
if (isset($config['resizing'])) {
$settings['resize_enabled'] = $config['resizing'];
}
if (isset($config['toolbar_loc'])) {
$settings['toolbarLocation'] = $config['toolbar_loc'];
}
if (!empty($config['buttons'])) {
$extra_plugins = array();
$settings['toolbar'] = array();
$plugins = wysiwyg_get_plugins($editor['name']);
foreach ($config['buttons'] as $plugin => $buttons) {
foreach ($buttons as $button => $enabled) {
// Iterate separately over buttons and extensions properties.
foreach (array('buttons', 'extensions') as $type) {
// Skip unavailable plugins.
if (!isset($plugins[$plugin][$type][$button])) {
continue;
}
// Add buttons.
if ($type == 'buttons') {
$settings['toolbar'][] = $button;
}
// Add external Drupal plugins to the list of extensions.
if ($type == 'buttons' && !empty($plugins[$plugin]['proxy'])) {
$extra_plugins[] = $button;
}
// Add external plugins to the list of extensions.
elseif ($type == 'buttons' && empty($plugins[$plugin]['internal'])) {
$extra_plugins[] = $plugin;
}
// Add internal buttons that also need to be loaded as extension.
elseif ($type == 'buttons' && !empty($plugins[$plugin]['load'])) {
$extra_plugins[] = $plugin;
}
// Add plain extensions.
elseif ($type == 'extensions' && !empty($plugins[$plugin]['load'])) {
$extra_plugins[] = $plugin;
}
// Allow plugins to add or override global configuration settings.
if (!empty($plugins[$plugin]['options'])) {
$settings = array_merge($settings, $plugins[$plugin]['options']);
}
}
}
}
if (!empty($extra_plugins)) {
$settings['extraPlugins'] = implode(',', $extra_plugins);
}
// For now, all buttons are placed into one row.
if (!empty($settings['toolbar'])) {
$settings['toolbar'] = array($settings['toolbar']);
}
}
return $settings;
}
/**
* Determine available editor themes or check/reset a given one.
*
* @param $editor
* A processed hook_editor() array of editor properties.
* @param $profile
* A wysiwyg editor profile.
*
* @return
* An array of theme names. The first returned name should be the default
* theme name.
*/
function wysiwyg_ckeditor_themes($editor, $profile) {
$path = $editor['library path'] . '/skins/';
if (file_exists($path) && ($dir_handle = opendir($path))) {
$themes = array();
while ($file = readdir($dir_handle)) {
if (is_dir($path . $file) && substr($file, 0, 1) != '.' && $file != 'CVS') {
$themes[] = $file;
}
}
closedir($dir_handle);
return !empty($themes) ? $themes : array('default');
}
else {
return array('default');
}
}
/**
* Return internal plugins for CKeditor; semi-implementation of hook_wysiwyg_plugin().
*/
function wysiwyg_ckeditor_plugins($editor) {
$plugins = array(
'default' => array(
'buttons' => array(
'Bold' => t('Bold'), 'Italic' => t('Italic'), 'Underline' => t('Underline'),
'Strike' => t('Strike-through'),
'JustifyLeft' => t('Align left'), 'JustifyCenter' => t('Align center'), 'JustifyRight' => t('Align right'), 'JustifyBlock' => t('Justify'),
'BulletedList' => t('Bullet list'), 'NumberedList' => t('Numbered list'),
'Outdent' => t('Outdent'), 'Indent' => t('Indent'),
'Undo' => t('Undo'), 'Redo' => t('Redo'),
'Link' => t('Link'), 'Unlink' => t('Unlink'), 'Anchor' => t('Anchor'),
'Image' => t('Image'),
'TextColor' => t('Forecolor'), 'BGColor' => t('Backcolor'),
'Superscript' => t('Superscript'), 'Subscript' => t('Subscript'),
'Blockquote' => t('Blockquote'), 'Source' => t('Source code'),
'HorizontalRule' => t('Horizontal rule'),
'Cut' => t('Cut'), 'Copy' => t('Copy'), 'Paste' => t('Paste'),
'PasteText' => t('Paste Text'), 'PasteFromWord' => t('Paste from Word'),
'ShowBlocks' => t('Show blocks'),
'RemoveFormat' => t('Remove format'),
'SpecialChar' => t('Character map'),
'Format' => t('HTML block format'), 'Font' => t('Font'), 'FontSize' => t('Font size'), 'Styles' => t('Font style'),
'Table' => t('Table'),
'SelectAll' => t('Select all'), 'Find' => t('Search'), 'Replace' => t('Replace'),
'Flash' => t('Flash'), 'Smiley' => t('Smiley'),
'CreateDiv' => t('Div container'),
'Maximize' => t('Maximize'),
'SpellChecker' => t('Check spelling'), 'Scayt' => t('Check spelling as you type'),
'About' => t('About'),
),
'internal' => TRUE,
),
);
return $plugins;
}
Step 2) Create ckeditor.js (this is based almost entirely off the D6 version of the same file with a few changes)
/**
* Attach this editor to a target element.
*/
(function($) {
Drupal.wysiwyg.editor.init.ckeditor = function(settings) {
// Plugins must only be loaded once. Only the settings from the first format
// will be used but they're identical anyway.
var registeredPlugins = {};
for (var format in settings) {
if ((Drupal.settings.wysiwyg.plugins) && (Drupal.settings.wysiwyg.plugins[format])) {
// Register native external plugins.
// Array syntax required; 'native' is a predefined token in JavaScript.
for (var pluginName in Drupal.settings.wysiwyg.plugins[format]['native']) {
if (!registeredPlugins[pluginName]) {
var plugin = Drupal.settings.wysiwyg.plugins[format]['native'][pluginName];
CKEDITOR.plugins.addExternal(pluginName, plugin.path, plugin.fileName);
registeredPlugins[pluginName] = true;
}
}
// Register Drupal plugins.
for (var pluginName in Drupal.settings.wysiwyg.plugins[format].drupal) {
if (!registeredPlugins[pluginName]) {
Drupal.wysiwyg.editor.ckeditor.addPlugin(pluginName, Drupal.settings.wysiwyg.plugins[format].drupal[pluginName], Drupal.settings.wysiwyg.plugins.drupal[pluginName]);
registeredPlugins[pluginName] = true;
}
}
}
}
};
Drupal.wysiwyg.editor.attach.ckeditor = function(context, params, settings) {
// Apply editor instance settings.
CKEDITOR.config.customConfig = '';
settings.on = {
instanceReady: function(ev) {
var editor = ev.editor;
// Get a list of block, list and table tags from CKEditor's XHTML DTD.
// @see http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Output_Formatting.
var dtd = CKEDITOR.dtd;
var tags = CKEDITOR.tools.extend({}, dtd.$block, dtd.$listItem, dtd.$tableContent);
// Set source formatting rules for each listed tag except <pre>.
// Linebreaks can be inserted before or after opening and closing tags.
if (settings.apply_source_formatting) {
// Mimic FCKeditor output, by breaking lines between tags.
for (var tag in tags) {
if (tag == 'pre') {
continue;
}
this.dataProcessor.writer.setRules(tag, {
indent: true,
breakBeforeOpen: true,
breakAfterOpen: false,
breakBeforeClose: false,
breakAfterClose: true
});
}
}
else {
// No indents or linebreaks;
for (var tag in tags) {
if (tag == 'pre') {
continue;
}
this.dataProcessor.writer.setRules(tag, {
indent: false,
breakBeforeOpen: false,
breakAfterOpen: false,
breakBeforeClose: false,
breakAfterClose: false
});
}
}
},
pluginsLoaded: function(ev) {
// Override the conversion methods to let Drupal plugins modify the data.
var editor = ev.editor;
if ((Drupal.settings.wysiwyg.plugins) && (editor.dataProcessor && Drupal.settings.wysiwyg.plugins[params.format])) {
editor.dataProcessor.toHtml = CKEDITOR.tools.override(editor.dataProcessor.toHtml, function(originalToHtml) {
// Convert raw data for display in WYSIWYG mode.
return function(data, fixForBody) {
for (var plugin in Drupal.settings.wysiwyg.plugins[params.format].drupal) {
if (typeof Drupal.wysiwyg.plugins[plugin].attach == 'function') {
data = Drupal.wysiwyg.plugins[plugin].attach(data, Drupal.settings.wysiwyg.plugins.drupal[plugin], editor.name);
data = Drupal.wysiwyg.instances[params.field].prepareContent(data);
}
}
return originalToHtml.call(this, data, fixForBody);
};
});
editor.dataProcessor.toDataFormat = CKEDITOR.tools.override(editor.dataProcessor.toDataFormat, function(originalToDataFormat) {
// Convert WYSIWYG mode content to raw data.
return function(data, fixForBody) {
data = originalToDataFormat.call(this, data, fixForBody);
for (var plugin in Drupal.settings.wysiwyg.plugins[params.format].drupal) {
if (typeof Drupal.wysiwyg.plugins[plugin].detach == 'function') {
data = Drupal.wysiwyg.plugins[plugin].detach(data, Drupal.settings.wysiwyg.plugins.drupal[plugin], editor.name);
}
}
return data;
};
});
}
},
focus: function(ev) {
Drupal.wysiwyg.activeId = ev.editor.name;
}
};
//format1 = filtered
//format2 = php
//format3 = full
if(params.format == "format1"){
CKEDITOR.config.toolbar = [
['Source'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
['Maximize', 'ShowBlocks'],
'/',
['Format'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor','LinkToNode', 'LinkToMenu'],
['DrupalBreak', 'DrupalPageBreak']
];
}
else if((params.format == "format2") || (params.format == "format3")){
CKEDITOR.config.toolbar = [
['Source'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor','LinkToNode', 'LinkToMenu'],
'/',
['Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks'],
['DrupalBreak', 'DrupalPageBreak']
];
}
else{
CKEDITOR.config.toolbar = [ [ 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList','BulletedList', '-', 'Link', 'Unlink', 'Image' ] ];
}
// Attach editor.
CKEDITOR.replace(params.field, settings);
};
/**
* Detach a single or all editors.
*/
Drupal.wysiwyg.editor.detach.ckeditor = function(context, params) {
if (typeof params != 'undefined') {
var instance = CKEDITOR.instances[params.field];
if (instance) {
instance.destroy();
}
}
else {
for (var instanceName in CKEDITOR.instances) {
CKEDITOR.instances[instanceName].destroy();
}
}
};
Drupal.wysiwyg.editor.ckeditor = {
addPlugin: function(pluginName, settings, pluginSettings) {
CKEDITOR.plugins.add(pluginName, {
// Wrap Drupal plugin in a proxy pluygin.
init: function(editor) {
if (settings.css) {
editor.on('mode', function(ev) {
if (ev.editor.mode == 'wysiwyg') {
// Inject CSS files directly into the editing area head tag.
$('head', $('#cke_contents_' + ev.editor.name + ' iframe').eq(0).contents()).append('<link rel="stylesheet" href="' + settings.css + '" type="text/css" >');
}
});
}
if (typeof Drupal.wysiwyg.plugins[pluginName].invoke == 'function') {
var pluginCommand = {
exec: function(editor) {
var data = { format: 'html', node: editor.getSelection().getSelectedElement() };
// @todo This is NOT the same as data.node.
data.content = data.node ? data.node.innerHTML : '';
Drupal.wysiwyg.plugins[pluginName].invoke(data, pluginSettings, editor.name);
}
};
editor.addCommand(pluginName, pluginCommand);
}
editor.ui.addButton(pluginName, {
label: settings.iconTitle,
command: pluginName,
icon: settings.icon
});
// @todo Add button state handling.
}
});
},
prepareContent: function(content) {
// @todo Don't know if we need this yet.
return content;
},
insert: function(content) {
content = this.prepareContent(content);
CKEDITOR.instances[this.field].insertHtml(content);
}
};
})(jQuery);
Step 3) Download ckeditor, and unpack it to the wysiwyg module folder.
Step 4) Continue as normal, with the wysiwyg module install and configuration.
Copyright © 2011, Aaron Blondeau
Drupal theme by Kiwi Themes.