javascriptember.jsckeditorckeditor4.xember-1

EmebrJS + CKEDITOR error while adding links using its dialog box

Type of report

Links adding with CKEditor in chrome 78.0.3904.97 gives an error of following and i have checked latest firefox also and i can reproduce this

link.js?t=J8Q8:27 Uncaught TypeError: Cannot read property 'length' of undefined
    at CKEDITOR.dialog.onOk (link.js?t=J8Q8:27)
    at CKEDITOR.dialog.<anonymous> (ckeditor.js:613)
    at CKEDITOR.dialog.l (ckeditor.js:10)
    at CKEDITOR.dialog.fire (ckeditor.js:12)
    at button.onClick (ckeditor.js:637)
    at button.<anonymous> (ckeditor.js:575)
    at button.l (ckeditor.js:10)
    at button.fire (ckeditor.js:12)
    at button.click (ckeditor.js:574)
    at CKEDITOR.dom.element.<anonymous> (ckeditor.js:566)

reproduction steps

  1. enable links for CKeditor
  2. click the link icon in ckeditor toolbar
  3. it opens a dialog to add display name and the link
  4. adding link and display name
  5. click ok

Expected result

close the dialog box and adding the link to the ckeditor text area

Actual result

dialog box is not closing and console gives 

link.js?t=J8Q8:27 Uncaught TypeError: Cannot read property 'length' of undefined
    at CKEDITOR.dialog.onOk (link.js?t=J8Q8:27)
    at CKEDITOR.dialog.<anonymous> (ckeditor.js:613)
    at CKEDITOR.dialog.l (ckeditor.js:10)
    at CKEDITOR.dialog.fire (ckeditor.js:12)
    at button.onClick (ckeditor.js:637)
    at button.<anonymous> (ckeditor.js:575)
    at button.l (ckeditor.js:10)
    at button.fire (ckeditor.js:12)
    at button.click (ckeditor.js:574)
    at CKEDITOR.dom.element.<anonymous> (ckeditor.js:566)

Other details

Using CKEditor as Emberjs Component

components/ckeditor.js

import Ember from 'ember';
import config from 'project/config/environment';

export default Ember.Component.extend( {
  allowLinks: true,

  didInsertElement: function() {
    var self        = this,
        $textarea   = this.$().find( 'textarea' )[0],
        ckconfig    = {

          toolbarGroups: [

            { name: 'styles' },
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
            { name: 'paragraph',   groups: [ 'list' ] },
            { name: 'others' },
            { name: 'clipboard',   groups: [ 'undo' ] },
            { name: 'editing',     groups: [ 'find', 'selection' ] },
            { name: 'colors' }
          ],
          removeButtons: 'Subscript,Superscript,Cut,Copy,Paste,PasteText,PasteFromWord,Anchor,Styles,Font,FontSize,Find,Replace,SelectAll,BGColor',
          format_tags: 'h1;p',
          removeDialogTabs: 'link:advanced;link:target',
          removePlugins: 'magicline',
          disallowedContent :  {
            '$1': {
              styles: 'color'
            }
          }

        },
        outputRules = {

          indent: false,
          breakBeforeOpen: false,
          breakAfterOpen: false,
          breakBeforeClose: false,
          breakAfterClose: false
      };

    // custom config
    if ( this.get( 'allowLinks' ) ) ckconfig.toolbarGroups.splice( 3, 0, { name: 'links' } );

    CKEDITOR.config.customConfig    = false;
    CKEDITOR.config.defaultLanguage = 'en';
    CKEDITOR.config.language        = 'en';
    CKEDITOR.config.contentsCss     = config.baseURL + 'ckeditor.css' ;
    CKEDITOR.config.height          = 420;
    CKEDITOR.config.skin            = 'bootstrapck,' + config.baseURL + 'assets/bootstrapck/';
    CKEDITOR.config.colorButton_colors = '0000FF,FFA500';
    CKEDITOR.config.colorButton_enableMore = false;

    CKEDITOR.on( 'instanceReady', function(e) {

      e.editor.dataProcessor.writer.setRules( 'h1', outputRules );
      e.editor.dataProcessor.writer.setRules( 'p', outputRules );
      e.editor.dataProcessor.writer.setRules( 'ol', outputRules );
      e.editor.dataProcessor.writer.setRules( 'ul', outputRules );
      e.editor.dataProcessor.writer.setRules( 'li', outputRules );
    } );

    CKEDITOR.on( 'dialogDefinition', function(e) {

      var dialogName       = e.data.name,
          dialogDefinition = e.data.definition;

      if ( dialogName === 'link' ) {

        dialogDefinition.onShow = function () {

            var dialog        = CKEDITOR.dialog.getCurrent(),
                linkType      = dialog.getContentElement( 'info' , 'linkType' ),
                anchorOptions = dialog.getContentElement( 'info' , 'anchorOptions' ),
                emailOptions  = dialog.getContentElement( 'info' , 'emailOptions' ),
                protocol      = dialog.getContentElement( 'info' , 'protocol' );

            linkType.getElement().hide();
            anchorOptions.getElement().hide();
            emailOptions.getElement().hide();
            protocol.disable();
        };
      }
    } );

    Ember.run( function() {

      $textarea.value = self.get( 'value' ) || '';

      CKEDITOR.replace( $textarea, ckconfig ).on( 'change', function(e) {

        self.set( 'value', e.editor.getData() );
      } );
    } );
  }
} );

anyone has any idea how can I fixed it ? i have checked their github issues as well but unfortunately I couldn't find any thing

Solution

  • Error was in here 

    CKEDITOR.on( 'dialogDefinition', function(e) {

      var dialogName       = e.data.name,
          dialogDefinition = e.data.definition;

      if ( dialogName === 'link' ) {

        dialogDefinition.onShow = function () {

            var dialog        = CKEDITOR.dialog.getCurrent(),
                linkType      = dialog.getContentElement( 'info' , 'linkType' ),
                anchorOptions = dialog.getContentElement( 'info' , 'anchorOptions' ),
                emailOptions  = dialog.getContentElement( 'info' , 'emailOptions' ),
                protocol      = dialog.getContentElement( 'info' , 'protocol' );

            linkType.getElement().hide();
            anchorOptions.getElement().hide();
            emailOptions.getElement().hide();
            protocol.disable();
        };
      }
    } );

    and i have updated this with following code 

    CKEDITOR.on( 'dialogDefinition', function(e) {

      var dialogName       = e.data.name,
          dialogDefinition = e.data.definition;

      if ( dialogName === 'link' ) {
        dialogDefinition.getContents('info').get('protocol')['items'].splice(2, 6);
        dialogDefinition.getContents('info').get('linkType')['items'].splice(1, 4);

        var target = e.data.definition.getContents('target');
        var options = target.get('linkTargetType').items;
        for (var i = options.length-1; i >= 0; i--) {
          var label = options[i][0];
          if (!label.match(/new window/i)) {
            options.splice(i, 1);
          }
        }
        var targetField = target.get( 'linkTargetType' );
        targetField['default'] = '_blank';
      }
    } );