首页 文章

ckeditor5文本对齐插件无法正常工作

提问于
浏览
1
  • 我按照ckeditor5的docs中提到的文本对齐插件的安装步骤进行了操作 .

  • 添加了对齐插件,如下所示

从'@ ckeditor / ckeditor5-alignment / src / alignment'导入对齐方式; ClassicEditor .create(this.element.nativeElement,{plugins:[Alignment],toolbar:['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)

有人可以帮我解决这个问题吗?按照文档中提到的步骤进行操作,但仍然遇到此问题 .

这是ckeditor的完整angular5组件代码:

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 回答

  • 2

    除了我在第二个回答中写的内容,您的代码中还有另一个问题 . 它还没有表现出来,但如果编辑已经开始的话 .

    问题出在这里:

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

    您无法将插件添加到此类现有构建中 . 这将导致糟糕的代码重复和运行时错误 . 原因是构建本身已经捆绑了很多插件,所以整个核心包都包含在那里 . 对齐功能也取决于核心包,所以如果你像这样构建它,核心包将被包含两次 .

    有一个单独的指南如何install plugins,我强烈建议阅读它 .

  • 1

    您没有正确配置webpack . 如果你build the editor from source(而不是使用existingcustom build),你需要确保webpack配置为处理CKEditor 5资产 . 这包括处理CSS和SVG文件,如Webpack configuration部分所述 .

    示例设置可能如下所示:

    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
                            } )
                        },
                    ]
                }
            ]
        }
    };
    

    如果没有raw-loader处理SVG文件,它们将作为外部资源加载,因此编辑器会获取它们的路径,而不是它们的XML源会破坏编辑器 .

    PS . 如果您使用Angular,则可能需要从处理SVG和CSS的加载器中排除CKEditor 5文件 .

相关问题