Skip to content

Allow Filament 4.x or 5.x View and edit the source code of the rich text editor in the form field.

License

Notifications You must be signed in to change notification settings

curder/filament-rich-editor-source-code

Repository files navigation

Filament rich editor source code

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

Allow Filament 4.x Or 5.x View and edit the source code of the rich text editor in the form field.

Installation

You can install the package via composer:

composer require curder/filament-rich-editor-source-code

You need to publish the package assets using the following command:

php artisan filament:assets

You can publish the language files using the following command:

php artisan vendor:publish --tag=filament-rich-editor-source-code-translations

Usage

To enable the source code button in the Filament Rich Editor, you need to customize the toolbar buttons by adding the source-code button to the array of toolbar buttons.

RichEditor::make('html')
    ->toolbarButtons([
        ['source-code'], // Add the `source-code` button to the toolbar.
        [ 'bold', 'italic', 'underline', 'strike', 'subscript', 'superscript', 'link'],
        ['h2', 'h3', 'alignStart', 'alignCenter', 'alignEnd'],
        ['blockquote', 'codeBlock', 'bulletList', 'orderedList'],
        ['table', 'attachFiles', 'customBlocks'], // The `customBlocks` and `mergeTags` tools are also added here if those features are used.
        ['undo', 'redo'],
    ]),

Testing

composer test

Development

You can set up the development environment by running the following commands:

Add the following script to your composer.json to require the development dependencies:

{
    "require": {
        "php": "^8.2",
        "curder/filament-rich-editor-source-code": "@dev",
        "filament/filament": "^5.0",
        "laravel/framework": "^12.0",
        "laravel/tinker": "^2.10.1"
    },
    "repositories": [
        {"type": "path", "url": "/Users/curder/Codes/GitHub/curder/filament-rich-editor-source-code"}
    ]
}

Then run:

composer update curder/filament-rich-editor-source-code

If you change js file, should run the following commands to install dependencies and build assets:

# Install the dependencies
pnpm i 

# Build the assets initially
node ./bin/build.js

And run the following command to your project directory update the assets after changing js files:

php artisan filament:assets

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

PRs are welcome.

  • Keep changes focused.
  • Include tests if behavior changes.

Security

If you discover a security issue, please report it privately by emailing the maintainer.

Credits

License

MIT. See LICENSE.

About

Allow Filament 4.x or 5.x View and edit the source code of the rich text editor in the form field.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project