@opengis/richtext 0.0.36 → 0.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +363 -363
- package/dist/richtext.css +1 -1
- package/dist/richtext.js +7372 -7509
- package/dist/richtext.umd.cjs +52 -50
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,364 +1,364 @@
|
|
|
1
|
-
# VsRichtext - Потужний Rich Text Editor для Vue 3
|
|
2
|
-
|
|
3
|
-
## 📋 Опис
|
|
4
|
-
|
|
5
|
-
**VsRichtext** - це сучасний, повнофункціональний rich text редактор для Vue 3, побудований на базі TipTap. Компонент надає широкий спектр можливостей для редагування тексту, включаючи форматування, вставку медіа-контенту, роботу з таблицями та багато іншого.
|
|
6
|
-
|
|
7
|
-
## ✨ Основні можливості
|
|
8
|
-
|
|
9
|
-
### 🎨 Форматування тексту
|
|
10
|
-
- **Жирний текст** - зручне перемикання жирного шрифту
|
|
11
|
-
- **Курсив** - підкреслення важливих частин тексту
|
|
12
|
-
- **Підкреслення** - виділення ключових моментів
|
|
13
|
-
- **Закреслення** - позначення застарілої інформації
|
|
14
|
-
- **Верхній/нижній індекс** - для математичних формул та хімічних позначень
|
|
15
|
-
|
|
16
|
-
### 🎯 Типографіка
|
|
17
|
-
- **Заголовки** - 6 рівнів заголовків (H1-H6) з автоматичним стилюванням
|
|
18
|
-
- **Параграфи** - зручне форматування основних блоків тексту
|
|
19
|
-
- **Цитати** - виділення важливих цитат зі спеціальним стилюванням
|
|
20
|
-
- **Код** - вбудований код та блоки коду з підсвічуванням синтаксису
|
|
21
|
-
|
|
22
|
-
### 🌈 Кольори та стилі
|
|
23
|
-
- **Колір тексту** - вибір з палітри кольорів або власний колір
|
|
24
|
-
- **Колір фону** - виділення тексту кольором фону
|
|
25
|
-
- **Підсвічування** - маркерне виділення важливих частин
|
|
26
|
-
- **Шрифти** - вибір сімейства шрифтів
|
|
27
|
-
- **Розмір шрифту** - налаштування розміру тексту
|
|
28
|
-
|
|
29
|
-
### 📝 Структурування контенту
|
|
30
|
-
- **Списки** - марковані та нумеровані списки
|
|
31
|
-
- **Вирівнювання** - ліві, центральні, праві та по ширині
|
|
32
|
-
- **Горизонтальні лінії** - розділення контенту
|
|
33
|
-
- **Таблиці** - повнофункціональні таблиці з можливістю редагування
|
|
34
|
-
|
|
35
|
-
### 🔗 Медіа та посилання
|
|
36
|
-
- **Посилання** - створення та редагування посилань
|
|
37
|
-
- **Зображення** - завантаження та вставка зображень
|
|
38
|
-
- **Файли** - підтримка завантаження файлів
|
|
39
|
-
|
|
40
|
-
### 🛠️ Додаткові функції
|
|
41
|
-
- **HTML режим** - прямий редагування HTML коду з Monaco Editor
|
|
42
|
-
- **Повноекранний режим** - зручне редагування на весь екран
|
|
43
|
-
- **Історія змін** - відміна та повернення дій
|
|
44
|
-
- **Очищення форматування** - швидке видалення всіх стилів
|
|
45
|
-
- **Довідка** - вбудована система допомоги
|
|
46
|
-
|
|
47
|
-
## 🚀 Встановлення
|
|
48
|
-
|
|
49
|
-
```bash
|
|
50
|
-
npm install @opengis/richtext
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
## 📖 Використання
|
|
54
|
-
|
|
55
|
-
### Базове використання
|
|
56
|
-
|
|
57
|
-
```vue
|
|
58
|
-
<template>
|
|
59
|
-
<div>
|
|
60
|
-
<VsRichtext v-model="content" />
|
|
61
|
-
</div>
|
|
62
|
-
</template>
|
|
63
|
-
|
|
64
|
-
<script setup>
|
|
65
|
-
import { ref } from 'vue'
|
|
66
|
-
import VsRichtext from '@opengis/richtext'
|
|
67
|
-
|
|
68
|
-
const content = ref('')
|
|
69
|
-
</script>
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
### Налаштування висоти
|
|
73
|
-
|
|
74
|
-
```vue
|
|
75
|
-
<VsRichtext v-model="content" height="500px" />
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
### Кастомний toolbar
|
|
79
|
-
|
|
80
|
-
```vue
|
|
81
|
-
<VsRichtext
|
|
82
|
-
v-model="content"
|
|
83
|
-
:toolbar="['bold', 'italic', 'underline', 'link']"
|
|
84
|
-
/>
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
### Використання готових наборів
|
|
88
|
-
|
|
89
|
-
```vue
|
|
90
|
-
<!-- Базовий набір -->
|
|
91
|
-
<VsRichtext v-model="content" toolbar="basic" />
|
|
92
|
-
|
|
93
|
-
<!-- Стандартний набір (за замовчуванням) -->
|
|
94
|
-
<VsRichtext v-model="content" toolbar="default" />
|
|
95
|
-
|
|
96
|
-
<!-- Повний набір -->
|
|
97
|
-
<VsRichtext v-model="content" toolbar="full" />
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## 🎛️ API
|
|
101
|
-
|
|
102
|
-
### Props
|
|
103
|
-
|
|
104
|
-
| Параметр | Тип | За замовчуванням | Опис |
|
|
105
|
-
|----------|-----|------------------|------|
|
|
106
|
-
| `modelValue` | `String` | `""` | Вміст редактора (v-model) |
|
|
107
|
-
| `height` | `String` | `"300px"` | Висота редактора |
|
|
108
|
-
| `toolbar` | `Array \| String` | `"default"` | Набір кнопок toolbar |
|
|
109
|
-
|
|
110
|
-
### Toolbar Presets
|
|
111
|
-
|
|
112
|
-
#### `basic` - Базовий набір
|
|
113
|
-
- Історія змін
|
|
114
|
-
- Жирний, курсив, підкреслення, закреслення
|
|
115
|
-
- Вирівнювання тексту
|
|
116
|
-
- Списки (марковані та нумеровані)
|
|
117
|
-
- Посилання та зображення
|
|
118
|
-
- Очищення форматування
|
|
119
|
-
- Довідка
|
|
120
|
-
|
|
121
|
-
#### `default` - Стандартний набір (рекомендований)
|
|
122
|
-
- Всі функції з `basic`
|
|
123
|
-
- Заголовки
|
|
124
|
-
- Кольори тексту та фону
|
|
125
|
-
- Підсвічування
|
|
126
|
-
- Блоки коду
|
|
127
|
-
- Таблиці
|
|
128
|
-
- Горизонтальні лінії
|
|
129
|
-
- Повноекранний режим
|
|
130
|
-
- HTML режим
|
|
131
|
-
|
|
132
|
-
#### `full` - Повний набір
|
|
133
|
-
- Всі функції з `default`
|
|
134
|
-
- Сімейство шрифтів
|
|
135
|
-
- Розмір шрифту
|
|
136
|
-
- Цитати
|
|
137
|
-
- Верхній/нижній індекс
|
|
138
|
-
- Історія змін
|
|
139
|
-
|
|
140
|
-
### Доступні контроли
|
|
141
|
-
|
|
142
|
-
| Контроль | Опис | Preset |
|
|
143
|
-
|----------|------|--------|
|
|
144
|
-
| `history` | Історія змін (відміна/повернення) | full |
|
|
145
|
-
| `heading` | Заголовки (H1-H6) | default, full |
|
|
146
|
-
| `font_family` | Сімейство шрифтів | full |
|
|
147
|
-
| `font_size` | Розмір шрифту | full |
|
|
148
|
-
| `bold` | Жирний текст | basic, default, full |
|
|
149
|
-
| `italic` | Курсив | basic, default, full |
|
|
150
|
-
| `underline` | Підкреслення | basic, default, full |
|
|
151
|
-
| `strike` | Закреслення | basic, default, full |
|
|
152
|
-
| `color` | Колір тексту | default, full |
|
|
153
|
-
| `background_color` | Колір фону | default, full |
|
|
154
|
-
| `highlight` | Підсвічування | default, full |
|
|
155
|
-
| `text_align` | Вирівнювання тексту | basic, default, full |
|
|
156
|
-
| `bullet_list` | Марковані списки | basic, default, full |
|
|
157
|
-
| `ordered_list` | Нумеровані списки | basic, default, full |
|
|
158
|
-
| `blockquote` | Цитати | full |
|
|
159
|
-
| `codeblock` | Блоки коду | default, full |
|
|
160
|
-
| `table` | Таблиці | default, full |
|
|
161
|
-
| `link` | Посилання | basic, default, full |
|
|
162
|
-
| `image` | Зображення | basic, default, full |
|
|
163
|
-
| `horizontal_rule` | Горизонтальні лінії | default, full |
|
|
164
|
-
| `superscript` | Верхній індекс | full |
|
|
165
|
-
| `subscript` | Нижній індекс | full |
|
|
166
|
-
| `clear_formatting` | Очищення форматування | basic, default, full |
|
|
167
|
-
| `fullscreen` | Повноекранний режим | default, full |
|
|
168
|
-
| `html_mode` | HTML режим | default, full |
|
|
169
|
-
| `help` | Довідка | basic, default, full |
|
|
170
|
-
|
|
171
|
-
## 🌍 Міжнародна підтримка (i18n)
|
|
172
|
-
|
|
173
|
-
Компонент підтримує багатомовність з наступними мовами:
|
|
174
|
-
- **Українська** (за замовчуванням)
|
|
175
|
-
- **Англійська**
|
|
176
|
-
|
|
177
|
-
### Налаштування мови
|
|
178
|
-
|
|
179
|
-
```javascript
|
|
180
|
-
import { createI18n } from 'vue-i18n'
|
|
181
|
-
import i18n from '@opengis/richtext/i18n'
|
|
182
|
-
|
|
183
|
-
const app = createApp(App)
|
|
184
|
-
app.use(i18n)
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
## 🎨 Стилізація
|
|
188
|
-
|
|
189
|
-
Компонент використовує Tailwind CSS для стилізації. Всі стилі можна кастомізувати через CSS змінні або прямим перевизначенням класів.
|
|
190
|
-
|
|
191
|
-
### Кастомні стилі
|
|
192
|
-
|
|
193
|
-
```css
|
|
194
|
-
/* Кастомізація toolbar */
|
|
195
|
-
.vs-richtext .toolbar {
|
|
196
|
-
background-color: #f8f9fa;
|
|
197
|
-
border-bottom: 1px solid #e9ecef;
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
/* Кастомізація редактора */
|
|
201
|
-
.vs-richtext .editor-content {
|
|
202
|
-
min-height: 200px;
|
|
203
|
-
padding: 16px;
|
|
204
|
-
}
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
## 🔧 Розширення функціоналу
|
|
208
|
-
|
|
209
|
-
### Додавання власних контролів
|
|
210
|
-
|
|
211
|
-
```vue
|
|
212
|
-
<!-- Власний контроль -->
|
|
213
|
-
<template>
|
|
214
|
-
<button @click="customAction" class="custom-control">
|
|
215
|
-
Custom Action
|
|
216
|
-
</button>
|
|
217
|
-
</template>
|
|
218
|
-
|
|
219
|
-
<script setup>
|
|
220
|
-
const props = defineProps({ editor: Object })
|
|
221
|
-
|
|
222
|
-
const customAction = () => {
|
|
223
|
-
if (props.editor) {
|
|
224
|
-
// Ваша логіка
|
|
225
|
-
props.editor.commands.insertContent('Custom content')
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
</script>
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
### Кастомні розширення TipTap
|
|
232
|
-
|
|
233
|
-
```javascript
|
|
234
|
-
import { useRichTextEditor } from '@opengis/richtext/composables'
|
|
235
|
-
|
|
236
|
-
const { editor } = useRichTextEditor({
|
|
237
|
-
extensions: [
|
|
238
|
-
// Ваші кастомні розширення
|
|
239
|
-
CustomExtension.configure({
|
|
240
|
-
// налаштування
|
|
241
|
-
})
|
|
242
|
-
]
|
|
243
|
-
})
|
|
244
|
-
```
|
|
245
|
-
|
|
246
|
-
## 📱 Адаптивність
|
|
247
|
-
|
|
248
|
-
Компонент повністю адаптивний та працює на всіх пристроях:
|
|
249
|
-
- **Desktop** - повний функціонал з усіма контролами
|
|
250
|
-
- **Tablet** - оптимізований інтерфейс
|
|
251
|
-
- **Mobile** - спрощений toolbar з основними функціями
|
|
252
|
-
|
|
253
|
-
## 🎯 HTML режим
|
|
254
|
-
|
|
255
|
-
HTML режим надає можливість прямого редагування HTML коду з використанням Monaco Editor:
|
|
256
|
-
|
|
257
|
-
### Особливості HTML режиму:
|
|
258
|
-
- **Підсвічування синтаксису** - яскраве підсвічування HTML тегів, атрибутів та значень
|
|
259
|
-
- **Автодоповнення** - розумні підказки для HTML атрибутів
|
|
260
|
-
- **Форматування коду** - автоматичне форматування HTML
|
|
261
|
-
- **Валідація** - перевірка синтаксису HTML
|
|
262
|
-
- **Теми** - підтримка світлої та темної теми
|
|
263
|
-
|
|
264
|
-
## 🗂️ Робота з таблицями
|
|
265
|
-
|
|
266
|
-
Компонент надає повнофункціональну роботу з таблицями:
|
|
267
|
-
|
|
268
|
-
### Можливості таблиць:
|
|
269
|
-
- **Створення таблиць** - таблиці різних розмірів
|
|
270
|
-
- **Додавання рядків/стовпців** - динамічне розширення
|
|
271
|
-
- **Видалення рядків/стовпців** - очищення структури
|
|
272
|
-
- **Об'єднання клітинок** - створення складних структур
|
|
273
|
-
- **Розділення клітинок** - повернення до стандартної структури
|
|
274
|
-
- **Зміна розміру** - інтерактивне змінення розмірів
|
|
275
|
-
- **Стилювання** - налаштування зовнішнього вигляду
|
|
276
|
-
|
|
277
|
-
## 📁 Структура проекту
|
|
278
|
-
|
|
279
|
-
```
|
|
280
|
-
src/
|
|
281
|
-
├── components/
|
|
282
|
-
│ ├── vs-richtext.vue # Основний компонент
|
|
283
|
-
│ ├── controls/ # Контроли toolbar
|
|
284
|
-
│ │ ├── index.ts
|
|
285
|
-
│ │ ├── vs-editor-boldtext.vue
|
|
286
|
-
│ │ ├── vs-editor-italic.vue
|
|
287
|
-
│ │ ├── vs-editor-table.vue
|
|
288
|
-
│ │ └── ...
|
|
289
|
-
│ ├── helpers/ # Допоміжні компоненти
|
|
290
|
-
│ │ ├── monaco-editor.vue
|
|
291
|
-
│ │ ├── handlePaste.js
|
|
292
|
-
│ │ ├── customHeading.js
|
|
293
|
-
│ │ └── customParagraph.js
|
|
294
|
-
│ ├── shared-components/ # Спільні компоненти
|
|
295
|
-
│ │ ├── vs-popover.vue
|
|
296
|
-
│ │ ├── vs-dialog.vue
|
|
297
|
-
│ │ └── vs-form-color-picker.vue
|
|
298
|
-
│ └── toolbarPresets.js # Набори кнопок
|
|
299
|
-
├── composables/ # Vue 3 композабли
|
|
300
|
-
│ ├── useRichTextEditor.js
|
|
301
|
-
│ ├── useHtmlMode.js
|
|
302
|
-
│ └── useFullscreen.js
|
|
303
|
-
├── i18n/ # Міжнародна підтримка
|
|
304
|
-
│ ├── i18n.js
|
|
305
|
-
│ └── locales/
|
|
306
|
-
│ ├── en/
|
|
307
|
-
│ └── uk/
|
|
308
|
-
└── utils/ # Утиліти
|
|
309
|
-
├── index.js
|
|
310
|
-
└── dynamic.position.js
|
|
311
|
-
```
|
|
312
|
-
|
|
313
|
-
## 🔄 Життєвий цикл
|
|
314
|
-
|
|
315
|
-
### Ініціалізація
|
|
316
|
-
1. Створення TipTap редактора з розширеннями
|
|
317
|
-
2. Налаштування toolbar з обраними контролами
|
|
318
|
-
3. Ініціалізація композаблів (HTML режим, повноекранний режим)
|
|
319
|
-
4. Підключення обробників подій
|
|
320
|
-
|
|
321
|
-
### Оновлення контенту
|
|
322
|
-
1. Відстеження змін в редакторі
|
|
323
|
-
2. Синхронізація з v-model
|
|
324
|
-
3. Оновлення HTML контенту
|
|
325
|
-
4. Емітування подій до батьківського компонента
|
|
326
|
-
|
|
327
|
-
### Очищення
|
|
328
|
-
1. Відключення обробників подій
|
|
329
|
-
2. Очищення TipTap редактора
|
|
330
|
-
3. Знищення Monaco Editor (якщо використовується)
|
|
331
|
-
|
|
332
|
-
## 🐛 Відомі обмеження
|
|
333
|
-
|
|
334
|
-
1. **Завантаження файлів** - потребує налаштування backend endpoint
|
|
335
|
-
2. **Зображення** - автоматичне зменшення розміру не підтримується
|
|
336
|
-
3. **Печатка** - стилі можуть відрізнятися від екрану
|
|
337
|
-
4. **Стара браузерна підтримка** - потребує поліфілів для IE11
|
|
338
|
-
|
|
339
|
-
## 🤝 Внесок у розробку
|
|
340
|
-
|
|
341
|
-
1. Fork репозиторію
|
|
342
|
-
2. Створіть feature branch (`git checkout -b feature/amazing-feature`)
|
|
343
|
-
3. Commit зміни (`git commit -m 'Add amazing feature'`)
|
|
344
|
-
4. Push до branch (`git push origin feature/amazing-feature`)
|
|
345
|
-
5. Створіть Pull Request
|
|
346
|
-
|
|
347
|
-
## 📄 Ліцензія
|
|
348
|
-
|
|
349
|
-
Цей проект ліцензовано під MIT License - дивіться файл [LICENSE](LICENSE) для деталей.
|
|
350
|
-
|
|
351
|
-
## 👥 Автори
|
|
352
|
-
|
|
353
|
-
- **Softpro** - *Початкова розробка* - [@softpro](https://github.com/softpro)
|
|
354
|
-
|
|
355
|
-
## 🙏 Подяки
|
|
356
|
-
|
|
357
|
-
- [TipTap](https://tiptap.dev/) - за чудовий rich text editor
|
|
358
|
-
- [Monaco Editor](https://microsoft.github.io/monaco-editor/) - за потужний code editor
|
|
359
|
-
- [Vue 3](https://vuejs.org/) - за сучасний фреймворк
|
|
360
|
-
- [Tailwind CSS](https://tailwindcss.com/) - за утилітарні CSS класи
|
|
361
|
-
|
|
362
|
-
---
|
|
363
|
-
|
|
1
|
+
# VsRichtext - Потужний Rich Text Editor для Vue 3
|
|
2
|
+
|
|
3
|
+
## 📋 Опис
|
|
4
|
+
|
|
5
|
+
**VsRichtext** - це сучасний, повнофункціональний rich text редактор для Vue 3, побудований на базі TipTap. Компонент надає широкий спектр можливостей для редагування тексту, включаючи форматування, вставку медіа-контенту, роботу з таблицями та багато іншого.
|
|
6
|
+
|
|
7
|
+
## ✨ Основні можливості
|
|
8
|
+
|
|
9
|
+
### 🎨 Форматування тексту
|
|
10
|
+
- **Жирний текст** - зручне перемикання жирного шрифту
|
|
11
|
+
- **Курсив** - підкреслення важливих частин тексту
|
|
12
|
+
- **Підкреслення** - виділення ключових моментів
|
|
13
|
+
- **Закреслення** - позначення застарілої інформації
|
|
14
|
+
- **Верхній/нижній індекс** - для математичних формул та хімічних позначень
|
|
15
|
+
|
|
16
|
+
### 🎯 Типографіка
|
|
17
|
+
- **Заголовки** - 6 рівнів заголовків (H1-H6) з автоматичним стилюванням
|
|
18
|
+
- **Параграфи** - зручне форматування основних блоків тексту
|
|
19
|
+
- **Цитати** - виділення важливих цитат зі спеціальним стилюванням
|
|
20
|
+
- **Код** - вбудований код та блоки коду з підсвічуванням синтаксису
|
|
21
|
+
|
|
22
|
+
### 🌈 Кольори та стилі
|
|
23
|
+
- **Колір тексту** - вибір з палітри кольорів або власний колір
|
|
24
|
+
- **Колір фону** - виділення тексту кольором фону
|
|
25
|
+
- **Підсвічування** - маркерне виділення важливих частин
|
|
26
|
+
- **Шрифти** - вибір сімейства шрифтів
|
|
27
|
+
- **Розмір шрифту** - налаштування розміру тексту
|
|
28
|
+
|
|
29
|
+
### 📝 Структурування контенту
|
|
30
|
+
- **Списки** - марковані та нумеровані списки
|
|
31
|
+
- **Вирівнювання** - ліві, центральні, праві та по ширині
|
|
32
|
+
- **Горизонтальні лінії** - розділення контенту
|
|
33
|
+
- **Таблиці** - повнофункціональні таблиці з можливістю редагування
|
|
34
|
+
|
|
35
|
+
### 🔗 Медіа та посилання
|
|
36
|
+
- **Посилання** - створення та редагування посилань
|
|
37
|
+
- **Зображення** - завантаження та вставка зображень
|
|
38
|
+
- **Файли** - підтримка завантаження файлів
|
|
39
|
+
|
|
40
|
+
### 🛠️ Додаткові функції
|
|
41
|
+
- **HTML режим** - прямий редагування HTML коду з Monaco Editor
|
|
42
|
+
- **Повноекранний режим** - зручне редагування на весь екран
|
|
43
|
+
- **Історія змін** - відміна та повернення дій
|
|
44
|
+
- **Очищення форматування** - швидке видалення всіх стилів
|
|
45
|
+
- **Довідка** - вбудована система допомоги
|
|
46
|
+
|
|
47
|
+
## 🚀 Встановлення
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npm install @opengis/richtext
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## 📖 Використання
|
|
54
|
+
|
|
55
|
+
### Базове використання
|
|
56
|
+
|
|
57
|
+
```vue
|
|
58
|
+
<template>
|
|
59
|
+
<div>
|
|
60
|
+
<VsRichtext v-model="content" />
|
|
61
|
+
</div>
|
|
62
|
+
</template>
|
|
63
|
+
|
|
64
|
+
<script setup>
|
|
65
|
+
import { ref } from 'vue'
|
|
66
|
+
import VsRichtext from '@opengis/richtext'
|
|
67
|
+
|
|
68
|
+
const content = ref('')
|
|
69
|
+
</script>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Налаштування висоти
|
|
73
|
+
|
|
74
|
+
```vue
|
|
75
|
+
<VsRichtext v-model="content" height="500px" />
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Кастомний toolbar
|
|
79
|
+
|
|
80
|
+
```vue
|
|
81
|
+
<VsRichtext
|
|
82
|
+
v-model="content"
|
|
83
|
+
:toolbar="['bold', 'italic', 'underline', 'link']"
|
|
84
|
+
/>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Використання готових наборів
|
|
88
|
+
|
|
89
|
+
```vue
|
|
90
|
+
<!-- Базовий набір -->
|
|
91
|
+
<VsRichtext v-model="content" toolbar="basic" />
|
|
92
|
+
|
|
93
|
+
<!-- Стандартний набір (за замовчуванням) -->
|
|
94
|
+
<VsRichtext v-model="content" toolbar="default" />
|
|
95
|
+
|
|
96
|
+
<!-- Повний набір -->
|
|
97
|
+
<VsRichtext v-model="content" toolbar="full" />
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## 🎛️ API
|
|
101
|
+
|
|
102
|
+
### Props
|
|
103
|
+
|
|
104
|
+
| Параметр | Тип | За замовчуванням | Опис |
|
|
105
|
+
|----------|-----|------------------|------|
|
|
106
|
+
| `modelValue` | `String` | `""` | Вміст редактора (v-model) |
|
|
107
|
+
| `height` | `String` | `"300px"` | Висота редактора |
|
|
108
|
+
| `toolbar` | `Array \| String` | `"default"` | Набір кнопок toolbar |
|
|
109
|
+
|
|
110
|
+
### Toolbar Presets
|
|
111
|
+
|
|
112
|
+
#### `basic` - Базовий набір
|
|
113
|
+
- Історія змін
|
|
114
|
+
- Жирний, курсив, підкреслення, закреслення
|
|
115
|
+
- Вирівнювання тексту
|
|
116
|
+
- Списки (марковані та нумеровані)
|
|
117
|
+
- Посилання та зображення
|
|
118
|
+
- Очищення форматування
|
|
119
|
+
- Довідка
|
|
120
|
+
|
|
121
|
+
#### `default` - Стандартний набір (рекомендований)
|
|
122
|
+
- Всі функції з `basic`
|
|
123
|
+
- Заголовки
|
|
124
|
+
- Кольори тексту та фону
|
|
125
|
+
- Підсвічування
|
|
126
|
+
- Блоки коду
|
|
127
|
+
- Таблиці
|
|
128
|
+
- Горизонтальні лінії
|
|
129
|
+
- Повноекранний режим
|
|
130
|
+
- HTML режим
|
|
131
|
+
|
|
132
|
+
#### `full` - Повний набір
|
|
133
|
+
- Всі функції з `default`
|
|
134
|
+
- Сімейство шрифтів
|
|
135
|
+
- Розмір шрифту
|
|
136
|
+
- Цитати
|
|
137
|
+
- Верхній/нижній індекс
|
|
138
|
+
- Історія змін
|
|
139
|
+
|
|
140
|
+
### Доступні контроли
|
|
141
|
+
|
|
142
|
+
| Контроль | Опис | Preset |
|
|
143
|
+
|----------|------|--------|
|
|
144
|
+
| `history` | Історія змін (відміна/повернення) | full |
|
|
145
|
+
| `heading` | Заголовки (H1-H6) | default, full |
|
|
146
|
+
| `font_family` | Сімейство шрифтів | full |
|
|
147
|
+
| `font_size` | Розмір шрифту | full |
|
|
148
|
+
| `bold` | Жирний текст | basic, default, full |
|
|
149
|
+
| `italic` | Курсив | basic, default, full |
|
|
150
|
+
| `underline` | Підкреслення | basic, default, full |
|
|
151
|
+
| `strike` | Закреслення | basic, default, full |
|
|
152
|
+
| `color` | Колір тексту | default, full |
|
|
153
|
+
| `background_color` | Колір фону | default, full |
|
|
154
|
+
| `highlight` | Підсвічування | default, full |
|
|
155
|
+
| `text_align` | Вирівнювання тексту | basic, default, full |
|
|
156
|
+
| `bullet_list` | Марковані списки | basic, default, full |
|
|
157
|
+
| `ordered_list` | Нумеровані списки | basic, default, full |
|
|
158
|
+
| `blockquote` | Цитати | full |
|
|
159
|
+
| `codeblock` | Блоки коду | default, full |
|
|
160
|
+
| `table` | Таблиці | default, full |
|
|
161
|
+
| `link` | Посилання | basic, default, full |
|
|
162
|
+
| `image` | Зображення | basic, default, full |
|
|
163
|
+
| `horizontal_rule` | Горизонтальні лінії | default, full |
|
|
164
|
+
| `superscript` | Верхній індекс | full |
|
|
165
|
+
| `subscript` | Нижній індекс | full |
|
|
166
|
+
| `clear_formatting` | Очищення форматування | basic, default, full |
|
|
167
|
+
| `fullscreen` | Повноекранний режим | default, full |
|
|
168
|
+
| `html_mode` | HTML режим | default, full |
|
|
169
|
+
| `help` | Довідка | basic, default, full |
|
|
170
|
+
|
|
171
|
+
## 🌍 Міжнародна підтримка (i18n)
|
|
172
|
+
|
|
173
|
+
Компонент підтримує багатомовність з наступними мовами:
|
|
174
|
+
- **Українська** (за замовчуванням)
|
|
175
|
+
- **Англійська**
|
|
176
|
+
|
|
177
|
+
### Налаштування мови
|
|
178
|
+
|
|
179
|
+
```javascript
|
|
180
|
+
import { createI18n } from 'vue-i18n'
|
|
181
|
+
import i18n from '@opengis/richtext/i18n'
|
|
182
|
+
|
|
183
|
+
const app = createApp(App)
|
|
184
|
+
app.use(i18n)
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
## 🎨 Стилізація
|
|
188
|
+
|
|
189
|
+
Компонент використовує Tailwind CSS для стилізації. Всі стилі можна кастомізувати через CSS змінні або прямим перевизначенням класів.
|
|
190
|
+
|
|
191
|
+
### Кастомні стилі
|
|
192
|
+
|
|
193
|
+
```css
|
|
194
|
+
/* Кастомізація toolbar */
|
|
195
|
+
.vs-richtext .toolbar {
|
|
196
|
+
background-color: #f8f9fa;
|
|
197
|
+
border-bottom: 1px solid #e9ecef;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Кастомізація редактора */
|
|
201
|
+
.vs-richtext .editor-content {
|
|
202
|
+
min-height: 200px;
|
|
203
|
+
padding: 16px;
|
|
204
|
+
}
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## 🔧 Розширення функціоналу
|
|
208
|
+
|
|
209
|
+
### Додавання власних контролів
|
|
210
|
+
|
|
211
|
+
```vue
|
|
212
|
+
<!-- Власний контроль -->
|
|
213
|
+
<template>
|
|
214
|
+
<button @click="customAction" class="custom-control">
|
|
215
|
+
Custom Action
|
|
216
|
+
</button>
|
|
217
|
+
</template>
|
|
218
|
+
|
|
219
|
+
<script setup>
|
|
220
|
+
const props = defineProps({ editor: Object })
|
|
221
|
+
|
|
222
|
+
const customAction = () => {
|
|
223
|
+
if (props.editor) {
|
|
224
|
+
// Ваша логіка
|
|
225
|
+
props.editor.commands.insertContent('Custom content')
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
</script>
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
### Кастомні розширення TipTap
|
|
232
|
+
|
|
233
|
+
```javascript
|
|
234
|
+
import { useRichTextEditor } from '@opengis/richtext/composables'
|
|
235
|
+
|
|
236
|
+
const { editor } = useRichTextEditor({
|
|
237
|
+
extensions: [
|
|
238
|
+
// Ваші кастомні розширення
|
|
239
|
+
CustomExtension.configure({
|
|
240
|
+
// налаштування
|
|
241
|
+
})
|
|
242
|
+
]
|
|
243
|
+
})
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
## 📱 Адаптивність
|
|
247
|
+
|
|
248
|
+
Компонент повністю адаптивний та працює на всіх пристроях:
|
|
249
|
+
- **Desktop** - повний функціонал з усіма контролами
|
|
250
|
+
- **Tablet** - оптимізований інтерфейс
|
|
251
|
+
- **Mobile** - спрощений toolbar з основними функціями
|
|
252
|
+
|
|
253
|
+
## 🎯 HTML режим
|
|
254
|
+
|
|
255
|
+
HTML режим надає можливість прямого редагування HTML коду з використанням Monaco Editor:
|
|
256
|
+
|
|
257
|
+
### Особливості HTML режиму:
|
|
258
|
+
- **Підсвічування синтаксису** - яскраве підсвічування HTML тегів, атрибутів та значень
|
|
259
|
+
- **Автодоповнення** - розумні підказки для HTML атрибутів
|
|
260
|
+
- **Форматування коду** - автоматичне форматування HTML
|
|
261
|
+
- **Валідація** - перевірка синтаксису HTML
|
|
262
|
+
- **Теми** - підтримка світлої та темної теми
|
|
263
|
+
|
|
264
|
+
## 🗂️ Робота з таблицями
|
|
265
|
+
|
|
266
|
+
Компонент надає повнофункціональну роботу з таблицями:
|
|
267
|
+
|
|
268
|
+
### Можливості таблиць:
|
|
269
|
+
- **Створення таблиць** - таблиці різних розмірів
|
|
270
|
+
- **Додавання рядків/стовпців** - динамічне розширення
|
|
271
|
+
- **Видалення рядків/стовпців** - очищення структури
|
|
272
|
+
- **Об'єднання клітинок** - створення складних структур
|
|
273
|
+
- **Розділення клітинок** - повернення до стандартної структури
|
|
274
|
+
- **Зміна розміру** - інтерактивне змінення розмірів
|
|
275
|
+
- **Стилювання** - налаштування зовнішнього вигляду
|
|
276
|
+
|
|
277
|
+
## 📁 Структура проекту
|
|
278
|
+
|
|
279
|
+
```
|
|
280
|
+
src/
|
|
281
|
+
├── components/
|
|
282
|
+
│ ├── vs-richtext.vue # Основний компонент
|
|
283
|
+
│ ├── controls/ # Контроли toolbar
|
|
284
|
+
│ │ ├── index.ts
|
|
285
|
+
│ │ ├── vs-editor-boldtext.vue
|
|
286
|
+
│ │ ├── vs-editor-italic.vue
|
|
287
|
+
│ │ ├── vs-editor-table.vue
|
|
288
|
+
│ │ └── ...
|
|
289
|
+
│ ├── helpers/ # Допоміжні компоненти
|
|
290
|
+
│ │ ├── monaco-editor.vue
|
|
291
|
+
│ │ ├── handlePaste.js
|
|
292
|
+
│ │ ├── customHeading.js
|
|
293
|
+
│ │ └── customParagraph.js
|
|
294
|
+
│ ├── shared-components/ # Спільні компоненти
|
|
295
|
+
│ │ ├── vs-popover.vue
|
|
296
|
+
│ │ ├── vs-dialog.vue
|
|
297
|
+
│ │ └── vs-form-color-picker.vue
|
|
298
|
+
│ └── toolbarPresets.js # Набори кнопок
|
|
299
|
+
├── composables/ # Vue 3 композабли
|
|
300
|
+
│ ├── useRichTextEditor.js
|
|
301
|
+
│ ├── useHtmlMode.js
|
|
302
|
+
│ └── useFullscreen.js
|
|
303
|
+
├── i18n/ # Міжнародна підтримка
|
|
304
|
+
│ ├── i18n.js
|
|
305
|
+
│ └── locales/
|
|
306
|
+
│ ├── en/
|
|
307
|
+
│ └── uk/
|
|
308
|
+
└── utils/ # Утиліти
|
|
309
|
+
├── index.js
|
|
310
|
+
└── dynamic.position.js
|
|
311
|
+
```
|
|
312
|
+
|
|
313
|
+
## 🔄 Життєвий цикл
|
|
314
|
+
|
|
315
|
+
### Ініціалізація
|
|
316
|
+
1. Створення TipTap редактора з розширеннями
|
|
317
|
+
2. Налаштування toolbar з обраними контролами
|
|
318
|
+
3. Ініціалізація композаблів (HTML режим, повноекранний режим)
|
|
319
|
+
4. Підключення обробників подій
|
|
320
|
+
|
|
321
|
+
### Оновлення контенту
|
|
322
|
+
1. Відстеження змін в редакторі
|
|
323
|
+
2. Синхронізація з v-model
|
|
324
|
+
3. Оновлення HTML контенту
|
|
325
|
+
4. Емітування подій до батьківського компонента
|
|
326
|
+
|
|
327
|
+
### Очищення
|
|
328
|
+
1. Відключення обробників подій
|
|
329
|
+
2. Очищення TipTap редактора
|
|
330
|
+
3. Знищення Monaco Editor (якщо використовується)
|
|
331
|
+
|
|
332
|
+
## 🐛 Відомі обмеження
|
|
333
|
+
|
|
334
|
+
1. **Завантаження файлів** - потребує налаштування backend endpoint
|
|
335
|
+
2. **Зображення** - автоматичне зменшення розміру не підтримується
|
|
336
|
+
3. **Печатка** - стилі можуть відрізнятися від екрану
|
|
337
|
+
4. **Стара браузерна підтримка** - потребує поліфілів для IE11
|
|
338
|
+
|
|
339
|
+
## 🤝 Внесок у розробку
|
|
340
|
+
|
|
341
|
+
1. Fork репозиторію
|
|
342
|
+
2. Створіть feature branch (`git checkout -b feature/amazing-feature`)
|
|
343
|
+
3. Commit зміни (`git commit -m 'Add amazing feature'`)
|
|
344
|
+
4. Push до branch (`git push origin feature/amazing-feature`)
|
|
345
|
+
5. Створіть Pull Request
|
|
346
|
+
|
|
347
|
+
## 📄 Ліцензія
|
|
348
|
+
|
|
349
|
+
Цей проект ліцензовано під MIT License - дивіться файл [LICENSE](LICENSE) для деталей.
|
|
350
|
+
|
|
351
|
+
## 👥 Автори
|
|
352
|
+
|
|
353
|
+
- **Softpro** - *Початкова розробка* - [@softpro](https://github.com/softpro)
|
|
354
|
+
|
|
355
|
+
## 🙏 Подяки
|
|
356
|
+
|
|
357
|
+
- [TipTap](https://tiptap.dev/) - за чудовий rich text editor
|
|
358
|
+
- [Monaco Editor](https://microsoft.github.io/monaco-editor/) - за потужний code editor
|
|
359
|
+
- [Vue 3](https://vuejs.org/) - за сучасний фреймворк
|
|
360
|
+
- [Tailwind CSS](https://tailwindcss.com/) - за утилітарні CSS класи
|
|
361
|
+
|
|
362
|
+
---
|
|
363
|
+
|
|
364
364
|
**VsRichtext** - ваш надійний помічник для створення багатого текстового контенту! 🚀
|