-
我按照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 回答
除了我在第二个回答中写的内容,您的代码中还有另一个问题 . 它还没有表现出来,但如果编辑已经开始的话 .
问题出在这里:
您无法将插件添加到此类现有构建中 . 这将导致糟糕的代码重复和运行时错误 . 原因是构建本身已经捆绑了很多插件,所以整个核心包都包含在那里 . 对齐功能也取决于核心包,所以如果你像这样构建它,核心包将被包含两次 .
有一个单独的指南如何install plugins,我强烈建议阅读它 .
您没有正确配置webpack . 如果你build the editor from source(而不是使用existing或custom build),你需要确保webpack配置为处理CKEditor 5资产 . 这包括处理CSS和SVG文件,如Webpack configuration部分所述 .
示例设置可能如下所示:
如果没有raw-loader处理SVG文件,它们将作为外部资源加载,因此编辑器会获取它们的路径,而不是它们的XML源会破坏编辑器 .
PS . 如果您使用Angular,则可能需要从处理SVG和CSS的加载器中排除CKEditor 5文件 .