鼠标在Chrome中使用CKEditor在Bootstrap模式中选择了错误的对象-Java 学习之路

我正在构建一个HTML网页，我遇到了一个问题 . 为了重现它，我在一个Bootstrap模态中放了一个CKEditor（用于编辑文本的jQuery插件）并将css {direction：rtl;}提供给正文 .
在Chrome中（Firefox / IE工作正常）当窗口的高度较小时（即模态的顶部和底部到达主窗口的边框）并且您输入了一个长文本，因此CKEditor的滚动条出现，问题开始出现模态向右移动，从那时鼠标点击不会很好地击中它下面的目标 . 如果要单击模态内的任何对象，则应单击该对象的左侧 . （参见图片）

Mouse is selecting wrong object

（CKEditor：4.5.6 Bootstrap：3.3.5 Chrome：48.0.2564.97）

我不知道为什么下面代码段中的CKEditor被禁用，但是如果您将此代码复制并粘贴到HTML文件中，则可以看到问题：

body {
            direction: rtl;
        }

<head>
    <title></title>
    <meta charset="utf-8" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  </head>

<body>
    <a href="#dialog1" data-toggle="modal" class="btn btn-default">بیا</a>
    <div class="modal fade" id="dialog1" role="dialog" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <h4>متن برای ترجمه:</h4>
                    <form role="form" method="post" action="#">
                        <textarea class="ckeditor" name="inputText" id="inputText"></textarea>
                    </form>
                </div>
            </div>
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.ckeditor.com/4.5.6/basic/ckeditor.js"></script>

</body>

请帮我解决问题 .
非常感谢你 .

1 回答

1

这是我在运行代码片段时看到的内容 . 看起来很好 .

如果我错过了什么，请告诉我 .

回复于 2024-04-26T04:50:11+08:00

鼠标在Chrome中使用CKEditor在Bootstrap模式中选择了错误的对象

1 回答

相关问题