PHPackages mountainclans/livewire-tiptap - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. mountainclans/livewire-tiptap ActiveLibrary mountainclans/livewire-tiptap ============================= This is my package livewire-tiptap 1.3.0(2mo ago)043↓100%MITBladePHP ^8.2CI failing Since Jul 10Pushed 2mo agoCompare [ Source](https://github.com/mountainclans/livewire-tiptap)[ Packagist](https://packagist.org/packages/mountainclans/livewire-tiptap)[ Docs](https://github.com/mountainclans/livewire-tiptap)[ GitHub Sponsors]()[ RSS](/packages/mountainclans-livewire-tiptap/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (10)Versions (20)Used By (0) Tiptap editor for Livewire ========================== [](#tiptap-editor-for-livewire) Установка --------- [](#установка) Установите пакет при помощи Composer: ``` composer require mountainclans/livewire-tiptap ``` Поскольку пакет основан на Tiptap Editor, установите его командой ``` npm install @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/extension-table@^2.0.0 @tiptap/extension-table-row@^2.0.0 @tiptap/extension-table-header@^2.0.0 @tiptap/extension-table-cell@^2.0.0 ``` Добавьте в `app.js` следующие строки: ``` import tiptap from '../../vendor/mountainclans/livewire-tiptap/resources/js/tiptap'; Alpine.data('tiptap', tiptap); ``` Добавьте в `app.css` следующие строки: ``` @import '../../vendor/mountainclans/livewire-tiptap/resources/css/tiptap.css'; ``` *Обратите внимание, что для корректной стилизации в вашем проекте должен использоваться TailwindCSS.* Добавьте в `tailwind.config.js` следующие блоки: ``` export default { content: [ './vendor/mountainclans/livewire-tiptap/resources/views/**/*.blade.php', ], plugins: [ require("flowbite/plugin")({ wysiwyg: true, }), require("flowbite-typography"), ], safelist: [ 'max-w-none', 'text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl', 'w-4', 'h-4', 'w-6', 'h-6', "h-9", 'w-fit', 'max-w-full', 'h-auto', 'block', 'relative', 'absolute', 'flex', "w-64", "w-1/2", "rounded-l-lg", "rounded-r-lg", "bg-gray-200", 'bg-gray-600', 'bg-gray-700', 'bg-gray-900', "bg-opacity-50", "dark:bg-opacity-80", "grid-cols-4", "grid-cols-7", "leading-6", "leading-9", "shadow-lg", "lg:format-md", 'top-1', 'right-1', 'my-0', 'my-1', 'hover:bg-gray-400', 'rounded', 'rounded-lg', 'text-center', 'text-white', 'text-xs', 'items-center', 'justify-center', 'mx-auto', 'cursor-pointer', 'border-none', 'select-none', ] } ``` --- ### Если редактор используется для заливки изображений: [](#если-редактор-используется-для-заливки-изображений) Опубликуйте и примените миграцию: ``` php artisan vendor:publish --tag="livewire-tiptap-migrations" php artisan migrate ``` --- Опционально, Вы можете опубликовать `views` для их переопределения: ``` php artisan vendor:publish --tag="livewire-tiptap-views" ``` Использование ------------- [](#использование) ``` ``` Используйте атрибут `translatable`, если Вы хотите использовать компонент как [translatable поле](https://github.com/mountainclans/livewire-translatable). ### Настройка модели для обработки изображений [](#настройка-модели-для-обработки-изображений) Если Вы заливаете картинки в контент текстового редактора, необходимо настроить их обработку в модели. Используйте трейт: ``` class YourModel extends Model { use MountainClans\LivewireTiptap\Traits\HasEditorMedia; } ``` После сохранения модели с новым полем (в примере `content`), вызовите метод `processUploadedImages`: ``` public function saveBlog(): void { $this->validateInput(); $this->blog->setTranslations('content', $this->content); // или $this->blog->content = $this->content, если поле не переводимое $this->blog->save(); $this->blog->processUploadedImages('content'); } ``` Авторы ------ [](#авторы) - [Vladimir Bajenov](https://github.com/mountainclans) - [ueberdosis](https://github.com/ueberdosis/tiptap) - [Intervention](https://github.com/Intervention/image) - [Flowbite](https://github.com/themesberg/flowbite) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 43 — FairBetter than 90% of packages Maintenance91 Actively maintained with recent releases Popularity9 Limited adoption so far Community6 Small or concentrated contributor base Maturity57 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~13 days Total 19 Last Release 73d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/d363ad351540061c6f38586e772159863da3cfde29cfbd03c9ff5ba8b6b906aa?d=identicon)[VladimirBazhenov](/maintainers/VladimirBazhenov) --- Top Contributors [![VladimirBazhenov](https://avatars.githubusercontent.com/u/44696748?v=4)](https://github.com/VladimirBazhenov "VladimirBazhenov (3 commits)") --- Tags laravellivewire-tiptapMountain Clans ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/mountainclans-livewire-tiptap/health.svg) ``` [![Health](https://phpackages.com/badges/mountainclans-livewire-tiptap/health.svg)](https://phpackages.com/packages/mountainclans-livewire-tiptap) ``` ### Alternatives [leandrocfe/filament-apex-charts Apex Charts integration for Filament PHP. 4861.2M8](/packages/leandrocfe-filament-apex-charts)[spatie/laravel-livewire-wizard Build wizards using Livewire 4061.0M4](/packages/spatie-laravel-livewire-wizard)[spatie/livewire-filepond Upload files using Filepond in Livewire components 306452.7k3](/packages/spatie-livewire-filepond)[vormkracht10/laravel-mails Laravel Mails can collect everything you might want to track about the mails that has been sent by your Laravel app. 24149.7k](/packages/vormkracht10-laravel-mails)[ralphjsmit/livewire-urls Get the previous and current url in Livewire. 82270.3k4](/packages/ralphjsmit-livewire-urls)[codebar-ag/laravel-filament-json-field A Laravel Filament JSON Field integration with CodeMirror support 1124.1k](/packages/codebar-ag-laravel-filament-json-field) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)