ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.33k stars 3.68k forks source link

Integration for Angular with CKeditor doesn't work #16747

Open NiranjanSwabhav opened 1 month ago

NiranjanSwabhav commented 1 month ago

Following all the steps in here using Angular v16 with scss doesn't work. I get the following error: ../../ckedit/my-ck-app/node_modules/ckeditor5/dist/ckeditor5.css:19:0 - Error: Module parse failed: Unexpected token (19:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | /

:root {

Witoso commented 1 month ago

We will create a section in the documentation as it has a different bundler than 17, meanwhile this should help:
app.component.ts (example)

import { Component, ViewEncapsulation } from '@angular/core';
import { Bold, ClassicEditor, Essentials, Italic, Paragraph, Undo } from 'ckeditor5';

@Component( {
  selector: 'app-root',
  templateUrl: './app.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: [ './app.component.css' ]
} )
export class AppComponent {
  title = 'angular';

  public Editor = ClassicEditor;
  public config = {
    plugins: [ Bold, Essentials, Italic, Paragraph, Undo ],
    toolbar: [ 'undo', 'redo', '|', 'bold', 'italic' ]
  }
}

app.component.css

@import 'ckeditor5/ckeditor5.css';