javascript - CKEditor下的添加按钮不可见

Question

我在表单 modal中使用了CKEditor django 插件。但是当我尝试在 CKEditor 下方显示 ADD 按钮时，该按钮根本不会出现在 UI 中。

如下图所示，我目前将添加按钮保留在 CKEditor 文本框的顶部，因为它放在底部时不会出现。

下面是 HTML 代码片段

   <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="">Driver Name</label>
              <input type="text" class="form-control" name="dn" id="dnn" required="True" />
            </div>

            <div class="form-group">
              <label for="st">Driver Description</label>
              <textarea name="editor1" id="editor1"></textarea>
              <script>
                  CKEDITOR.replace( 'editor1' );
              </script>
            </div>
            <div class="modal-footer">
              <button type="submit" class="btn btn-primary up">
                ADD
              </button>
            </div>

          </div>
   </div>

<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>

有人可以建议如何使添加按钮显示在ckeditor下方。

Answer 1

如果您使用的是 Bootstrap 4，如果您的元素包装在 flex 容器中，则可以使用Order功能。

您的代码应类似于以下内容：

<div class="row">
  <div class="d-flex">
    <div class="col-md-12">

      <div class="form-group">
        <label for="">Driver Name</label>
        <input
          type="text"
          class="form-control"
          name="dn"
          id="dnn"
          required="True"
        />
      </div>

      <div class="form-group">
        <label for="st">Driver Description</label>
        <textarea name="editor1" id="editor1"></textarea>
        <script>
          CKEDITOR.replace("editor1");
        </script>
      </div>

      <div class="modal-footer order-1">
        <button type="submit" class="btn btn-primary up">
          ADD
        </button>
      </div>

    </div>
  </div>
</div>

<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>