{"id":13540838,"url":"https://github.com/maxeckel/livewire-editorjs","last_synced_at":"2025-04-02T08:30:50.260Z","repository":{"id":41584263,"uuid":"325593454","full_name":"maxeckel/livewire-editorjs","owner":"maxeckel","description":"This Package aims for an easy integration of Editor.JS with Laravel Livewire","archived":true,"fork":false,"pushed_at":"2024-03-02T09:44:29.000Z","size":690,"stargazers_count":151,"open_issues_count":10,"forks_count":24,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-29T10:33:56.515Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxeckel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-30T16:10:01.000Z","updated_at":"2024-12-10T05:57:41.000Z","dependencies_parsed_at":"2024-01-14T23:58:26.426Z","dependency_job_id":"9d3f9621-b810-42a9-9cb5-6d9d7da7b7ef","html_url":"https://github.com/maxeckel/livewire-editorjs","commit_stats":{"total_commits":43,"total_committers":5,"mean_commits":8.6,"dds":0.2093023255813954,"last_synced_commit":"61ffef273e384ed31073933126addcf241301e10"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeckel%2Flivewire-editorjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeckel%2Flivewire-editorjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeckel%2Flivewire-editorjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxeckel%2Flivewire-editorjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxeckel","download_url":"https://codeload.github.com/maxeckel/livewire-editorjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246781840,"owners_count":20832917,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T10:00:33.698Z","updated_at":"2025-04-02T08:30:49.858Z","avatar_url":"https://github.com/maxeckel.png","language":"PHP","funding_links":[],"categories":["Packages / Plugins"],"sub_categories":[],"readme":"# Easy integration of Editor.js in Laravel Livewire\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/maxeckel/livewire-editorjs.svg?style=for-the-badge)](https://packagist.org/packages/maxeckel/livewire-editorjs)\n[![Total Downloads](https://img.shields.io/packagist/dt/maxeckel/livewire-editorjs.svg?style=for-the-badge)](https://packagist.org/packages/maxeckel/livewire-editorjs)\n![GitHub](https://img.shields.io/github/license/maxeckel/livewire-editorjs?style=for-the-badge)\n![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/maxeckel/livewire-editorjs/run-tests.yml?style=for-the-badge)\n\nThis Package adds a Livewire component to your application, which will create an Editor.js instance for you.\n\nOut of the box it already supports image uploads using Livewire and the Image plugin of Editor.js.\n\n**Packaged version of Editor.js: 2.26.5**\n\n## Requirements\n\nThis package requires you to have the following tools installed:\n\n- [Laravel Livewire v2](https://laravel-livewire.com/docs/2.x/quickstart)\n- [Alpine.JS v2 or v3](https://alpinejs.dev/)\n\nPlease refer to the linked guides on how to install these.\n\n## Installation\n\nYou can install the package via composer:\n\n```bash\ncomposer require maxeckel/livewire-editorjs\n```\n\nAfter composer downloaded the package, you will need to publish it's config \u0026 assets:\n\n#### Config (optional)\n\n```bash\nphp artisan vendor:publish --tag=livewire-editorjs:config\n```\n\n#### Assets\n\nFor the assets you have two options:\n\n1. Already, for production, compiled assets including the above mentioned plugins:\n```bash\nphp artisan vendor:publish --tag=livewire-editorjs:assets:compiled --force\n```\n\nThis will copy the compiled assets into `public/vendor/livewire-editorjs`.\n\n2. Publish the raw assets to include them in your own build chain:\n```bash\nphp artisan vendor:publish --tag=livewire-editorjs:assets:raw\n```\n\nThis will copy the raw assets into `resources/js/vendor/livewire-editorjs`.  \nNow you have to include these assets into your own build chain.  \n\nThis method will be needed, if you want to further customize the editor, e.g. adding more plugins or  \nconfigure the installed ones in a different way.\n\n#### IMPORTANT\n\n**For this to work, you will need to install all the plugins you want to use yourself!**  \n**This also includes the ones already configured!**\n\n\nThe last step is to include the scripts within your views. You can do this how ever you prefer.\nIf you have chosen option 1. you can include the scripts with a little blade directive:  \n\n`@livewireEditorjsScripts`\n\n**Advice**\n\nIf you opted for option 1. of publishing the assets, you should make sure, that after a `composer update` \nthe assets are published again to avoid them being outdated. In order to do so update your `composer.json` script \nconfiguration:\n\n```json\n{\n    \"scripts\": {\n        \"post-autoload-dump\": [\n            \"Illuminate\\\\Foundation\\\\ComposerScripts::postAutoloadDump\",\n            \"@php artisan package:discover --ansi\",\n            \"@php artisan vendor:publish --tag=livewire-editorjs:assets:compiled --force\"\n        ]\n    }\n}\n```\n\nIf you opted for option 2. I wouldn't suggest to automatically republish the raw assets, as this would overwrite any \nchanges you made. Please check the changelog after you updated this package.\n\n## Packaged Editor.js plugins\n\n- [Code](https://github.com/editor-js/code)\n- [Header](https://github.com/editor-js/header)\n- [Image](https://github.com/editor-js/image) Configured with Livewire Upload out of the box\n- [Inline Code](https://github.com/editor-js/inline-code)\n- [List](https://github.com/editor-js/list)\n- [Quote](https://github.com/editor-js/quote)\n- [Underline](https://github.com/editor-js/underline)\n\n## Usage\n\n``` php\n@livewire('editorjs', [\n    'editorId' =\u003e \"myEditor\",\n    'value' =\u003e $value,\n    'uploadDisk' =\u003e 'public',\n    'downloadDisk' =\u003e 'public',\n    'class' =\u003e '...',\n    'style' =\u003e '...',\n    'readOnly' =\u003e true,\n    'placeholder' =\u003e 'Lorem ipsum dolor sit amet'\n])\n```\n\n``` php\n\u003clivewire:editorjs\n   editor-id=\"myEditor\"\n   :value=\"$value\" \n   upload-disk=\"public\" \n   download-disk=\"public\" \n   class=\"...\" \n   style=\"...\"\n   :read-only=\"true\"\n   placeholder=\"Lorem ipsum dolor sit amet\"\n/\u003e\n```\n\n### Properties / Parameters\n\n#### editorId\n\nThe `editorId` parameter is used to generate a unique events from the Livewire component, \nin order for you to be able to listen for events of specific editors (in case more than 1 is used on the same page)\n\n**Important!**  \n**Don't use the passed id anywhere else as `id` attribute on an HTML element, as the `editorId` is internally used\nas `id` on the wrapper `div` in which Editor.js gets initialized!  \nIf you use the `id` somewhere else, the instance will break!**  \n\n#### value\n\nThe `value` parameter sets the inital data for the editor instance.  \nThis would be your stored JSON data of Editor.js\n\n#### uploadDisk (optional)\n\nThe `uploadDisk` parameter defines the disk, to which uploaded images should be stored.  \nThis parameter is optional. The default disk to store images in is defined within the packages config file:\n\n`config/livewire-editorjs.php` =\u003e `default_upload_img_disk`\n\nDefault: `public`\n\n#### downloadDisk (optional)\n\nThe `downloadDisk` parameter defines the disk, to which downloaded images should be stored. \nImages will be downloaded from the internet when a user pasts an image URL into the Editor (see [Editor.js image plugin](https://github.com/editor-js/image))  \nThis parameter is optional. The default disk to store images in is defined within the packages config file:\n\n`config/livewire-editorjs.php` =\u003e `default_download_img_disk`\n\nDefault: `public\n\n#### class (optional)\n\nAs the name suggests you can pass in CSS classes as you would with any other component.  \nFor styling the Editor/Blocks, please refer to the [documentation](https://editorjs.io/styles) of Editor.js\n\nDefault: \"\"\n\n#### style (optional)\n\nAs the name suggest you can pass in inline styles as you would with any other component.\n\nDefault: \"\"\n\n#### readOnly (optional)\n\nYou can pass this parameter with an value of \"true\" to set the editor into read only mode.\nThis might be useful, if you want to display articles the same way, as they have been created.\n\nDefault: `false`\n\n#### placeholder (optional)\n\nUsing the `placeholder` property, you can pass a placeholder to the Editor.js instance, which will\nbe displayed in an empty editor.\n\nDefault: '' (set through the corresponding config option `default_placeholder`)\n\n### Events / Saving state\n\nThe Editor is configured to save changes to the server using its built in `onChange` callback.  \nIn this callback the editor will sync its state with Livewire.  \nWhen this happens, Livewire will `emitUp` a save event:  \n\n`editorjs-save:editorId`\n\nThe editorId is substituted, with the editorId parameter you passed to the component.  \nWith this, you can listen for the event within your Livewire Page/Component you use the editor in,\nin order to save changes to your models.\n\n```php \nprotected $listeners = ['editorjs-save:editorId' =\u003e 'saveEditorState'];\n\npublic function saveEditorState($editorJsonData)\n{\n    $this-\u003emodel-\u003edata = $editorJsonData;\n}\n```\n\n### Config\n\nIn order to change the config, you'll first need to publish it:\n\n`php artisan vendor:publish --provider=\"Maxeckel\\LivewireEditorjs\\LivewireEditorjsServiceProvider\" --tag=\"livewire-editorjs:config\"`\n\nor  \n\n`php artisan vendor:publish` and select `livewire-editorjs:config` by entering its number.\n\n#### Default config\n\n```php\n\u003c?php\n\nreturn [\n    'enabled_component_registration' =\u003e true,\n\n    'component_name' =\u003e 'editorjs',\n\n    // Sets the default placeholder to use when a new and empty Editor.js instance is created.\n    'default_placeholder' =\u003e '',\n\n    /*\n     * Available options:\n     *\n     * VERBOSE\tShow all messages (default)\n     * INFO\tShow info and debug messages\n     * WARN\tShow only warn messages\n     * ERROR\tShow only error messages\n     *\n     * Taken from the offical docs of Editor.js:\n     * https://editorjs.io/configuration#log-level\n     */\n    'editorjs_log_level' =\u003e 'ERROR',\n\n    // Defines on which disk images, uploaded through the editor, should be stored.\n    'default_img_upload_disk' =\u003e 'public',\n\n    // Defines on which disk images, downloaded by pasting an image url into the editor, should be stored.\n    'default_img_download_disk' =\u003e 'public',\n];\n\n```\n\n##### enabled_component_registration (default: `true`)\n\nThis option defines, whether the ServiceProvider should register the default livewire component while booting.  \nSet this to `false` when you want to disable the internal component and use your own using the `make:editorjs` command.\n\n##### component_name (default: `editorjs`)\n\nThis option defines, under which name the internal component should be registered.  \nBy default this is set to `editorjs`, making the component accessible via \"\u003clivewire:editorjs\u003e\" or \"@livewire('editorjs')\".   \nYou can change this to whatever fits you best!\n\n##### default_placeholder (default: `''`)\n\nThis option sets a global default for the placeholder property of Editor.js.  \nThe placeholder will be displayed when an instance is created without any content.\n\n##### editorjs_log_level (default: `'ERROR'`)\n\nThis option sets the log level (console output) of Editor.js.  \nThe available options are:\n\n| Value         | Definition                         |\n| ------------- | ---------------------------------- |\n| VERBOSE       | Show all messages                  |\n| INFO          | Show info and debug messages       |\n| WARN          | Show only warn messages            |\n| ERROR         | Show only error messages (default) |\n\nSee [Editor.js docs](https://editorjs.io/configuration#log-level) for reference.\n\n##### default_img_upload_disk (default: `public`)\n\nThis option defines, to which disk uploaded images should be stored.  \nEven though the disk can be changed on a per instance level, this option lets you set a global default.  \nThis is always used, when you don't provide a disk name to the component instance through its props.\n\n##### default_img_download_disk (default: `public`)\n\nThis option defines, to which disk downloaded images from the web should be stored.  \nEven though the disk can be changed on a per instance level, this option lets you set a global default.  \nThis is always used, when you don't provide a disk name to the component instance through its props.\n\n### Commands\n\nThis package adds an `make:editorjs` command to your project.\nWith this command it's possible for you to create your own EditorJs livewire component.\nThis makes it possible for you to change and/or customize the component.\n\nIf you add your own component this way, you should disable the packages internal component registration\nby setting `enabled_component_registration` in the `livewire-editorjs.php` config file to `false`.\n\n**Important!**  \n**By using this method to create your own component, any updates to the packages component won't affect you!**  \n**Which means any enhancements made won't be accessible to you.**\n\n### Extending\n\nIf you want to customize the component or extend its functionality, the best way is to extend the component\nprovided by this package. That way, you will receive updates and still can customize the internals.\n\n```php\n\u003c?php\n\nnamespace App\\Http\\Livewire;\n\nuse Maxeckel\\LivewireEditorjs\\Http\\Livewire\\EditorJS;\n\nclass MyCustomEditor extends EditorJS\n{\n    // Put your custom code here\n}\n```\n\n### Testing\n\n``` bash\ncomposer test\n```\n\n### Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n### Security\n\nIf you discover any security related issues, please email security@max-eckel.dev instead of using the issue tracker.\n\n## Credits\n\n- [Max Eckel](https://github.com/maxeckel)\n- [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n\n## Laravel Package Boilerplate\n\nThis package was generated using the [Laravel Package Boilerplate](https://laravelpackageboilerplate.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxeckel%2Flivewire-editorjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxeckel%2Flivewire-editorjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxeckel%2Flivewire-editorjs/lists"}