Редактор текста (qp-plate)

Компонент qp-plate из @diasoft/qpalette-visual выводит редактор форматированного текста. Сам редактор собран на PlateJS и подключается как веб-компонент из отдельного бандла — @diasoft/qpalette-plate-wc.

С чего начать

Подключите компонент:

import { QPlateComponent } from '@diasoft/qpalette-visual';
 
@Component({
  imports: [QPlateComponent],
})
export class MyComponent {}

Использование

<qp-plate [value]="editorValue"></qp-plate>

Так компонент берёт бандл редактора из ассетов рутового приложения — /assets/qpalette-plate-wc/main.js. С версии 8.2.0 это работает без настройки; на более ранних версиях компонент идёт за бандлом только при заданном входе url — укажите url="/assets/qpalette-plate-wc". Но так или иначе это временно: бандл весит 8.9 МБ и нужен только продуктам с редактором, поэтому из рутового он со временем уедет.

Свой бандл редактора

⚠️

Продукт, который выводит редактор, должен возить бандл сам. Пока это не сделано, редактор зависит от того, лежит ли файл в ассетах рутового приложения, а он оттуда уедет. url без assets/ из примера ниже работает с 8.2.0; на более ранних версиях передайте полный адрес — см. заметку в конце раздела.

Поставьте пакет с бандлом редактора:

npm i @diasoft/qpalette-plate-wc

Добавьте его в ассеты своего приложения — в angular.json, раздел projects.[project-name].architect.build.options.assets:

{
  "glob": "**/*",
  "input": "node_modules/@diasoft/qpalette-plate-wc",
  "output": "assets/qpalette-plate-wc"
}

Укажите этот путь входом url:

<qp-plate [value]="editorValue" url="qpalette-plate-wc"></qp-plate>

Путь без ведущего assets/ — каталог в ассетах собственной сборки продукта: /api/<сервис>/<компонент>/assets/qpalette-plate-wc. Путь assets/… (ведёт в ассеты рутового, как и раньше), путь от корня (/shared/plate) и полный URL (https://…) используются как есть — правило описано в разделе Адреса собственных ассетов. К адресу добавляется /main.js.

💡

До версии 8.2.0 путь без assets/ не разворачивается — передайте полный адрес каталога от корня сайта: url="/api/<сервис>/<компонент>/assets/qpalette-plate-wc". Как собрать его для своего веб-компонента и для библиотечного проекта — Адрес вручную: версии до 8.2.0. Такой адрес работает и после обновления.

Свойства

Свойство	Тип	По умолчанию	Описание
`value`	`object[]`	—	Содержимое редактора в формате PlateJS
`type`	`'edit' \| 'view'`	`edit`	Режим: редактирование или просмотр
`fileConfig`	`FileConfig`	—	Хранилище и ограничения для загружаемых файлов
`url`	`string`	`/assets/qpalette-plate-wc`	Адрес каталога с бандлом редактора

Событие	Описание
`valueChanged`	Содержимое редактора изменилось

Живой пример — Plate (opens in a new tab).

Баннер Q.Web-Component