EditorView

Редактор и просмотр одного значения

Слева правится, справа читается. Разметка просмотра семантическая и без служебных узлов правки.

Тип блока
Как работает просмотр
Тип блока
Абзац с жирным и ссылкой.
Тип блока
Цитата живёт в blockquote.
Тип блока
Тип блока
const a = 1 const b = 2
Тип блока
Тип блока
После разделителя — обычный абзац.

Как работает просмотр

Абзац с жирным и ссылкой.

Цитата живёт в blockquote.
  • Планирование
    • Собрать требования
  • Разработка
const a = 1
const b = 2

После разделителя — обычный абзац.

Типы блоков: header → paragraph → quote → list → raw → delimiter → paragraph

Ссылки: обычный переход и роутер

Режим a — те <a>, режим router — внутренний адрес через NuxtLink.

Внутренний и наружный адрес.

Внутренний и наружный адрес.

Неизвестный тип блока

Типа нет в реестре — содержимое остаётся: его рисует запасное представление.

Ниже блок типа, которого в реестре нет.

Набор, который надо сохранить

Тег контейнера и доступное имя

Семантическому тегу роль не нужна — имя у него есть по умолчанию. Произвольному div доступное имя даётся через роль region, иначе скринридер его не прочитает.

Контейнер — article с aria-label.

Контейнер — article с aria-label.

Переопределение представления пропом views

Цитата того же документа рисуется своим компонентом, остальные типы остаются встроенными.

Как работает просмотр

Абзац с жирным и ссылкой.

  • Планирование
    • Собрать требования
  • Разработка
const a = 1
const b = 2

После разделителя — обычный абзац.

Слот block

Слот заменяет представления всех блоков: сюда приходит блок, его индекс и режим ссылок.

0headerКак работает просмотр

1paragraphАбзац с жирным и ссылкой.

2quoteЦитата живёт в blockquote.

3list

4rawconst a = 1 const b = 2

5delimiter

6paragraphПосле разделителя — обычный абзац.

Входные параметры

ИмяТипПо умолчаниюОписание
valueC3EditorValueundefinedДокумент редактора — значение v-model компонента C3Editor. У пустого или битого значения ничего не рендерится.
tagstring'div'Тег контейнера: article для статьи, section для раздела.
links'a' | 'router''a'Как рисовать ссылки. router отдаёт внутренний адрес компонентом NuxtLink, наружный остаётся <a>.
viewsRecord<string, Component>undefinedПредставления типов блоков: компонент, который рисует этот тип вместо встроенного.
ariaLabelstringundefinedДоступное имя контейнера. Несемантическому тегу добавляется роль region.

Событий и v-model нет: просмотр только читает значение.

Описание

Компонент C3EditorView показывает значение блочного редактора как читаемый текст: <p>, <h1>…<h6>, <blockquote>, вложенные <ul>/<ol>, <pre><code> и <hr>. Начертания из data.marks разворачиваются в <strong>, <em>, <code> и <a>.

Разметка строится компонентами, без v-html: значение проходит тот же разбор, что и редактор (normalizeDocument), поэтому вид при наборе и вид в статье не расходятся. Служебные узлы правки — contenteditable, плейсхолдеры, классы блоков — в чтение не попадают.

Для отображения текста письма или SEO берите тот же value и рендерите его этим компонентом.

Дополнительная информация

  • Слот #block — единственный слот. Параметры: block (блок документа), index (порядковый номер) и links (режим ссылок просмотра).
  • Представления типов по умолчанию соответствуют инструментам: paragraph, header, quote, list, raw, delimiter. Компоненты — C3EditorBlockParagraph, C3EditorBlockHeader, C3EditorBlockQuote, C3EditorBlockList, C3EditorBlockRaw, C3EditorBlockDelimiter, запасное C3EditorBlockUnknown. Каждому передаётся контракт { data, links }.
  • Вложенные компоненты текста: C3EditorInline (текст с начертаниями), C3EditorInlineMark (фрагмент с одним набором начертаний), C3EditorListBranch (ветка списка). Их можно использовать отдельно.
  • Переопределение типа задаётся компонентом, а не именем: динамический :is имя компонента модуля не разрешает. Тег блока меняется слотом #block.
  • Адрес ссылки фильтруется по схеме: пропускаются http, https, mailto, tel и относительные пути; javascript: и data: ссылкой не становятся. Метка языка блока кода попадает в класс только если это короткое имя без служебных символов.
  • Уровень заголовка и глубина списка приводятся тем же кодом, что и в инструментах: битый уровень даст тот же тег, что применил бы редактор.
  • Доступность: контейнер — семантический раздел или region с доступным именем; заголовки строят оглавление документа, список сохраняет уровни в атрибуте data-level.
  • Стили — assets/styles/components/editor-view.scss, только переменные --c3-* и логические свойства, поэтому работают в RTL и тёмной теме.
×