Search code examples
laravelckeditorlaravel-5.4adminlte

Laravel 5.4 AdminLTE CKEditor - editor not showing options

Environment:

  1. XAMPP
  2. Windows 10 home

Using:

  1. Laravel 5.4
  2. AdminLTE

Objective: I'm trying to add CKEditor to my AdminLTE dashboard Page, but when I follow these steps it comes up in my page with no toolbar like this enter image description here

Code:

     <div class="box box-info">
        <div class="box-header">
          <h3 class="box-title">CK Editor
            <small>Advanced and full of features</small>
          </h3>
          <!-- tools box -->
          <div class="pull-right box-tools">
            <button type="button" class="btn btn-info btn-sm" data-widget="collapse" data-toggle="tooltip"
                    title="Collapse">
              <i class="fa fa-minus"></i></button>
            <button type="button" class="btn btn-info btn-sm" data-widget="remove" data-toggle="tooltip"
                    title="Remove">
              <i class="fa fa-times"></i></button>
          </div>
          <!-- /. tools -->
        </div>
        <!-- /.box-header -->
        <div class="box-body pad">
          <form>
                <textarea id="editor1" name="editor1" rows="10" cols="80">
                                        This is my textarea to be replaced with CKEditor.
                </textarea>
          </form>
        </div>
      </div>

and the JS code:

    <script>
        $(function () {
            // Replace the <textarea id="editor1"> with a CKEditor
            // instance, using default configuration.
            CKEDITOR.replace('editor1')
            //bootstrap WYSIHTML5 - text editor
            //$('.textarea').wysihtml5()
        })
    </script>
Solution

  • The problem is in includes of css and js path. Also if you are added it both, then check it in browser using view page source and confirm it with perfect path includes or not!

    If it's all done then make console in $(function () { and check if it called or not?

    If you don't know how to add path for css and js in laravel, please refer below thing:

    CSS path:

    <link rel="stylesheet" type="text/css" href="{{ URL::to('css/bootstrap3-wysihtml5.min.css') }}">

    JS path:

    <script type="text/javascript" src="{{ URL::to('js/bootstrap3-wysihtml5.all.min.js') }}"></script>

    After including path, you need to add HTML and JS code for CkEditor as you used in your question!!

    Hope this will fixed your issue!!