@webitel/ui

Appearance

wt-rich-text-editor.vue ​

Редактор форматованого тексту на базі TinyMCE (self-hosted, без хмари Tiny). Використовується у формах процесингу, а надалі — для листів.

Чому він on-demand ​

TinyMCE важкий, тому компонент зареєстровано через defineAsyncComponent: код редактора потрапляє в окремий чанк, який завантажується лише тоді, коли редактор уперше рендериться. Застосунок, який його не використовує, TinyMCE не завантажує. Поки чанк вантажиться, показується скелетон.

У lib-збірці @webitel/ui-sdk пакети tinymce і @tinymce/tinymce-vue винесено в external: їх резолвить і розбиває на чанки збірка застосунку.

js
import { WtRichTextEditor } from '@webitel/ui-sdk/components';

Особливості ​

  • Ліцензія. Передається license-key="gpl" — TinyMCE 8 використовується під GPLv2+.
  • Тема. Редагована область живе в iframe, тож CSS-змінні застосунку туди не доходять. Кольори (--content-wrapper-color, --wt-text-field-text-color) зчитуються зі сторінки і оновлюються, коли на <html> перемикається клас theme--dark.
  • Плагіни. У комплекті: advlist, emoticons, fullscreen, image, link, lists, table. Інші плагіни, передані через plugins, застосунок має імпортувати сам (import 'tinymce/plugins/…').
  • Мова. Інтерфейс редактора — англійською: мовні пакети TinyMCE не підключено.

Specs ​

Example Rich Text Editor ​

Code
vue
<template>
  <wt-rich-text-editor
    v-model="value"
    label="Resolution"
  />
  <p>{{ value }}</p>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('<p>Customer confirmed the <strong>refund</strong>.</p>');
</script>

Example Plain Text ​

output="text" прибирає форматування і повертає звичайний текст.

Code
vue
<template>
  <wt-rich-text-editor
    v-model="value"
    :height="150"
    label="Plain text"
    output="text"
  />
  <p>{{ value }}</p>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('No formatting here');
</script>

Example Custom Toolbar ​

Свій набір кнопок і плагінів, наприклад для листа.

Code
vue
<template>
  <wt-rich-text-editor
    v-model="value"
    :plugins="['link', 'lists']"
    label="Email body"
    placeholder="Write a reply…"
    toolbar="undo redo | bold italic underline | numlist bullist | link"
  />
</template>

<script setup>
import { ref } from 'vue';

const value = ref('');
</script>