Environment:
Using:
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
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>
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!!