0

I've installed CKEditor 4.3.5 on my Drupal 7 by simply copying it into the sites/all/libraries folder as described here: http://mtt.desk.com/customer/portal/articles/973377-how-to-install-the-ckeditor-on-drupal-7

I've done this successfully with CK Editor 4.3 and as of May 2014 it works fine with Wysiwyg 7.x-2.2.

I'm wondering if anyone has successfully installed CK Editor's widgets using the installation as in this method. There seems to be plenty of documentation for installing widgets if using the Drupal CK Editor module, which is an alternative installation route. However, I can't find any for this route.

Specifically, in the CK Editor widget tutorial, http://docs.ckeditor.com/#!/guide/widget_sdk_tutorial_1, we are asked to register the widget in the extra plugins list, config.extraPlugins. This seems to be placed wherever CK Editor is first called. So in Drupal, where do I place this code?? I tried the config.js file in sites/all/libraries/ckeditor but it doesn't seem to work.

I'd be grateful for any ideas.

Thanks and best wishes.

1

First off, you should create a basic custom module, containing an .info file and a .module file.

Call it for example "custom_wysiwyg"

[custom_wysiwyg.info]

name = My Custom Wysiwyg
core = 7.x
package = Custom
version = 7.x-1.0

[custom_wysiwyg.module]

/**
 * Implements hook_editor_settings_alter().
 */
function custom_wysiwyg_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
    $settings['extraPlugins'] = 'lineutils,widget,quote_box';
    $settings['extraAllowedContent'] = array(
      'img[src,title,alt,style,width,height,class,hspace,vspace,view_mode,format,fid]',
      'a[type,length,href]',
    );
  }
}

/**
 * Register a directory containing Wysiwyg plugins.
 *
 * @param $type
 *   The type of objects being collected: either 'plugins' or 'editors'.
 * @return
 *   A sub-directory of the implementing module that contains the corresponding
 *   plugin files. This directory must only contain integration files for
 *   Wysiwyg module.
 */
function custom_wysiwyg_wysiwyg_include_directory($type) {
  switch ($type) {
    case 'plugins':
      // You can just return $type, if you place your Wysiwyg plugins into a
      // sub-directory named 'plugins'.
      return $type;
  }
}

function custom_wysiwyg_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'ckeditor':
      $module_path = drupal_get_path('module', 'custom_wysiwyg');
      $plugins = array(
        'lineutils' => array(
          'filename' => 'plugin.js',
          'path' => $module_path . '/plugins/lineutils',
          'load' => TRUE,
        ),
        'widget' => array(
          'filename' => 'plugin.js',
          'path' => $module_path . '/plugins/widget',
          'buttons' => array(
            'widget' => 'widget'
          ),
          'load' => TRUE,
        ),
        // Quote box is an example widget based on the Samples Simplebox widget.
        'quote_box' => array(
          'filename' => 'plugin.js',
          'path' => $module_path . '/plugins/quote_box',
          'buttons' => array(
            'quote_box' => 'quote_box'
          ),
          'load' => TRUE,
        ),
      );

      return $plugins;
      break;
  }
}
  1. The function "custom_wysiwyg_wysiwyg_editor_settings_alter" alters the wysiwyg profiles' settings when rendering a wysiwyg textfield. We add some extra allowed elements and their attributes (bugfix for media module), and we define our custom plugins.

  2. The function "custom_wysiwyg_wysiwyg_include_directory" describes our custom module's CKeditor plugins path subfolder "plugins".

You can than place any custom plugin folders in your module's "plugins" directory as follows:

/
/custom_wysiwyg.info
/custom_wysiwyg.module
/plugins
/plugins/lineutils/plugin.js etc...
/plugins/widget/plugin.js etc...
/plugins/quote_box/plugin.js etc...
  1. The function "custom_wysiwyg_wysiwyg_plugin" defines a list of our custom plugins which we have placed in our module's subfolder "plugins".

Note: The plugin "lineutils" is a dependency for the "widget" plugin and is not included in the Ckeditor Full download.

I hope this points you in the right direction.

greets, Kim

2
  • Thanks Kim! Sorry to take so long to get back - we have used your approach, more or less - and have a system working quite well. Interestingly, this process works ok with CK Editor 4.4 as far as we can see. However, in case it's useful knowledge, some aspects of the widget system in 4.4 does not yet play well with the Media wysiwyg module on Drupal, which is not yet compatible beyond CK Editor 4.3. There are programme conflicts when attempting to edit or delete images created by the Media module. However, you can insert images fine, so it's workable.
    – Andyg8
    May 10 '15 at 15:05
  • And in Nov 16, the Media wysiwyg code on Drupal has caught up with CK Editor 4.4 and it's all pretty robust now. Well done everyone!
    – Andyg8
    Nov 3 '16 at 22:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.