ktran/ckeditor-elfinder

CKeditor with Elfinder for Laravel

1.0 2021-06-09 09:44 UTC

Requires

• php: >=7.0
• barryvdh/laravel-elfinder: ^0.4.7
• illuminate/support: ^5.5|^6|^7|^8
• intervention/image: ^2.5
• league/flysystem-aws-s3-v3: ^1.0

MIT

• Kevin

• api
• laravel
• ktran

README

About

This is a solution to integrate a content editor into your project with a built-in file manager (using CKeditor in combination with Elfinder)

Features

• Use CKeditor to create a content editor
• Integrated Elfinder for image management
• Generate multiple sizes (thumbnail, medium, original) every time you upload an image file. (similar to wordpress)
• Upload files and integrate with Amazon S3

Installation

Require the ktran/ckeditor-elfinder package in your composer.json and update your dependencies:

composer require ktran/ckeditor-elfinder

Configuration

The defaults are set in config/ckeditor_elfinder.php. Publish the config to copy the file to your own config:

php artisan vendor:publish --provider="Ktran\CE\CEServiceProvider"

Reference

This package is customized from CKeditor library [https://ckeditor.com/] and Elfinder Laravel package [https://github.com/barryvdh/laravel-elfinder]

How to use

1. Add the script and style to the blade view where you want to display the editor

@include("ce::scripts")
@include("ce::styles")

1. Create a textarea element to use as an RTE

<textarea id="editor" name="content"></textarea>

1. Add script config ckeditor

<script>
    if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 )
        CKEDITOR.tools.enableHtml5Elements( document );

    CKEDITOR.config.height = 150;
    CKEDITOR.config.width = 'auto';
    CKEDITOR.config.filebrowserBrowseUrl = '/file-manager/ckeditor';

    var initSample = ( function() {
        var wysiwygareaAvailable = isWysiwygareaAvailable(),
            isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' );

        return function() {
            var editorElement = CKEDITOR.document.getById( 'editor' );

            if ( wysiwygareaAvailable ) {
                CKEDITOR.replace( 'editor' );
            } else {
                editorElement.setAttribute( 'contenteditable', 'true' );
                CKEDITOR.inline( 'editor' );
            }
        };

        function isWysiwygareaAvailable() {
            if ( CKEDITOR.revision == ( '%RE' + 'V%' ) ) {
                return true;
            }
            return !!CKEDITOR.plugins.get( 'wysiwygarea' );
        }
    } )();

    initSample();
</script>

1. enjoy your result

Author

Kevin Tran [[e-mail]] [www.ktranblog.com]