ckeditor5 плагин для выравнивания текста не работает - PullRequest
Новая
       9

ckeditor5 плагин для выравнивания текста не работает

0 голосов
/ 29 мая 2018

  • Я выполнил шаги установки для плагина выравнивания текста, как указано в документах ckeditor5.

  • Добавлен плагин выравнивания, как показано ниже

import Alignment из '@ ckeditor / ckeditor5-alignment / src / alignment';ClassicEditor .create (this.element.nativeElement, {plugins: [Alignment], панель инструментов: ['alignment]]})

Я получаю следующую ошибку: 

TypeError: Cannot read property 'getAttribute' of null
    at IconView._updateXMLContent (iconview.js:100)
    at IconView.render (iconview.js:76)
    at IconView.on (observablemixin.js:241)
    at IconView.fire (emittermixin.js:196)
    at IconView.(anonymous function) [as render] (webpack-internal:///./node_modules/@ckeditor/ckeditor5-utils/src/observablemixin.js:249:16)
    at ViewCollection.on (viewcollection.js:68)
    at ViewCollection.fire (emittermixin.js:196)
    at ViewCollection.add (collection.js:182)
    at ButtonView.render (buttonview.js:160)
    at ButtonView.on (observablemixin.js:241)

Может кто-нибудь помочь мне, как справиться с этим?Выполните шаги, упомянутые в документации, но проблема не устранена.

Вот полный код компонента angular5 для ckeditor: 

import { Component, OnInit, OnDestroy, NgZone, ElementRef, ChangeDetectionStrategy, forwardRef } from '@angular/core';
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'ck-editor',
  template: '<textarea></textarea>',
  styleUrls: ['./ck-editor.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CkEditorComponent),
    multi: true
  }],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CkEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {

  onChange: Function;
  onTouched: Function;
  model: string;
  editor;

  constructor(private ngZone: NgZone,
    private element: ElementRef) {
  }

  ngOnInit() {
    ClassicEditor
      .create(this.element.nativeElement,  {
      plugins: [Alignment],
      toolbar: [
          'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
      ]
    })
      .then(editor => {
        this.editor = editor;
        editor.model.document.on('change', () => {
          if (editor.model.document.differ.getChanges().length > 0) {
            this.ngZone.run(() => this.onChange(editor.getData()));
          }
        });
        editor.model.document.on('blur', () => {
          this.ngZone.run(() => this.onTouched());
        });
        this.editor.setData(this.model ? this.model : '');
      })
      .catch(error => {
        console.error(error);
      });
  }

  ngOnDestroy() {
    if (this.editor) {
      return this.editor.destroy();
    }
  }

  writeValue(value) {
    this.model = value;
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }

}

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Помимо того, что я написал во втором ответе, есть еще одна проблема в вашем коде.Это еще не проявилось, но было бы, если бы редактор был запущен.

Проблема здесь: 

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

Вы не можете добавлять плагины к существующей сборке, подобной этой.Это приведет к ужасному дублированию кода и ошибкам во время выполнения.Причина в том, что в сборку уже встроено много плагинов, поэтому туда включены и все основные пакеты.Функция выравнивания зависит также от основных пакетов, поэтому, если вы создадите ее таким образом, основные пакеты будут включены дважды.

Существует отдельное руководство, как установить плагины , и я очень рекомендуюрекомендую прочитать.

0 голосов
/ 29 мая 2018

Вы неправильно настроили веб-пакет.Если вы собираете редактор из источника (в отличие от использования существующей или пользовательской сборки ), вам необходимо убедиться, что веб-пакет настроен для обработки CKEditor 5активы.Это включает в себя обработку файлов CSS и SVG, как описано в разделе Конфигурация веб-пакета .

Пример установки может выглядеть следующим образом: 

const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
    module: {
        rules: [
            {
                // Or /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/ if you want to limit this loader
                // to CKEditor 5 icons only.
                test: /\.svg$/,

                use: [ 'raw-loader' ]
            },
            {
                // Or /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/ if you want to limit this loader
                // to CKEditor 5 theme only.
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            singleton: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: styles.getPostCssConfig( {
                            themeImporter: {
                                themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                            },
                            minify: true
                        } )
                    },
                ]
            }
        ]
    }
};

Без SVG-обработки необработанного загрузчикафайлы, они загружаются как внешние ресурсы, поэтому редактор получает их пути, а не источник XML, который нарушает работу редактора.

PS.Если вы используете Angular, вам может потребоваться исключить файлы CKEditor 5 из загрузчиков, которые по умолчанию обрабатывают SVG и CSS.

...