开发者问题收集

ckeditor5 文本对齐插件不起作用

2018-05-29
13614
angular ckeditor ckeditor5

  • 我按照 ckeditor5 的 文档 中提到的文本对齐插件的安装步骤进行操作。

  • 按如下步骤添加对齐插件

import Alignment from '@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;
  }

}
3个回答

点击以下链接，根据您的需求选择自定义构建

CKEditor 5 Online Builder

1.选择插件。 添加对齐插件。 选择插件

2.将您想要使用的插件拖放到工具栏中。 在此处输入图片描述

3.下载捆绑包。 下载捆绑包

4. 解压 zip 并从 build 文件夹复制 ckeditor.js 文件并将其粘贴到 node_modules/@ckeditor/ckeditor5-build-classic/build 中。然后，它将被您选择的任何功能替换。**

5.安装 ckeditor5-alignment 包 和版本（无论 package.json 中的 @ckeditor/ckeditor5-build-classic 版本是什么）。

npm i --save-dev @ckeditor/ [email protected]

6.editor.component.html

<ckeditor [editor]="Editor" [config]="config"></ckeditor>

7.editor.component.ts 

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.scss']
})


export class EditorComponent implements OnInit {
  public Editor = ClassicEditor;
  public config = {
    toolbar: {
      items: [
        'heading',
        '|',
        'bold',
        'italic',
        'link',
        'bulletedList',
        'numberedList',
        'alignment',
        'imageUpload',
        'blockQuote',
        'undo',
        'redo'
      ]
    },
    alignment: {
      options: ['left', 'right', 'center', 'justify']
    },
    removePlugins: ['MediaEmbed', 'Link'], mediaEmbed: {} //if you want to remove any plugin
  };

  ngOnInit() {
  }
}

输出： 在此处输入图片描述

VenkateshMogili
2020-06-11

除了我在第二个回答中写的内容之外，您的代码中还有另一个问题。它尚未显现出来，但如果编辑器已启动，它就会显现出来。

问题在这里： 

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

您无法像这样将插件添加到现有版本中。这将导致严重的代码重复和运行时错误。原因是该版本本身已经捆绑了许多插件，因此整个核心包也包含在其中。对齐功能也依赖于核心包，因此如果您像这样构建它，核心包将被包含两次。

有一个单独的指南介绍如何 安装插件 ，我强烈建议您阅读它。

Reinmar
2018-05-29

您未正确配置 webpack。如果您 从源代码构建编辑器 （而不是使用 现有 或 自定义构建 ），则需要确保 webpack 已配置为处理 CKEditor 5 资源。这包括处理 CSS 和 SVG 文件，如 Webpack 配置 部分中所述。

示例设置可能如下所示： 

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 文件。

Reinmar
2018-05-29