CKEditor Field with Filament

[magic-thomas]

I succeed to make CKEditor Form field and want to share it.

I wish someone comment on this to make it better.

Restriction and Cares

1. The CKEditor <textarea> must be named 'content' and the model must have a 'content' attribute.
2. layouts/base.blade.php was published and CKEditor scripts were added to it.
3. Filament 2.x and CKEditor 4.x are used. And I put some CKEditor's plugins.
4. CKEditor Form field is used for Event Model. Event Model's CreatePost , EditPost is edited. 

php artisan make:form-field  CKEditor 

// resources/views/vendor/filament/components/layouts/base.blade.php
<script src="{{ asset('vendor/ckeditor4/ckeditor.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.22.1/plugins/colorbutton/plugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.22.1/plugins/colordialog/plugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.22.1/plugins/panelbutton/plugin.min.js"></script>

// CKEditor.php
class CKEditor extends Field
{
	protected string $view = 'forms.components.c-k-editor';
	protected function setUp(): void
	{
		parent::setUp();
		$this->default('');
		$this->dehydrated(false);
		$this->disableLabel();
	}
}

// c-k-editor.blade.php
<x-dynamic-component
:component="$getFieldWrapperView()"
:id="$getId()"
:label="$getLabel()"
:label-sr-only="$isLabelHidden()"
:helper-text="$getHelperText()"
:hint="$getHint()"
:hint-action="$getHintAction()"
:hint-color="$getHintColor()"
:hint-icon="$getHintIcon()"
:required="$isRequired()"
:state-path="$getStatePath()"
wire:ignore
>
	<textarea wire:ignore
		wire:model.lazy="{{ $getId() }}"
		id="{{ $getId() }}"
		{{ $attributes->merge(['class' => 'form-control']) }}
>	</textarea>

	@once
		@push('scripts')

		<script>
		CKEDITOR.config.image_previewText = '';
		
		function initializeCKEditor() {
			if (CKEDITOR.instances['content']) {
				CKEDITOR.instances['content'].destroy(true);
			}
			
			let editor = CKEDITOR.replace('{{ $getId() }}', {
				filebrowserUploadUrl: '{{ route('upload' , [ '_token' => csrf_token() ]) }}',
				filebrowserUploadMethod: 'form',
				extraPlugins: 'justify,colorbutton,colordialog,panelbutton', 
			});
		
			editor.on('change', function() {
				@this.set('data.content', editor.getData());
			});
			
			CKEDITOR.on('dialogDefinition', function(ev) {
				var dialogName = ev.data.name;
				var dialogDefinition = ev.data.definition;
			});
		}
		
		initializeCKEditor();
		
		document.addEventListener('livewire:dom:afterUpdate', initializeCKEditor);
		</script>
		@endpush
	@endonce
</x-dynamic-component>

// CreateEvent.php
class CreateEvent extends CreateRecord
{
	public $content = ''; // Add this line
	protected static string $resource = EventResource::class;
	
	protected function mutateFormDataBeforeCreate(array $data): array
	{
		$r = request()->all();
		$data['content'] = $r['serverMemo']['data']['data']['content'];
		return $data;
	}
}

// EditEvent.php 
class EditEvent extends EditRecord
{
	use EventTrait;
	public $content = ''; // Add this line
	protected static string $resource = EventResource::class;
	
	protected function mutateFormDataBeforeFill(array $data): array
	{
		return $data;
	}
	
	protected function mutateFormDataBeforeSave(array $data): array
	{
		$r = request()->all();
		$data['content'] = $r['serverMemo']['data']['data']['content'];
		return $data;
	}
}

[jigujigu]

Awesome! 👍

[W1-PopelierE]

Please note that CKEditor is GPL-licensed.

1. If you distribute your software (sell or give away copies), you must also provide the source code to your customers, who are also allowed to distribute that source code.
2. Any modifications or additions to the GPL-licensed software must also be released under the GPL if you distribute them.
3. You must include a copy of the GPL with any distribution of the code or the program.

[W1-PopelierE]

Just letting you know this because I have made this mistake before 😅

[tominal]

Any opinion on what to update on this repo? https://github.com/Kahu-Software-LLC/filament-ckeditor-field
Eventually it could be distributed but it would probably need mentions of that GPL, correct?

[ronefel]

Has anyone managed to make it work on Filament 3.x?

[tominal]

I've been giving my best shot at it on some projects. The discussion board has the current bugs but hopefully I'll have more time to tackle them soon: https://github.com/Kahu-Software-LLC/filament-ckeditor-field