syncfusion-react-rich-text-editor — скилл для Claude Code
Помогает настроить редактор RichTextEditorComponent из пакета ej2-react-richtexteditor в проектах на React. Пригодится для сборки HTML- или Markdown-редактора с панелью инструментов и медиа.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a claude-codeЧто делает syncfusion-react-rich-text-editor
Скилл содержит инструкции по настройке компонента RichTextEditorComponent. Он помогает переключаться между визуальным режимом HTML и разметкой Markdown, вставлять аудио, видео или изображения, а также добавлять слэш-меню, эмодзи и тегирование через mentions.
Архитектура редактора построена на инъекции модулей через тег <Inject />. Если подключить лишние службы, бандл неоправданно вырастет, поэтому подключать стоит строго нужные части: Toolbar, HtmlEditor, PasteCleanup или AIAssistant. Для внешнего вида понадобится подключить файл стилей, например из пакета @syncfusion/ej2-tailwind3-theme.
Отдельные разделы посвящены сохранению состояния. Редактор поддерживает двустороннее связывание, таймер автосохранения через saveInterval, очистку форматирования при вставке и прямой экспорт документа в Word или PDF.
Какие задачи решает
- настроить WYSIWYG или Markdown-редактор на React
- подключить вставку картинок, аудио и видеофайлов
- внедрить слэш-команды, эмодзи и тегирование через mentions
- настроить автосохранение текста и экспорт документа в PDF или Word
Примеры запросов агенту
- Добавь RichTextEditorComponent с поддержкой Markdown, подсчётом символов и плавающей панелью инструментов.
- Настрой очистку форматирования при вставке и подключи слэш-меню в редактор Syncfusion.
- Покажи, как подключить модуль AIAssistant и экспорт в PDF для RichTextEditorComponent.
Как установить syncfusion-react-rich-text-editor
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-rich-text-editor/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-rich-text-editor/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-rich-text-editor/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-rich-text-editor/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-rich-text-editor2Вручную: положить файлы
.github/skills/syncfusion-react-rich-text-editor/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-rich-text-editorВручную: положить файлы
.devin/skills/syncfusion-react-rich-text-editor/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-rich-text-editor
Как установить syncfusion-react-rich-text-editor в Claude Code?
Выполните команду npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-rich-text-editor -a claude-code.
Что делает этот скилл?
Он предоставляет готовые шаблоны и правила для настройки редактора RichTextEditorComponent из библиотеки @syncfusion/ej2-react-richtexteditor.
Какие npm-пакеты нужны для запуска редактора?
Требуется установить основной пакет @syncfusion/ej2-react-richtexteditor и тему оформления, например @syncfusion/ej2-tailwind3-theme.
