Search code examples
javascriptjqueryhtmlcssckeditor

Using CKEDITOR hides the default TEXTAREA and doesn't display CKEDITOR

I want to implement CKEDITOR. I included the ckeditor in footer and replaced all.

<script src="<?= site_url('theme/black/assets/plugins/ckeditor/ckeditor.min.js') ?>" type="text/javascript"></script>
<script>
CKEDITOR.replaceAll();
</script>

And in my HTML, I have

<div class="clearfix"></div>
<div class="col-md-12">
    <div class="form-group">
        <label class="control-label col-md-2">Text<span class="required">*</span></label>
        <div class="col-md-8">
            <textarea name="text" id="text" class="form-control ckeditor" style="height:100px;"><?= $results[0]['text']; ?></textarea>
            <span class="help-block"></span>
        </div>
    </div>
</div>

But it hides my default TEXTAREA, and I don't see any CKEDITOR. When I inspect the element, the visibility for default textarea is set to hidden. What have I done wrong?

Solution

  • Keep ckeditor folder in your project directory and provide reference from that as beloow

    <script src="~/ckeditor/ckeditor.js"></script>
<script src="~/ckeditor/styles.js"></script>

    than you can create text areas as usual you have done.