I have recently implemented ckeditor5 in my Angular project. I initially had the Angular CLI 11 and had to update it to Angular CLI 13 in order to be able to integrate the library. I was finally able to integrate it properly after many errors using their web Text Editor generator. This way, I need to install the ckeditor custom package independently, which is outside the usual node_modules folder.
In my local environment this works fine, with all the plugins I installed for ckeditor. But when I try to run this same project in another computer (which has the same Angular version but an older npm version) for production, although the app runs fine and the editor too, it does not paste the GoogleDoc content properly, and it does not give an error either.
Moreover, if I try to run this same project in another computer with the same Angular CLI, npm, etc. versions, even if I paste the whole project (with the node_modules folder included), it does not work. Again, it does not throw any error.
In my component:
import Editor from 'ckeditor5-custom-build/build/ckeditor';
import { EditorConfig } from '@ckeditor/ckeditor5-core';
import { ChangeEvent } from '@ckeditor/ckeditor5-angular';
public config: EditorConfig = {
toolbar: [ 'findAndReplace', 'undo', 'redo', '|', 'heading', '|', 'fontFamily', '|', 'fontSize', '|', 'bold', 'italic', 'underline', 'fontColor', 'highlight', '|',
'subscript', 'superscript', '|', 'link', 'uploadImage', 'insertTable', 'specialCharacters', '|', 'alignment', 'bulletedList', 'numberedList', 'indent', 'outdent', '|'],
plugins: [ 'Alignment', 'AutoLink', 'Autoformat', 'Base64UploadAdapter', 'Bold', 'Essentials', 'FindAndReplace', 'FontBackgroundColor', 'FontColor',
'FontFamily', 'FontSize', 'GeneralHtmlSupport', 'Heading', 'Highlight', 'HorizontalLine', 'Image', 'ImageCaption', 'ImageResize',
'ImageStyle', 'ImageToolbar', 'ImageUpload', 'Indent', 'IndentBlock', 'Italic', 'Link', 'List', 'ListProperties',
'Paragraph', 'PasteFromOffice', 'SelectAll', 'SpecialCharacters', 'SpecialCharactersArrows', 'SpecialCharactersCurrency', 'SpecialCharactersEssentials',
'SpecialCharactersLatin', 'SpecialCharactersMathematical', 'SpecialCharactersText', 'Style', 'Subscript', 'Superscript', 'Table', 'TableCaption',
'TableCellProperties', 'TableColumnResize', 'TableProperties', 'TableToolbar', 'Title', 'Underline', 'WordCount' ],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ckeditor-paragraph' },
{ model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ckeditor-heading1' },
{ model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ckeditor-heading2' },
// { model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
]
}
}
let TextEditor = Editor;
let editorConfig = this.config;
<ckeditor (change)="onChange(item, tab, $event)" *ngIf="tab.mode == 'edit'" [editor]="TextEditor" [config]= "editorConfig"></ckeditor>
Am i configuring the editor wrong? Should I upload the plugins manually and configure the editor instead of generating it with the web generator?
Thank you :)