1

With Drupal 8.0.0-rc2, no matter what, I get this error in the JS console:

Uncaught TypeError: Cannot read property 'icons' of null

I think I have defined everything correctly, so I don't know what causes this error or what I missed.

Plugin definition:

/**


* @file
 * Contains \Drupal\codesnippet\Plugin\CKEditorPlugin\CodeSnippet.
 */

namespace Drupal\codesnippet\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginBase;
use Drupal\ckeditor\CKEditorPluginConfigurableInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\editor\Entity\Editor;
use Drupal\Core\Url;

/**
 * Defines the "codesnippet" plugin.
 *
 * @CKEditorPlugin(
 *   id = "codesnippet",
 *   label = @Translation("CodeSnippet"),
 * )
 */
class CodeSnippet extends CKEditorPluginBase implements CKEditorPluginConfigurableInterface {
  /**
   * {@inheritdoc}
   */
  public function getFile() {
    return drupal_get_path('module', 'codesnippet') . '/js/plugins/codesnippet/plugin.js';
  }

  /**
   * {@inheritdoc}
   */
  public function getConfig(Editor $editor) {
    return array(
      'codeSnippet_dialogTitleAdd' => t('Insert Code'),
      'codeSnippet_dialogTitleEdit' => t('Edit Code'),
    );
  }

  /**
   * {@inheritdoc}
   */
  public function getButtons() {
    return array(
      'CodeSnippet' => array(
        'label' => t('CodeSnippet'),
        'image' => drupal_get_path('module', 'codesnippet') . '/js/plugins/codesnippet/codesnippet.png',
      ),
    );
  }

  /**
   * {@inheritdoc}
   */
  public function settingsForm(array $form, FormStateInterface $form_state, Editor $editor) {
    $form_state->loadInclude('editor', 'admin.inc');

    $styles = $this->getStyles();

    $form['highlight_style'] = array(
      '#type' => 'select',
      '#title' => 'Highlightjs Style',
      '#description' => t('Select a style to apply to all highlighted code snippets. You can preview the styles at !link.', array('!link' => \Drupal::l('https://highlightjs.org/static/demo', Url::fromUri('https://highlightjs.org/static/demo/')))),
      '#options' => $styles,
      '#default_value' => !empty($form_state->storage['editor']->settings['plugins']['codesnippet']['highlight_style']) ? $form_state->storage['editor']->settings['plugins']['codesnippet']['highlight_style'] : 'arta.css',
    );

    return $form;
  }

  /**
   * Returns available stylesheets to use for code syntax highlighting.
   */
  private function getStyles() {
    $styles = preg_grep('/\.css/', scandir(drupal_get_path('module', 'codesnippet') . '/js/plugins/codesnippet/lib/highlight/styles'));
    $style_options = array();

    foreach ($styles as $stylesheet) {
      $style_options[$stylesheet] = $stylesheet;
    }

    return $style_options;
  }
}

The icon on the toolbar when editing the text format appears just fine, I can drag it in and out of the active toolbar, and my settings form shows. But due to the JS error generated, it does not work.

The plugin used is available on ckeditor.com, I dropped it into the plugins/codesnippet/js folder untouched.

I can't find any other examples of custom plugins using anything called 'icons'.

1

@Kevin are you sure the fix was due to CKEditor being upgraded in that Drupal version? I'm getting the same kind of issue trying to add the Link plugin, on Drupal 8.1.1, which is using CKEditor version 4.5.8.

Trying to find more insight on this issue.

edit: upon manually upgrading CKEditor to version 4.5.9 I'm getting much more illuminating error messages:

Uncaught Error: [CKEDITOR.resourceManager.add] The resource name "link" is already registered.

Uncaught TypeError: Cannot set property 'getLinkAttributesParser' of undefined

Uncaught TypeError: Cannot read property 'icons' of null

So looks like this is colliding with the Link plugin that comes with Drupal (which is lacking some features). So I'll find a way to sidestep this name space collision and will update here.

edit: renaming the plugin proved unfruitful. Still getting:

Uncaught TypeError: Cannot read property 'icons' of null

  • I still see it sometimes, but not as much as before. – Kevin May 18 '16 at 13:26
0

Latest release of Drupal (8.0.0-rc3) fixes this. CKEditor was upgraded.

0

You can check the Click to tweet module here-> ( https://www.drupal.org/project/tweet_text) It also does somewhat like you need:

The easiest way to promote, share & track your content on Twitter.

Provides an input filter and CKEditor plugin for making text in content tweetable, just by clicking on the sentence or phrase itself! It uses the CKEditor plugin through which you can add the link for text ,userhandle and the description in any sentence or paragraph ,which is to be tweeted.

Disclaimer: I wrote this module.

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.