Как использовать онлайн сборку CKEditor в angular? - PullRequest
Новая
       2

Как использовать онлайн сборку CKEditor в angular?

0 голосов
/ 16 марта 2020

Я хочу встроить ckeditor во вкладки материалов. Я хочу, чтобы редактор поддерживал функцию цвета шрифта, поэтому я собираю ckeditor онлайн по следующей ссылке:

https://ckeditor.com/ckeditor-5/online-builder/

, а затем устанавливаю редактор CKEditor 5 WYSIWYG компонент для Angular с помощью следующей команды: 

npm install --save @ckeditor/ckeditor5-angular

В соответствии с инструкцией на веб-странице , я копирую ckeditor. js и соответствующие файлы перевода в sr c каталог и импортировать его в файл компонента; и затем измените tsconfig. json.

Однако редактор не отображается.

как мне настроить редактор, чтобы он мог поддерживать функцию цвета шрифта?

Вот стек Blitz .

1 Ответ

1 голос
/ 16 марта 2020

В соответствии с документом ckeditor5 Вам необходимо выполнить следующие шаги: -

  1. Вам необходимо установить npm install --save @ckeditor/ckeditor5-angular && npm install --save @ckeditor/ckeditor5-build-classic в качестве зависимости CKeditor.

  2. Импорт модуля CKeditor import { CKEditorModule } from '@ckeditor/ckeditor5-angular'; в главном модуле приложения. && add CKEditorModule in imports.

    @ NgModule ({import: [CKEditorModule]})

  3. Добавить зависимость в app.component, как import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

  4. добавить public Editor = ClassicEditor; в компонент приложения следующим образом.

    класс экспорта AppComponent {publi c Editor = ClassicEditor; }

  5. добавить в .html файл типа <ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

Надеюсь, это поможет вам: -)

Рабочий пример Пример CKEditor

...