Code is visible on modal

Question

we're working on a project and anyone knows how to integrate ckeditor on modal? because in modal, it shows the tags that came from the ckeditor.

<li>
    <a href="#" data-toggle="modal" data-target="#editComment'.$row['id'].'">
        <u>Edit</u>
    </a>
    <form id="editComment" method="post" action= '.base_url('admin/editComment').'>
        <div id="editComment'.$row['id'].'"class="modal fade">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title">Edit</h2>
                        <span>
                            <input type="hidden" name="task-id" value="'.$row['id'].'">
                        </span>
                    </div>

                    <div class="modal-body">
                        <textarea class="form-control" name="comment">'.$row['comment'].'</textarea>
                        <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>    
                    </div>

view

Possible duplicate of [How to use CKEditor in a Bootstrap Modal?](https://stackoverflow.com/questions/22637455/how-to-use-ckeditor-in-a-bootstrap-modal) — KaoriYui, Jul 08 '17 at 00:32
Dunno if related, but your action on line 1 only has single quotes and so is broken — Nick is tired, Jul 08 '17 at 00:35
Tried adding the double quotation marks and the modal still displaying the code. — Kurt Wieland, Jul 08 '17 at 00:46

James Douglas · Answer 1 · 2017-07-08T10:41:04.893

This is because you cannot have HTML elements inside <textarea>'s. If you do put HTML elements inside, then they will display as plain text. You could use a div instead though, and use some JS/jQuery to make it editable, like this:

$('.editable').each(function() {
  this.contentEditable = true;
});

div.editable {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  padding: 5px;
  /* to make it resizable */
  resize: both; 
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="editable">
  <span>hi</span>
</div>

Notice that, even though there is a <span> element inside the div, only the text inside it shows.

Code is visible on modal

1 Answers1