Jodit编辑器弹出窗口不适用于Bootstrap模式

如何解决Jodit编辑器弹出窗口不适用于Bootstrap模式

当我将Jodit编辑器（3.4.2）放在Bootstrap模态（4.3）中时，弹出表单的任何Jodit工具栏项都不允许您在该表单上输入内容。例如，如果单击图像工具栏图标，则会弹出一个表单供您输入URL。该输入字段不会将焦点放在允许您键入任何内容上。这些弹出表单上的按钮可以正常工作。

Jodit-wise的其他所有功能似乎都可以在模式中正常运行，而不是在选择工具栏图标时弹出的表单。如果页面不在Bootstrap模式下，则该页面上的相同Jodit配置也可以使用。

Jodit将z-index设置为比模态高得多。没有什么像输入字段被禁用那样明显。我认为也许需要在显示模态之后创建编辑器，但这对问题没有影响。

HTML

<div>
    <div>
        Click on the image tool.  Can edit url input field.
    </div>
    <div id="editor1"></div>    

    <button onclick="$('#dialog').modal( 'show' );">
        Show modal with editor
    </button>
</div>
<div id="dialog" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">

                <div>
                    Click on the image tool.  Can't edit url input field.
                </div>
                <div id="editor2"></div>    

            </div>

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

JavaScript

var editor1 = new Jodit( '#editor1' );
var editor2 = new Jodit( '#editor2' );

示例：https://jsfiddle.net/Lmqj2ybv/1/

解决方法

需要删除tabindex="-1"

var editor1 = new Jodit( '#editor1' );
var editor2 = new Jodit( '#editor2' );

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.4.26/jodit.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.4.26/jodit.min.js"></script>
 <div>
         <div>
          Click on the image tool.  Can edit url input field.
          </div>
          <div id="editor1"></div>    

   <button onclick="$('#dialog').modal( 'show' );">
   Show modal with editor
   </button>
 </div>
 <div id="dialog" class="modal" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
      
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        
        <div class="modal-body">

          <div>
          Click on the image tool.  Can't edit url input field.
          </div>
          <div id="editor2"></div>    

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