laravelckeditorforum

How Can i import Code ckeditor in my laravel app?


I am making a discussion forum application in Laravel . Here I want to use Ckeditor in comment sections. When somebody comments, then the code should show like here in stackoverflow.

@if(Auth::check()!=null)
    <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default">
            <div class="panel panel-body">
                <form action="/comment" method="POST">
                    {{ csrf_field() }}
                    <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
                    <input type="hidden" name="post_id" value="{{ $post->id }}">
                    <div class="form-group">
                        <label for="comment">Reply</label>
                        <textarea name="body" class="form-control" style="size: 200px"></textarea>
                    </div>
                    <input type="submit" name="com" id="com"  class="btn btn-xs btn-success pull-right">
                </form>
            </div>
        </div>
    </div>
@endif

Please give me very simple steps to use ckeditor. My master file is layout.app and this file is comment.blade.php. Please guide me where I should enter what files and scripts files.


Solution

  • You can use laravel CKEditor Package;

    How to install: Set up package

    composer require unisharp/laravel-ckeditor
    

    Add ServiceProvider

    Edit config/app.php, add the following file to Application Service Providers section.

    Unisharp\Ckeditor\ServiceProvider::class,
    

    Publish the resources

    php artisan vendor:publish --tag=ckeditor
    

    Usage Default way (initiate by name or id) :

    <script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
    <script>
        CKEDITOR.replace( 'article-ckeditor' );
    </script>
    

    Or if you want to initiate by jQuery selector :

    <script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
    <script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
    <script>
        $('textarea').ckeditor();
        // $('.textarea').ckeditor(); // if class is prefered.
    </script>
    

    github link for more

    Example:

    @if(Auth::check()!=null)
    <div class="col-md-6 col-md-offset-3">
        <div class="panel panel-default">
            <div class="panel panel-body">
                <form action="/comment" method="POST">
                    {{ csrf_field() }}
                    <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
                    <input type="hidden" name="post_id" value="{{ $post->id }}">
                    <div class="form-group">
                        <label for="comment">Reply</label>
                        <textarea id="editor1" name="body" class="form-control" style="size: 200px"></textarea>
                    </div>
                    <input type="submit" name="com" id="com"  class="btn btn-xs btn-success pull-right">
                </form>
            </div>
        </div>
    </div>
    @endif
    
    <script>
    
        $('.editor1').ckeditor(); // if class is prefered.
    </script>