Skip to content

Commit a6bfb12

Browse files
alexbaumgertneralexbaumgertner
committed
Add TinyMCE editor integration to PageForm component
- Introduced TinyMCEEditor component for rich text editing capabilities. - Updated PageForm to utilize TinyMCEEditor instead of TextArea for content input. - Enhanced CSS styles for TinyMCE editor to improve UI consistency. - Updated package.json and package-lock.json to include @tinymce/tinymce-react dependency.
1 parent 584f843 commit a6bfb12

8 files changed

Lines changed: 321 additions & 4 deletions

File tree

‎TINYMCE_SETUP.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# TinyMCE Setup Guide
2+
3+
## Getting Your API Key
4+
5+
1. **Go to** [https://www.tiny.cloud/auth/signup/](https://www.tiny.cloud/auth/signup/)
6+
2. **Sign up** for a free account
7+
3. **Get your API key** from the dashboard
8+
9+
## Environment Configuration
10+
11+
Create a `.env.local` file in your project root and add:
12+
13+
```bash
14+
NEXT_PUBLIC_TINYMCE_API_KEY=your-actual-api-key-here
15+
```
16+
17+
Replace `your-actual-api-key-here` with the API key you received from TinyMCE.
18+
19+
## Features
20+
21+
- ✅ Rich text editing (bold, italic, headings, lists)
22+
- ✅ Table support
23+
- ✅ Image handling
24+
- ✅ Russian language support (already configured)
25+
- ✅ Professional toolbar
26+
- ✅ Mobile responsive
27+
28+
## Russian Language Support
29+
30+
The editor is already configured with Russian language support. The Russian language file (`public/tinymce/langs/ru.js`) is included in the project and will automatically load when you use the editor.
31+
32+
## Usage
33+
34+
The TinyMCE editor is now integrated into your PageForm component and will automatically use the API key from your environment variables.
35+
36+
## Troubleshooting
37+
38+
If you still see the API key warning:
39+
1. Make sure your `.env.local` file is in the project root
40+
2. Restart your development server after adding the environment variable
41+
3. Verify the API key is correct
42+
43+
If you see language loading errors:
44+
1. Make sure the `public/tinymce/langs/` directory exists
45+
2. Verify the `ru.js` file is present in the directory
46+
3. Check that the file contains valid JavaScript code

‎package-lock.json‎

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@as-integrations/next": "^4.0.0",
1212
"@auth/drizzle-adapter": "^1.10.0",
1313
"@sentry/nextjs": "^9.42.1",
14+
"@tinymce/tinymce-react": "^6.3.0",
1415
"@vercel/analytics": "^1.5.0",
1516
"@vercel/blob": "^1.1.1",
1617
"@vercel/postgres": "^0.10.0",

‎public/tinymce/langs/ru.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
tinymce.addI18n('ru', {
2+
"Redo": "Повторить",
3+
"Undo": "Отменить",
4+
"Cut": "Вырезать",
5+
"Copy": "Копировать",
6+
"Paste": "Вставить",
7+
"Select all": "Выбрать все",
8+
"New document": "Новый документ",
9+
"Ok": "ОК",
10+
"Cancel": "Отмена",
11+
"Visual aids": "Визуальные подсказки",
12+
"Bold": "Полужирный",
13+
"Italic": "Курсив",
14+
"Underline": "Подчеркнутый",
15+
"Strikethrough": "Зачеркнутый",
16+
"Superscript": "Надстрочный",
17+
"Subscript": "Подстрочный",
18+
"Clear formatting": "Очистить форматирование",
19+
"Remove": "Удалить",
20+
"Align left": "По левому краю",
21+
"Align center": "По центру",
22+
"Align right": "По правому краю",
23+
"No alignment": "Без выравнивания",
24+
"Bullet list": "Маркированный список",
25+
"Numbered list": "Нумерованный список",
26+
"Decrease indent": "Уменьшить отступ",
27+
"Increase indent": "Увеличить отступ",
28+
"Close": "Закрыть",
29+
"Formats": "Форматы",
30+
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead.": "Ваш браузер не поддерживает прямой доступ к буферу обмена. Используйте сочетания клавиш Ctrl+X/C/V.",
31+
"Headers": "Заголовки",
32+
"Header 1": "Заголовок 1",
33+
"Header 2": "Заголовок 2",
34+
"Header 3": "Заголовок 3",
35+
"Header 4": "Заголовок 4",
36+
"Header 5": "Заголовок 5",
37+
"Header 6": "Заголовок 6",
38+
"Headings": "Заголовки",
39+
"Heading 1": "Заголовок 1",
40+
"Heading 2": "Заголовок 2",
41+
"Heading 3": "Заголовок 3",
42+
"Heading 4": "Заголовок 4",
43+
"Heading 5": "Заголовок 5",
44+
"Heading 6": "Заголовок 6",
45+
"Preformatted": "Предварительно отформатированный",
46+
"Div": "Div",
47+
"Pre": "Pre",
48+
"Code": "Код",
49+
"Paragraph": "Параграф",
50+
"Blockquote": "Цитата",
51+
"Inline": "Встроенный",
52+
"Blocks": "Блоки",
53+
"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "Вставка теперь в режиме простого текста. Содержимое будет вставляться как простой текст, пока вы не отключите эту опцию.",
54+
"Fonts": "Шрифты",
55+
"Font sizes": "Размеры шрифтов",
56+
"Class": "Класс",
57+
"Browse for an image": "Найти изображение",
58+
"OR": "ИЛИ",
59+
"Drop an image here": "Перетащите изображение сюда",
60+
"Upload": "Загрузить",
61+
"Uploading image": "Загрузка изображения",
62+
"Image description": "Описание изображения",
63+
"Source": "Источник",
64+
"Dimensions": "Размеры",
65+
"Constrain proportions": "Сохранять пропорции",
66+
"General": "Общие",
67+
"Advanced": "Дополнительно",
68+
"Style": "Стиль",
69+
"Vertical space": "Вертикальный отступ",
70+
"Horizontal space": "Горизонтальный отступ",
71+
"Border": "Граница",
72+
"Insert image": "Вставить изображение",
73+
"Image": "Изображение",
74+
"Image URL": "URL изображения",
75+
"Alternative description": "Альтернативное описание",
76+
"Title": "Заголовок",
77+
"Insert link": "Вставить ссылку",
78+
"Link": "Ссылка",
79+
"Text to display": "Текст для отображения",
80+
"Url": "URL",
81+
"Open link in...": "Открыть ссылку в...",
82+
"Current window": "Текущее окно",
83+
"None": "Нет",
84+
"New window": "Новое окно",
85+
"Open link": "Открыть ссылку",
86+
"Remove link": "Удалить ссылку",
87+
"Anchors": "Якоря",
88+
"Insert template": "Вставить шаблон",
89+
"Templates": "Шаблоны",
90+
"Background color": "Цвет фона",
91+
"Text color": "Цвет текста",
92+
"Show blocks": "Показать блоки",
93+
"Show invisible characters": "Показать невидимые символы",
94+
"Words: {0}": "Слов: {0}",
95+
"Insert": "Вставить",
96+
"File": "Файл",
97+
"Edit": "Редактировать",
98+
"Rich Text Area": "Область форматированного текста",
99+
"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "Область форматированного текста. Нажмите ALT-F9 для меню. Нажмите ALT-F10 для панели инструментов. Нажмите ALT-0 для справки.",
100+
"Tools": "Инструменты",
101+
"View": "Вид",
102+
"Table": "Таблица",
103+
"Format": "Формат"
104+
});

‎src/components/PageForm/PageForm.module.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,30 @@
1414
flex-direction: row;
1515
gap: 10px;
1616
}
17+
18+
/* TinyMCE Editor Styles */
19+
.form :global(.tox-tinymce) {
20+
border-radius: 4px;
21+
border: 1px solid #d1d5db;
22+
}
23+
24+
.form :global(.tox .tox-toolbar) {
25+
background-color: #f9fafb;
26+
border-bottom: 1px solid #e5e7eb;
27+
}
28+
29+
.form :global(.tox .tox-tbtn) {
30+
background-color: transparent;
31+
}
32+
33+
.form :global(.tox .tox-tbtn:hover) {
34+
background-color: #e5e7eb;
35+
}
36+
37+
.form :global(.tox .tox-edit-area) {
38+
border: none;
39+
}
40+
41+
.form :global(.tox .tox-edit-area__iframe) {
42+
background-color: white;
43+
}

‎src/components/PageForm/PageForm.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import classes from './PageForm.module.css'
44
import { Input } from '../Input'
55
import { TextArea } from '../TextArea'
66
import { Button } from '../Button'
7+
import { TinyMCEEditor } from './TinyMCEEditor'
78

89
export type PageProps = {
910
id?: string
@@ -83,13 +84,13 @@ export const PageForm = ({
8384
/>
8485
</fieldset>
8586
<fieldset>
86-
<TextArea
87+
<TinyMCEEditor
8788
id="content"
8889
name="content"
8990
value={formPage.content}
90-
onChange={handleChange}
91+
onChange={(value) => setFormPage({ ...formPage, content: value })}
9192
label="Content"
92-
rows={10}
93+
rows={15}
9394
/>
9495
</fieldset>
9596

‎src/components/PageForm/TinyMCEEditor.tsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
'use client'
2+
3+
import dynamic from 'next/dynamic'
4+
import { useEffect, useRef } from 'react'
5+
6+
// Dynamically import TinyMCE to avoid SSR issues
7+
const Editor = dynamic(
8+
() => import('@tinymce/tinymce-react').then((mod) => mod.Editor),
9+
{
10+
ssr: false,
11+
loading: () => (
12+
<div className="h-64 bg-gray-100 animate-pulse rounded border border-gray-300 flex items-center justify-center">
13+
<span className="text-gray-500">Loading editor...</span>
14+
</div>
15+
),
16+
}
17+
)
18+
19+
interface TinyMCEEditorProps {
20+
id: string
21+
name: string
22+
value: string
23+
onChange: (value: string) => void
24+
label: string
25+
rows?: number
26+
}
27+
28+
export const TinyMCEEditor = ({
29+
id,
30+
name,
31+
value,
32+
onChange,
33+
label,
34+
rows = 10,
35+
}: TinyMCEEditorProps) => {
36+
const editorRef = useRef<any>(null)
37+
38+
const handleEditorChange = (content: string) => {
39+
onChange(content)
40+
}
41+
42+
return (
43+
<div className="form-field">
44+
<label htmlFor={id} className="form-label">
45+
{label}
46+
</label>
47+
<Editor
48+
id={id}
49+
value={value}
50+
onEditorChange={handleEditorChange}
51+
onInit={(evt, editor) => (editorRef.current = editor)}
52+
apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY || 'your-api-key-here'}
53+
init={{
54+
height: Math.max(300, rows * 20),
55+
menubar: false,
56+
plugins: [
57+
'advlist',
58+
'autolink',
59+
'lists',
60+
'link',
61+
'image',
62+
'charmap',
63+
'preview',
64+
'anchor',
65+
'searchreplace',
66+
'visualblocks',
67+
'code',
68+
'fullscreen',
69+
'insertdatetime',
70+
'media',
71+
'table',
72+
'code',
73+
'help',
74+
'wordcount',
75+
],
76+
toolbar:
77+
'undo redo | blocks | ' +
78+
'bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter ' +
79+
'alignright alignjustify | bullist numlist outdent indent | ' +
80+
'removeformat | link image | table | code | help',
81+
content_style: `
82+
body {
83+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
84+
font-size: 14px;
85+
line-height: 1.6;
86+
color: #333;
87+
}
88+
h1, h2, h3, h4, h5, h6 {
89+
margin-top: 1em;
90+
margin-bottom: 0.5em;
91+
font-weight: 600;
92+
}
93+
p { margin-bottom: 1em; }
94+
ul, ol { margin-bottom: 1em; padding-left: 2em; }
95+
img { max-width: 100%; height: auto; }
96+
table { border-collapse: collapse; width: 100%; }
97+
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
98+
`,
99+
language: 'ru', // Russian language support
100+
branding: false,
101+
elementpath: false,
102+
resize: true,
103+
paste_data_images: true, // Allow pasting images
104+
images_upload_handler: (blobInfo, progress) => {
105+
// Handle image uploads here if needed
106+
return new Promise((resolve) => {
107+
// For now, just return a placeholder
108+
resolve(
109+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAffFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg=='
110+
)
111+
})
112+
},
113+
}}
114+
/>
115+
</div>
116+
)
117+
}

‎src/components/PageForm/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
import { PageForm, type PageProps } from './PageForm'
2+
import { TinyMCEEditor } from './TinyMCEEditor'
23

3-
export { PageForm, type PageProps }
4+
export { PageForm, type PageProps, TinyMCEEditor }

0 commit comments

Comments
 (0)