Question

我们正在开发一个项目，有谁知道如何在模态上集成ckeditor？因为在模态中，它显示来自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

Answer 1

这是因为您不能在<textarea>内部拥有HTML元素。如果您确实将HTML元素放入其中，那么它们将显示为纯文本。你可以使用div代替，并使用一些JS / jQuery使其可编辑，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，即使div中有一个<span>元素，也只显示其中的文本。

代码在模态上可见

1 个答案: