Skip to content

Instantly share code, notes, and snippets.

@dwaard
Last active April 3, 2023 08:18
Show Gist options
  • Save dwaard/99922aef2c2336cef701855851385437 to your computer and use it in GitHub Desktop.
Save dwaard/99922aef2c2336cef701855851385437 to your computer and use it in GitHub Desktop.
Laravel Bulma Component that includes a CKEditor 5 based WYSIWYG editor
@props(['value' => '', 'name', 'height' => 400])
<div>
<textarea id="ckeditor-{{ $name }}" name="{{ $name }}" {{ $attributes->merge(['class' => 'textarea']) }} >{!! $value !!}</textarea>
</div>
@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/35.1.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#ckeditor-{{ $name }}'))
.catch(error => {
console.error(error);
});
</script>
@endpush
@push('styles')
<style>
.ck-editor__editable_inline {
min-height: {{ $height }}px;
}
</style>
@endpush
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment