jeudi 21 novembre 2019

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

  • Browser: chrome 78.0.3904.97 / firefox
  • OS:Mac
  • CKEditor version: 4.13.0
  • Installed CKEditor plugins:

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




Aucun commentaire:

Enregistrer un commentaire