Редактор PrimeNg не появляется - Angular - PullRequest
Новая
       5

Редактор PrimeNg не появляется - Angular

0 голосов
/ 12 сентября 2018

Я следовал многим учебным пособиям, но пока мне не удалось заставить модуль редактора PrimeNG появляться! (Другие модули, такие как Toast или кнопки работают нормально, не работает только редактор).

Итак, вот что я сделал:

Модуль импорта в app.module.ts 

import { EditorModule } from 'primeng/editor';

Установленные пакеты 

npm install quill --save

npm install @types/quill --save

Обновлен angular-cli.json 

"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ] 
"scripts": [ "../node_modules/quill/dist/quill.js" ]

Вставляется в HTML двумя различными способами 

<p-editor [(ngModel)]="text" [style]="{'height':'320px'} ngDefaultControl"></p-editor>

<form style="text-align: center; margin: 0 auto; width: auto" [formGroup]="avisoForm" (ngSubmit)="atualizarCargo()">
...
<p-editor formControlName="msgAviso" [style]="{'height':'320px'}" ngDefaultControl></p-editor>

</form>

Ссылка на них в файле TS 

this.avisoForm = new FormGroup({
        msgAviso: new FormControl,
        titAviso: new FormControl
    })

text: string;

Тем не менее, он ничего не показывает конечному пользователю, хотя там показан тег p-editor:

Экран конечного пользователя

Я думаю, что это может быть проблема CSS, но я проверил файлы CSS, но я едва мог получить тег, потому что он ничего не показывает на странице. (Я искал тот с исходного сайта PrimeNG, он делает тег, но его нет и в CSS).

Я искал во многих источниках, но не нашел ответа, чтобы решить эту проблему, может кто-нибудь мне помочь? Спасибо!

Источники:

Ответы [ 2 ]

0 голосов
/ 05 января 2019

Ресурсы перо необходимо добавить в ваше приложение. Пример настройки с помощью CLI выглядит следующим образом:

npm установить перо - сохранить

Добавить Quill к скриптам в angular.json 

"scripts": [... "node_modules/quill/dist/quill.js"],

Добавление Quill CSS к стилям в angular.json 

"styles": [ ... "node_modules/quill/dist/quill.core.css", 
"node_modules/quill/dist/quill.snow.css"],

Я несколько раз проверял это решение с новыми angular 7 и существующими проектами, оно работает как charm:)

0 голосов
/ 12 сентября 2018

Только что я создал проект для PrimeNg Editor

  1. Создан новый угловой проект с последней версией 6

  2. npm install primeng --save latest> 6.0.0

  3. npm установить перо - сохранить

  4. Редактировать angular.json.Обновите его внимательно, если ваши angular.json и node_module находятся на одном уровне дерева.Редактировать, как показано ниже, я редактировал так:

    "styles": ["src / styles.scss", "node_modules / quill / dist / quill.core.css", "node_modules / quill / dist / quill.snow.css "]," scripts ": [" node_modules / quill / dist / quill.js "]

  5. Импортируйте его в свой модуль: import {EditorModule} from 'primeng/editor';

    импорт: [HttpModule, FormsModule, BrowserModule, ButtonModule, TableModule, EditorModule],

  6. Добавить HTML в любой шаблон <p-editor [(ngModel)]="text1" [style]="{'height':'320px'}"></p-editor> <p>Value: {{text1||'empty'}}</p>

  7. И в файле компонента дать некоторое значение text1: строка text2: строка;

Github репо для справки Git

...